郑州建设企业网站公司,wordpress 调用logo,wordpress怎样添加版权名,打开网站 显示建设中简介 本文会基于scroll view 实现下拉刷新效果#xff0c;在下拉的时候会进入loading状态。
实现效果 效果如上图所示#xff0c;在下拉到底部时候#xff0c;会出现loading条#xff0c;在处理完成后loading条消失。
具体代码
布局
scroll-view scroll-y style在下拉的时候会进入loading状态。
实现效果 效果如上图所示在下拉到底部时候会出现loading条在处理完成后loading条消失。
具体代码
布局
scroll-view scroll-y styleheight:400px; lower-threshold{{10}} scroll-top{{scrollTop}} bind:scrolltolowerscrollToLower refresher-enabledtrue refresher-default-styleblack refresher-threshold{{100}} refresher-triggered{{triggered}} bindrefresherrefreshonRefreshview styleheight: 500px;Hello, world/view
/scroll-view scroll-view 配置 refresher-enabled开启加载效果。 lower-threshold 和bind:scrolltolower对应滚动到底部触发事件。 refresher相关配置为加载效果配置scrollToLower函数会将triggered设置为true当triggered为true时会触发bindrefresherrefresh事件。
逻辑
Page({data: {triggered: false, // 加载中状态scrollTop: 0 },onReady: function () {console.log(ready)},scrollToLower: function () {if (this.data.triggered) {return;}console.log(scrollToLower)this.setData({triggered: true // 开启加载})},// onRefresh: function () {console.log(onRefresh)this.setData({scrollTop:0 // 滚到首部查看加载效果})// 模拟请求回数据后 停止加载setTimeout(() {this.setData({triggered: false, // 关闭加载scrollTop: 0});}, 3000);}})
