微信小程序学习——框架视图层（view）

视图层是有WXML与WXSS编写的，由组件来进行展示。

WXML(WeiXin Markup Language)用于写页面结构的。

WXSS(WeiXin Style Sheet)用于页面的样式。

组件(Component)是视图的基本组成单元。

一、数据绑定

组件属性(需要在引号之内)

1 <view id="item-{{id}}"></view>

1 page({
2    data: {
3        id: 0 
4     } 
5 })

控制属性

1 <view wx:if="{{condition}}"></view>

1 page({
2    data: {
3         condition: true
4     } 
5 })

 

二、列表渲染

wx:for

1 <view wx:for="{{array}}">
2     {{index}}: {{item.message}}
3 </view>

1 page({
2    data: {
3         array: [
4             {message: 'foo'},
5             {message: 'bar'}
6         ]
7     } 
8 })

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

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

1 <view wx:for="{{array}}" wx:for-index="id" wx:for-item='arr'>
2     {{id}}: {{arr.message}}
3 </view>

 

三、条件渲染 wx:if

wx:if...wx:elif...wx:else

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

 

四、模板

1 <template name="msgItem">
2     <view>
3         <text> {{index}}: {{msg}}</text>
4         <text> Time: {{time}} </text>
5     </view>
6 </template>
7 
8 
9 <template is="msgItem" data="{{...item}}">

1 Page({
2   data: {
3     item: {
4       index: 0,
5       msg: 'this is a template',
6       time: '2016-09-15'
7     }
8   }
9 })

 

四、事件

1 <view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>

1 page({
2    tapName: function(e) {
3       console.log(e)    
4    } 
5 })

 

事件分类：冒泡事件和非冒泡事件

1、冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。

2、非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。

冒泡事件列表

类型	触发条件
touchstart	手指触摸动作开始
touchmove	手指触摸后移动
touchcancel	手指触摸动作被打断，如来电提醒，弹窗
touchend	手指触摸动作结束
tap	手指触摸后马上离开
longtap	手指触摸后，超过350ms再离开

注：除表上之外的其他组件自定义事件都是非冒泡事件。

事件绑定：

bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止事件冒泡向上冒泡。

 

转载于:https://www.cnblogs.com/mxyr/p/9360131.html