微信小程序,官方API学习

微信小程序 05/06 阅读 70 views次 人气 0
摘要:

微信小程序,官方API学习微信小程序,官方API学习微信小程序,官方API学习微信小程序,官方API学习微信小程序,官方API学习微信小程序,官方API学习微信小程序,官方API学习微信小程序,官方API学习

页面渲染的方式:

  1. 数据绑定

    使用Mustache{{}}将来自Page中data的动态数据包起来,如<view>{{ message }}</view>

    组件属性(在双引号之内),如<view id="{{id}}"></view>

    控制属性如<view wx:if="{{condition}}"></view>

    关键字(在双引号之内),如<checkbox checked="{{false}}"></checkbox>


  2.列表渲染

三分赛车      在组件上使用wx:for控制属性绑定一个数组,可使用数组中的各项数据重复渲染该组件

     当前项的下标为index,当前项的变量名为item,

     使用wx:for-item可以指定数组当前元素的变量名

     使用wx:for-index可以指定数组当前下标的变量名

     也可以将wx:for用在<block/>标签上,渲染一个包含多节点的结构块

     wx:key:如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态,需要         使用wx:key来指定列表中项目的唯一标识符

 3.条件渲染

     在框架中使用wx:if来判断是否需要渲染该代码块,如<view wx:if="{{condition}}">True</view>

     block wx:if

     因为wx:if是一个控制属性,需要将它添加到标签上,如果要一次性判断多个组件标签,可以使用<block/>

     标签将多个组件包装起来,并在上边使用wx:if控制属性

    <block/>不是一个组件,仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性

    如果需要频繁切换,也可以使用hidden属性简单的控制显示与隐藏,组件始终会被渲染

常用组件:

   1.scroll-view可滚动视图区域,使用竖向滚动时,需要给<scroll-view>一个固定高度,scroll-x允许横向滚动

   2。swiper滑块视图容器,只可以放置<swiper-item>组件

三分赛车       常用属性:

       indicator-dots:是否显示面板指示点

       indicator-color:指示点颜色

       indicator-active-color:当前选中的指示点颜色

       autoplay是否自动切换

       current当前所在滑块的index

三分赛车       interval:自动切换时间间隔

    3。picker,从底部弹起的滚动视图器

    4.switch开关选择器

    5.navigator页面链接

    6.image

       常用属性:

       mode=aspectFill保持纵横比缩放图片,只保证图片的短边能完全显示出来

       lazy-load:图片懒加载,在即将进入一定范围(上下三屏)时才开始加载

       map:longitude中心经度,latitude中心纬度

案例如下:

<view class="section">

    <button bindtap='toggle'>toggle</button>

    <block wx:if='{{flag}}'>

    <view wx:for='{{Array}}' wx:key='{{item.id}}' wx:for-index='in'>

    <input value='{{in}}'></input>

    <input placeholder='{{item。name}}'></input>

    </view>

    <picker mode="time" start="09:01"

    end="21:01" bindchange='bindTimeChange'>

    当前选择:{{time}}

    </picker>

    </block>

    <block wx:else>

    <swiper autoplay interval='{{interval}}' indicator-dots indicator-active-color="red">

    <swiper-item>

    <image src='/pages/images/banner-01。png' mode='aspectFit'></image>

    </swiper-item>

    <swiper-item>

    <image src='/pages/images/banner-01.png' mode='aspectFit'></image>

    </swiper-item>

    <swiper-item>

    <image src='/pages/images/banner-01.png' mode='aspectFit'></image>

    </swiper-item>

    </swiper>

    <scroll-view scroll-x class='scroll'>

    <image src='/pages/images/banner-01.png' mode='aspectFit'></image>

    <image src='/pages/images/banner-01。png' mode='aspectFit'></image>

    <image src='/pages/images/banner-01.png' mode='aspectFit'></image>

    </scroll-view>

    </block>

</view>



评论

表情

分享到: