微信小程序 自定义顶部下拉样式

---

微信片段

一次开发时小程序时，碰到以下功能，分享一下
1.首页里顶部下拉背景是个图片
2.下拉后跳转其他页面

图片资源来自懂视生活

---

使用微信的scroll-view

核心配置：
1.refresher-default-style：none 表示不使用默认样式
2.slot=“refresher” 绑定内容

---

js

/**
 * 2020-09-02
 * https://blog.csdn.net/qq_39816586/article/details/108357166
 */
Page({
  data: {
    showTriggered: true
  },
  bindrefresherrefresh(e) {
    wx.showToast({
      title: '两秒后收回',
      icon: 'none',
    })
    setTimeout(() => {
      this.setData({ 
        showTriggered: false
      })
    }, 2000);
  },
})

wxml

<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">
    <image src="https://img.51dongshi.com/20200826/sp/26906469.jpg"></image>
  </view>
  
  <view wx:for="{{100}}" wx:key="index">{{item}}-{{index}}</view>

</scroll-view>

wxss

.refresh{position:absolute;left:0;top:0;width:100%;height:100%;background-color:#eeeeee;color:#000000;}
.refresh-container image{width: 750rpx;}