在需要下滑的页面放置scroll-view
html
<scroll-view class="refresh" scroll-y="{{true}}" refresher-enabled="{{true}}" refresher-triggered="{{showTriggered}}" refresher-threshold="{{100}}" refresher-default-style="none" bindrefresherrefresh="bindrefresherrefresh"> <!--下滑后展示部分,可以是图片--> <view class="refresh-container" slot="refresher"> <view style="width: 100vw;height: 10000rpx;background-color: #4693ff;"></view> </view> <!--注意!! 1. 弹框可滑动部分不要放在scroll-view中 , 否则fixed会被降级为absolute,从而造成样式错乱问题 2. 需要滑动部分请用scroll-view包裹,否则会造成滑动整个页面的情况
3. 需要滑动不可避免需要放在scroll-view中时候,可以给滑动模块添加 catchtouchmove="true" 防止冒泡
--> <view class="container"> 主页面 </view> </scroll-view>
js
bindrefresherrefresh (e) { // wx.showToast({ title: '两秒后收回', icon: 'none', }) setTimeout(() => { this.setData({ showTriggered: false }) }, 200); },
wxss
.refresh { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #eeeeee; color: #000000; overflow: hidden; }