- 页面下拉刷新的两种方法
- 配置json
- 在需要实现下拉刷新的页面配置xxx.json
{ // 是否开启下拉刷新 "enablePullDownRefresh": true, //下拉背景字体、loading 图的样式，仅支持 dark/light，默认light不可见 "backgroundTextStyle": "dark", //页面上拉触底事件触发时距页面底部距离，单位为px "onReachBottomDistance": 50 }- js 文件定义监听事件，完成后收起下拉刷新
在Page 中定义onPullDownRefresh 处理函数，监听该页面用户下拉刷新事件
onPullDownRefresh() { // doing some thing // 下拉刷新执行完毕要停止当前页面下拉刷新 setTimeout(function() { wx.stopPullDownRefresh() }, 1000) } - 使用wx.startPullDownRefresh(Object object) 、wx.stopPullDownRefresh(Object object)
- wx.startPullDownRefresh() 开始下拉刷新，调用后出发下拉刷新动画，效果与用户手动下拉刷新一致
- wx.stopPullDownRefresh() 停止当前页面下拉刷新。
- 参数
- success 接口调用成功的回调
- fail 接口调用失败的回调
- complete 接口结束时的回调函数
wx.startPullDownRefresh({ success: () => {} fail: () => {} complete: () => {} })
- 数据绑定
WXML中的动态数据均来自对应Page的data-
数据绑定使用 Mustache 语法 （
双大括号）将变量包起来。
1. 组件属性
<view id="item-{{id}}"></view>
2. 控制属性
<view wx:if="{{ condition }}"></view>
3. 关键字
<checkbox checked="{{false}}"></checkbox> -
运算
可以在 {{}} 内 进行简单的运算，支持的方式
1. 三元运算
<view hidden="{{flag ? true : false}}">Hidden</view>
2. 算数运算
<view>{{a + b}} + {{ c }} + d</view>
3. 逻辑判断
<view wx:if="{{length > 5}}"></view>
4. 字符串运算
<view>{{"hello" + name}}</view>
5. 数据路径运算
<view>{{object.key}} {{array[0]}}</view> -
列表渲染 wx:for
- 默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item
- 使用 wx: for-item 可指定数组当前元素的变量名
使用wx:for-index 可指定数组当前下标的变量名 - wx:for 可以嵌套
- block wx:for
类似 block wx:if，也可以将 wx:for 用在<block/>标签上，以渲染一个包含多节点的结构块 - wx:key 的值以两种形式提供
- 字符串， 代表在for 循环的array中的某个property， 该property 的值需要的是列表中唯一的字符串或数字，且不能动态改变。
- 保留关键字 *this 代表在for 循环中的item 本身，这种表示需要item 本身是一个唯一的字符串或者数字
当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。不提供 wx:key，会报一个 warning， 如果列表是静态，或者不必关注其顺序，可以选择忽略 -
条件渲染 wx:if
- wx:if="{{condition}}" 来判断是否需要渲染该代码块
- wx:elif 和 wx:else 来添加一个 else 块：
⚠️ <block/> 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性
-
- 配置json
网友评论