学习微信小程序—那些你必须掌握的WXML知识

    技术2022-07-11  94

    数据绑定

    1.使用双大括号 {{}} 将变量包起来

    <view> {{ message }} </view> Page({ data: { message: 'Hello' } })

    2.获取对象的值,通过下标获取数组的值 3.可以做运算,比如判断,四则运算等 4.使用js传过来的值必须使用花括号

    条件渲染

    wx:if 通过wx:if="{{condition}}"来判断是否需要渲染该代码块:

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

    也可以用wx:elif和wx:else来添加一个else块:

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

    block wx:if 一次判断多个组件标签

    <block wx:if="{{true}}"> <view> view1 </view> <view> view2 </view> </block>

    列表渲染

    wx:for 在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。 默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item

    <view wx:for="{{array}}"> {{index}}: {{item.message}} </view> Page({ data: { array: [{ message: 'foo', }, { message: 'bar' }] } })

    如果想要修改循环列表的值和下标的名称,那么可以通过wx:for-index和wx:for-item来指定

    <view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName"> {{idx}}: {{itemName.message}} </view>

    wx:for 也可以嵌套,九九乘法表

    <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i"> <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j"> <view wx:if="{{i <= j}}"> {{i}} * {{j}} = {{i * j}} </view> </view> </view>

    wx:key作用

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

    字符串,代表在 for 循环的 array 中 item 的某个 property,该 property 的值需要是列表中唯一的字符串或数字,且不能动态改变。保留关键字 *this 代表在 for 循环中的 item 本身,这种表示需要 item 本身是一个唯一的字符串或者数字,如: 当数据改变触发渲染层重新渲染的时候,会校正带有 key 的组件,框架会确保他们被重新排序,而不是重新创建,以确保使组件保持自身的状态,并且提高列表渲染时的效率。

    模板

    定义模板 使用name属性,作为模板的名字。然后在内定义代码片段,如:

    <template name="msgItem"> <view> <text> {{index}}: {{msg}} </text> <text> Time: {{time}} </text> </view> </template>

    使用模板 使用is属性,声明需要的使用的模板,然后将模板所需要的data传入,如:

    <template is="msgItem" data="{{...item}}"/> Page({ data: { item: { index: 0, msg: 'this is a template', time: '2016-09-15' } } })

    include的使用

    如果一段代码不需要填入动态的数据,那么可以直接使用include把这段代码引入到其它的地方 include可以将目标文件除了template的整个代码引入,相当于是拷贝到include位置,如:

    <include src="header.wxml"/> <view> body </view> <include src="footer.wxml"/>

    事件的绑定

    在组件中绑定一个事件处理函数。 如bindtap,当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。

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

    在相应的Page定义中写上相应的事件处理函数,参数是event。

    Page({ tapName: function(event) { console.log(event) } })

    事件—参数传递

    给元素绑定 data-id=’{{item.id}}

    事件的分类

    冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递。非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递。
    Processed: 0.011, SQL: 9