本文共 5524 字，大约阅读时间需要 18 分钟。

前言

看到标题也许有人会说：系统不是已经自带了下拉刷新，你去仿照系统的下拉刷新是不是吃多了没事干？其实真相并不是这样的。在这篇文章中，我们利用swpier+scorllview实现了一个page包含多个页卡来展示更多内容。然而，系统自带刷新在此情景下使用体验极差，所以在这篇文章中专门告知大家，在这种情景下怎么使用下拉刷新使用户体验达到更佳。实际上大部分人项目中使用的都是系统默认的下拉刷新效果，使用这篇文章中的效果可能和整体效果有冲突了，所以今天我们来模仿系统的下拉刷新效果。最终效果图如下：

思路分析

此篇文章是在这篇文章基础上开发，如果你还没有看过这篇文章，建议移步先看下。

• 将原来的展示刷新状态的view 替换成文中展示的刷新view
• 文中展示的刷新view由三个水平并列的小圆点组成
• 按顺序改变每个小圆点的背景颜色透明度，然后循环这个过程

实现

接下来就是直接看代码了

// wxml布局文件
     
        
     //去掉原来的刷新view    
           
            
            
          
         
           
      
       {
   {
   item}}
            
              
       
        新华网
               
       
        2344评
             
          
       
    
   

主要逻辑其实是js中，下面我会贴出代码，并写好详细注释：

// js文件var sy;Component({
     /**   * 组件的属性列表   */  properties: {
     },  /**   * 组件的初始数据   */  data: {
       data: ['狗狗是人类最好的朋友', '90%长痘的人都不知道，药店里不起眼的东西，睡前抹一抹，祛痘很快', '保时捷Cayenne，即刻驾驭梦想','沙漠极限挑战：三台空调挑战70度极限高温，谁先宕机？','德牧带大的二哈，二哈现在离不开她了，一刻不见就想德牧','为什么说达到第四宇宙速度就可以逃出银河系？','许久没去草坪的边牧，来到公园，开心的像个孩子'],    desc: '下拉刷新',    hei: 0,    scrolltop: 0,    isindrag: false,    opacity1: 1.0,    opacity2: 0.3,    opacity3: 0.3,    setInter: ''//计时器  },  lifetimes: {
       // 生命周期函数    attached: function() {
         console.log('attached')    },    moved: function() {
         console.log('moved')    },    detached: function() {
         console.log('detached')      clearInterval(that.data.setInter)    },    ready: function () {
         console.log('ready')      var that = this      //通过定时器循环改变三个原点的背景颜色透明度      that.data.setInter = setInterval(function () {
           if(that.data.opacity1 == 1.0){
             that.setData({
               opacity1: 0.3,            opacity2: 1.0,            opacity3: 0.3          })        } else if (that.data.opacity2 == 1.0){
             that.setData({
               opacity1: 0.3,            opacity2: 0.3,            opacity3: 1.0          })        } else if (that.data.opacity3 == 1.0) {
             that.setData({
               opacity1: 1.0,            opacity2: 0.3,            opacity3: 0.3          })        }      }.bind(this), 200)    }  },  /**   * 组件的方法列表   */  methods: {
       start(e) {
         console.log(e)      sy = e.touches[0].clientY      console.log('开始触摸 sy : ' + sy + ' scrolltop : ' + this.data.scrolltop)    },    move(e) {
         //console.log('hei : ' + this.data.hei)      var delta = e.touches[0].clientY - sy      console.log('delta : ' + delta)      if (this.data.hei <= 0 && delta <= 0) {
           return      }      if (this.data.scrolltop <= 0) {
           if (this.data.isindrag == false) {
             this.setData({
               isindrag: true          })        }        var tempdelta = 0        console.log('hei : ' + this.data.hei)        if (delta > 0) {
    //手指向下滑动          if (this.data.hei > 50) {
               this.setData({
                 desc: '松开刷新'            })            tempdelta = this.data.hei + delta / (this.data.hei - 50) //增大阻尼          } else {
               this.setData({
                 desc: '下拉刷新'            })            tempdelta = this.data.hei + delta          }        } else {
    //手指向上滑动          tempdelta = this.data.hei + delta          if (tempdelta <= 0) {
               tempdelta = 0          }          this.setData({
               desc: '下拉刷新'          })        }        this.setData({
             hei: tempdelta        })      }      //console.log('hei : ' + this.data.hei)      sy = e.touches[0].clientY    },    end(e) {
         console.log('手指离开')      var that = this      if (this.data.hei >= 50) {
           this.setData({
             desc: '正在刷新...'        })        this.setData({
             hei: 50        })        setTimeout(function() {
             sy = 0          that.setData({
               desc: '下拉刷新',            hei: 0,            isindrag: false,            scrolltop: 0          })        }, 3000)      } else {
           sy = 0        that.setData({
             desc: '下拉刷新',          hei: 0,          isindrag: false,          scrolltop: 0        })      }    },    scorll(e) {
         var st = e.detail.scrollTop      console.log('滚动 st : ' + st)      if (this.data.isindrag == false) {
           this.setData({
             scrolltop: st        })      }    }  }})

可以看到js中的主要逻辑代码跟这篇文章中的一样，只是增加了组件生命周期函数，在ready函数中开启定时器，来顺序改变三个小圆点的背景颜色透明度。

接下来wxss文件

// wxss文件.item {
     display: flex;  flex-direction: column;  border-bottom: 1rpx #ccc solid;  justify-content: center;  padding: 20rpx;}.title {
     font-size: 35rpx;}.bottom {
     display: flex;  flex-direction: row;  font-size: 20rpx;  color: gray;  margin-top: 10rpx;}.comment {
     margin-left: 30rpx;}.column {
     display: flex;  flex-direction: column;}.refresh {
     display: flex;  flex-direction: row;  justify-content: center;  align-items: center;  color: white;  font-size: 28rpx;}.freshview{
     display: flex;  flex-direction: row;  justify-content: center;  align-items: center;}.dot{
     width: 12rpx;  height: 12rpx;  margin-right: 12rpx;  background: gray;  border-radius: 50%;}

到这里，代码基本完成，接下来我们再看下效果图：

// wxml布局文件
     
        
     //去掉原来的刷新view    
     

最终的效果就是文章开始的效果。

尾巴

好了，今天的文章就到这里了，如果文章中有错误的地方，欢迎大家留言指正。如果你喜欢我的文章，也欢迎给我点赞，评论，谢谢！

转载地址：http://uywwz.baihongyu.com/