微信小程序學習筆記四（持續更新）---征服scroll-view下拉刷新

貼圖

大概實現這種使用swiper做tab切換，數據頁面下拉刷新的效果。
官方提供的scroll-view作為容器，如果在scroll-view使用onPullDownRefresh實現下拉刷新，會存在頁面刷新卡，並且刷新會出現在tab之上，用戶體驗極差。
這里先來一波參考文檔：
scroll-view微信官方文檔
scroll-view下拉組件---來自其他大神自己封裝的組件，強推！實現思路還是scroll-view

以下代碼為示例，並非圖片效果，圖片效果需要根據自己業務修改

具體實現：

1、下載scroll-view下拉組件將所需要的x-scroll-view組件拷至自己項目對應的component文件目錄下。
2、頁面json文件中引用組件：

"usingComponents": {
    "x-scroll-view": "../path/x-scroll-view"
    }

3、.wxml中使用組件：

<x-scroll-view refreshing="{{refreshing}}"   style='height:1000rpx;' nomore="{{nomore}}" bindpulldownrefresh="_onPullDownRefresh" bindscroll="_onScroll">
     <view style='min-height:1100rpx'>
       <block wx:for="{{colors}}"  wx:for-index="index" wx:key="index">
         	<view class="view" style="background: {{item}}">{{index + 1}}. {{item}}</view>
       </block>
       </view>
     </x-scroll-view>

注意：必須在循環外面嵌套一層view，將高度設置為超過scroll-view的高度，否則在數據高度未超過scroll-view本身高度時，無法觸發下拉刷新
4、.js文件中：

Page({

  data: {
    colors: [],
    scrollLeft: 0,
    currentTab: 0,
    currentIndex: 0,
  },
  // tab切換
switchTab: function(e) {
    this.setData({
      currentIndex: e.detail.current
    })
  },
  // 點擊tab導航切換
  switchNav: function(e) {
    let cur = e.target.dataset.current;
    if (this.data.currentTab == cur) {
      return false
    } else {
      this.setData({
        currentTab: cur
      })
    }
  },
  _randomColor: function () {
    return `rgba(${Math.floor(Math.random() * 256)},${Math.floor(Math.random() * 256)},${Math.floor(Math.random() * 256)},${(Math.random() * 0.3 + 0.2).toFixed(1)})`;
  },

  _generateColors: function (length) {
    return new Array(length).fill(null).map(() => this._randomColor());
  },

  //下拉刷新監聽函數
  _onPullDownRefresh: function () {
    setTimeout(() => {
      const colors = this._generateColors(1);
      this.setData({
        colors,
        refreshing: false,
      });
    }, 2000);
  },

  //加載更多監聽函數
  _onLoadmore: function () {
    setTimeout(() => {
      if (this.data.colors.length == 80) {
        this.setData({ nomore: true })
      } else {
        const colors = this._generateColors(1);
        this.setData({ colors: [...this.data.colors, ...colors] });
      }
    }, 1000);
  },

  _onScroll: function (e) {
    console.log(e);
  },

  onLoad: function (options) {
    const colors = this._generateColors(1);
    this.setData({ colors });
  },
})

以上代碼實現下拉便可實現下拉刷新，再加上頭部tab

<scroll-view scroll-x class='tabHeader' scroll-left="{{scrollLeft}}">
    <view data-current='0' bindtap='switchNav' class="tab-item {{currentIndex==0?'active':''}}">
      <view class="reset {{currentIndex==0?'reset-active':''}}"></view>tab1
    </view>
    <view class="tab-item {{currentIndex==1?'active':''}}" data-current='1' bindtap='switchNav'>
      <view class="reset  {{currentIndex==1?'reset-active':''}}"></view>tab2
     </view>
    <view class="tab-item {{currentIndex==2?'active':''}}" data-current='2' bindtap='switchNav'>
      <view class="reset {{currentIndex==2?'reset-active':''}}"></view>tab3
     </view>
  </scroll-view>
   <swiper duration="300" current='{{currentTab}}' bindchange='switchTab' style='height:{{winHeight}}rpx; background:#F2F2EF'>
   <swiper-item>
   		<x-scroll-view refreshing="{{refreshing}}"   style='height:1000rpx;' nomore="{{nomore}}" bindpulldownrefresh="_onPullDownRefresh" bindscroll="_onScroll">
      		<view style='min-height:1100rpx'>
        		<block wx:for="{{colors}}"  wx:for-index="index" wx:key="index">
          			<view class="view" style="background: {{item}}">{{index + 1}}. {{item}}</view>
        		</block>
        	</view>
      </x-scroll-view>
    </swiper-item>
     <swiper-item>
   		<x-scroll-view refreshing="{{refreshing}}"   style='height:1000rpx;' nomore="{{nomore}}" bindpulldownrefresh="_onPullDownRefresh" bindscroll="_onScroll">
      		<view style='min-height:1100rpx'>
        		<block wx:for="{{colors}}"  wx:for-index="index" wx:key="index">
          			<view class="view" style="background: {{item}}">{{index + 1}}. {{item}}</view>
        		</block>
        	</view>
      </x-scroll-view>
    </swiper-item>
     <swiper-item>
   		<x-scroll-view refreshing="{{refreshing}}"   style='height:1000rpx;' nomore="{{nomore}}" bindpulldownrefresh="_onPullDownRefresh" bindscroll="_onScroll">
      		<view style='min-height:1100rpx'>
        		<block wx:for="{{colors}}"  wx:for-index="index" wx:key="index">
          			<view class="view" style="background: {{item}}">{{index + 1}}. {{item}}</view>
        		</block>
        	</view>
      </x-scroll-view>
    </swiper-item>
</swiper>
      

加上部分wxss代碼：

page {
height: 100%;
display: flex;
flex-direction: column;
}

x-scroll-view {
height: calc(100% - 51px);
}
.tabHeader {
height: 90rpx;
width: 100%;
line-height: 89rpx;
font-size: 16rpx;
display: flex;
align-items: center;
z-index: 99;
box-shadow:2px 10px 25px rgba(173,139,1,0.1);
}

okok~