简介

        本文会基于scroll view 实现下拉刷新效果，在下拉的时候会进入loading状态。

实现效果

效果如上图所示，在下拉到底部时候，会出现loading条，在处理完成后loading条消失。

具体代码

布局

<scroll-view scroll-y style="height:400px;" lower-threshold="{{10}}" scroll-top="{{scrollTop}}" bind:scrolltolower="scrollToLower" refresher-enabled="true" refresher-default-style="black" refresher-threshold="{{100}}" refresher-triggered="{{triggered}}" bindrefresherrefresh="onRefresh"><view style="height: 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);}})