微信小程序开发---小程序框架---小程序的视图层---4

小程序的视图层    xxx.wxml

• 数据绑定
• 列表渲染
• 条件渲染
• 绑定事件

 

数据绑定

• 语法： {{ }}

//视图层 例如：index.wxml
<view>{{ message }}</view>

//逻辑层 例如：index.js
Page({
    data:{
        message: 'Hello MINA!'
    } 
})

 

列表渲染

• 语法：wx:for

//逻辑层  xxx.js
Page({
    data:{
        array:[{          // array数组，包含了两个对象
            messqge:'foo',
        },{
            message:'bar'
        }]
    } 
})    

//视图层 xxx.wxml
<view wx:for="{{array}}">   // for循环array数组   //注意，与变量展示相比，需要加两个冒号
    {{index}}: {{item.message}} // index是数组序号，item是数组里的对象
</view>

 

条件渲染

• 语法： wx:if 、wx:elif、wx:else

<view wx:if=“{{length > 5}}”> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

 

绑定事件

页面事件	触发时机
tap	手指触摸后马上离开
longpress	手指触摸后，超过350ms再离开（推荐使用）
longtap	手指触摸后，超过350ms再离开
touchstart	手指触摸动作开始
touchend	手指触摸动作结束

 

 

 

 

 

 

 

 

• 事件绑定的写法以key、value的形式
• key以bind或catch开头，然后跟上事件的类型

// 视图层  xxx.wxml
<view id="tapTest" data-hi="WeChat" bindtap='tapName'> Click me! </view>


// 逻辑层 xxx.js
Page({
    tapName: function(event) {
          console.log(event)
    }
})