526互联

微信小程序使用scroll-view，实现顶部下滑与页面融为一体

发布时间 2023-06-15 15:10:57作者: 哎哟喂勒

　在需要下滑的页面放置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;
}