前言

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

思路分析

此篇文章是在微信小程序自定义下拉刷新这篇文章基础上开发，如果你还没有看过这篇文章，建议移步先看下。
接下来我们分析下实现思路：

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

实现

接下来就是直接看代码了
首先是布局文件：

// wxml布局文件
<scroll-view style='height:100%' scroll-y='{{!isindrag}}' bindscroll='scorll'><view class='column' bindtouchstart='start' bindtouchend='end' bindtouchmove='move'><!--<view style='height:{{hei}}px;background:gray' class='refresh'>{{desc}}</view> -->//去掉原来的刷新view<view style='height:{{hei}}px' class='freshview'><view class='dot' style='opacity:{{opacity1}}'/><view class='dot' style='opacity:{{opacity2}}'/><view class='dot' style='opacity:{{opacity3}}'/></view><view class='item' wx:for='{{data}}'><view class='title'>{{item}}</view><view class='bottom'><view>新华网</view><view class='comment'>2344评</view></view></view></view>
</scroll-view>

主要逻辑其实是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].clientYconsole.log('开始触摸 sy : ' + sy + ' scrolltop : ' + this.data.scrolltop)},move(e) {//console.log('hei : ' + this.data.hei)var delta = e.touches[0].clientY - syconsole.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 = 0console.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 + deltaif (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 = thisif (this.data.hei >= 50) {this.setData({desc: '正在刷新...'})this.setData({hei: 50})setTimeout(function() {sy = 0that.setData({desc: '下拉刷新',hei: 0,isindrag: false,scrolltop: 0})}, 3000)} else {sy = 0that.setData({desc: '下拉刷新',hei: 0,isindrag: false,scrolltop: 0})}},scorll(e) {var st = e.detail.scrollTopconsole.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布局文件
<scroll-view style='height:100%' scroll-y='{{!isindrag}}' bindscroll='scorll'><view class='column' bindtouchstart='start' bindtouchend='end' bindtouchmove='move'><!--<view style='height:{{hei}}px;background:gray' class='refresh'>{{desc}}</view> -->//去掉原来的刷新view<view style='height:{{hei}}px' class='freshview' hidden='{{hei <= 0}}'>//没有下拉的时候隐藏刷新view，增加此句代码<view class='dot' style='opacity:{{opacity1}}'/><view class='dot' style='opacity:{{opacity2}}'/><view class='dot' style='opacity:{{opacity3}}'/></view><view class='item' wx:for='{{data}}'><view class='title'>{{item}}</view><view class='bottom'><view>新华网</view><view class='comment'>2344评</view></view></view></view>
</scroll-view>

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

尾巴

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

微信小程序仿系统自带下拉刷新效果相关推荐

微信小程序仿记事本，带下划线，自动换行,高度自增
最近在学习微信小程序,要做一个仿记事本,带下划线且能自动换行一开始想用input添加border,加js来实现,但是很麻烦,后面将所有文字累加成字符串以及自动换行都不好做. 后来决定用textare ...
微信小程序仿闲鱼『下拉菜单』
下拉菜单我们非常常见了,但是要在微信小程序中实现并不容易,今天带来的是仿闲鱼下拉菜单,相信对您有一定的帮助~~ 先看效果: 麻雀虽小五脏俱全,此效果很复杂,我们将其拆分为多个步骤来分析~ 1)tab状 ...
入门微信小程序(含实战) [第九篇] -- 下拉刷新和上拉加载
下拉刷新和上拉加载是两个独立又密切联系的功能,上拉加载需要服务器端有分页机制,而下拉刷新除了重新获取信息外还要对之前的状态和页码进行初始化. 一个一个来吧. 服务器端分页其实yii2早就已经为我们准 ...
微信小程序 ios自定义导航栏下拉“橡皮筋” 效果
问题: 1.微信小程序ios中如果自定义导航栏取消了橡皮筋效果页面无法滑动 2.如果不取消,页面往下拉时会与顶部有一大片空白(安卓本身scrollTop不会有负值) 3.fixed之后absolute ...
微信小程序采坑四：下拉刷新不回弹
问题描述: 下拉刷新在手机上不会自动回弹,开发工具可以解决办法: 主动调用wx.stopPullDownRefresh
【微信小程序】解决“enablePullDownRefresh“: true下拉刷新还是不起作用
问题描述由于一开始的方案不是整个页面都滚动,用了scroll-view,后来方案改成整个页面滚动,得添加下拉刷新的功能.这时候问题就出现了,按照文档上配置 "enablePullDownR ...
微信小程序上滑加载下拉刷新（onscrollLower）分批加载数据下篇
事件(wxml)>bindscrolltolower="onscrollLower" slice() 方法可从已有的数组中返回选定的元素. 请注意,该方法并不会修改数组,而是 ...
【微信小程序】-- 全局配置 -- window - 下拉刷新上拉触底（十六）
微信小程序通过wx.redirectTo,实现单页面刷新效果＆下拉刷新页面数据效果
微信小程序通过wx.redirectTo,实现单页面刷新效果 & 下拉刷新页面数据效果一: 使用 wx.redirectTo(),实现页面刷新数据效果 API说明: 关闭当前页面,跳转到应 ...

微信小程序仿系统自带下拉刷新效果

微信小程序仿系统自带下拉刷新效果

前言

思路分析

实现

尾巴

微信小程序仿系统自带下拉刷新效果相关推荐

最新文章

热门文章