微信小程序开发—小程序框架—小程序的视图层—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) 
    } 
})

原创文章，作者：奋斗，如若转载，请注明出处：https://blog.ytso.com/6197.html

微信小程序开发—小程序框架—小程序的视图层—4详解手机开发

相关推荐

发表回复