微信小程序学习笔记四（持续更新）---征服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中使用组件：

     
       
         	{{index + 1}}. {{item}}
       
       
     

注意：必须在循环外面嵌套一层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

    
      tab1
    
    
      tab2
     
    
      tab3
     
  
   
   
   		
      		
        		
          			{{index + 1}}. {{item}}
        		
        	
      
    
     
   		
      		
        		
          			{{index + 1}}. {{item}}
        		
        	
      
    
     
   		
      		
        		
          			{{index + 1}}. {{item}}
        		
        	
      
    

      

加上部分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~