- 页面下拉刷新的两种方法
- 配置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
小程序--API
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...