博客
关于我
微信小程序仿系统自带下拉刷新效果
阅读量:379 次
发布时间:2019-03-05

本文共 5470 字,大约阅读时间需要 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中稍微坐下修改。

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

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

尾巴

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

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

你可能感兴趣的文章
MSSQL数据库迁移到Oracle(二)
查看>>
MSSQL日期格式转换函数(使用CONVERT)
查看>>
MSTP多生成树协议(第二课)
查看>>
MSTP是什么?有哪些专有名词?
查看>>
Mstsc 远程桌面链接 And 网络映射
查看>>
Myeclipse常用快捷键
查看>>
MyEclipse更改项目名web发布名字不改问题
查看>>
MyEclipse用(JDBC)连接SQL出现的问题~
查看>>
mt-datetime-picker type="date" 时间格式 bug
查看>>
myeclipse的新建severlet不见解决方法
查看>>
MyEclipse设置当前行背景颜色、选中单词前景色、背景色
查看>>
Mtab书签导航程序 LinkStore/getIcon SQL注入漏洞复现
查看>>
myeclipse配置springmvc教程
查看>>
MyEclipse配置SVN
查看>>
MTCNN 人脸检测
查看>>
MyEcplise中SpringBoot怎样定制启动banner?
查看>>
MyPython
查看>>
MTD技术介绍
查看>>
MySQL
查看>>
MySQL
查看>>