小程序自定义下拉刷新

前言

由于官方提供的onPullDownRefresh下拉刷新,在我们自定义导航栏的情况下会把加载动画遮住,看了官方解释也是不能调动加载动画的位置,就只能是自定义下拉刷新了

正文

wxml

 <scroll-view scroll-y style="height: 100ch;" enable-back-to-top="true" bindscrolltolower='onReachBottom' <!-- 监听布局touch事件 --><view class='column' bindtouchstart='start' bindtouchend='end' bindtouchmove='move'><!-- //刷新状态view --><block wx:if="{{refreshBatch}}"><view style='height:{{hei}}px;background:gray' class='lessNo'>{{desc}}</view></block><view wx:for="{list}">正文内容</view></view>
</scroll-view>

start(e) {this.setData({refreshBatch:true})//记录手指触摸是的y坐标sy = e.touches[0].clientY   console.log('开始触摸 sy : ' + sy + ' scrolltop : ' + this.data.scrolltop)
},
move(e) {//计算手指滑动的距离var delta = e.touches[0].clientY - syconsole.log('delta : ' + delta)//scorll-view滑动到顶部且继续向上滑动时，走scorll-view滑动流程if(this.data.hei <= 0 && delta <= 0){return}//scorll-view已经滑动到顶部，继续下拉进入下拉状态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 + delta//刷新状态view最小为0if(tempdelta <= 0){tempdelta = 0}this.setData({desc: '下拉刷新'})}//滑动完成设置刷新view高度this.setData({hei: tempdelta})}//每次滑动事件后记录y坐标sy = e.touches[0].clientY
},
end(e) {var that = thisconsole.log('手指离开')//控制刷新文字的显示隐藏this.setData({refreshBatch:false})//手指离开时，如果阈值大于等于50，则触发刷新if(this.data.hei >= 50){this.setData({desc: '正在刷新...'})this.setData({hei: 50})//模拟耗时操作，2秒后恢复正常状态setTimeout(function () {sy = 0that.setData({desc: '下拉刷新',hei: 0,isindrag: false,scrolltop: 0})}, 2000)this.setData({pageNo:1,    //更新单前页refreshBatch:true})//加载内容信息this.loadComment();}else{//未下拉到阈值，松开时则收起刷新viewsy = 0that.setData({desc: '下拉刷新',hei: 0,isindrag: false,scrolltop: 0})}
},
scorll(e) {//未进入下拉状态时，记录scorll-view滑动距离顶部的距离var st = e.detail.scrollTopconsole.log('滚动 st : '+st)if (this.data.isindrag == false){this.setData({scrolltop: st})}
}

原文出处:https://www.it610.com/article/1282381264719986688.htm

小程序自定义下拉刷新相关推荐

ios微信小程序下拉刷新怎么配_[wx]微信小程序自定义下拉刷新
需求: 在小程序内存在列表等形式的页面内增加下拉刷新功能,提高用户体验感,加强界面操作与交互性: 实现方法: 1.小程序提供的下拉刷新(无法自定义刷新动画) 在页面设置内开启下拉(单独页面设置): { ...
安卓小程序自定义下拉刷新_支付宝小程序设计设计指南
本篇<设计指南>从7个维度分析: 导航(架构清晰,指引明确).界面(明辨主次,重点明确).流程(流程明确,避免打扰).引导(操作向导,降低成本).反馈(反馈及时,减少焦虑).容错(用户可控 ...
hooks taro 下拉刷新_小程序自定义下拉刷新（Taro版）
在考虑实现自定义的下拉刷新组件的时候,首先要明确,这个算是一种hack方案.并不是说自定义的有多么好,反而自定义的下拉刷新在android下会有细微的卡顿(我这种实现方式).所以尽量还是用小程序自带的 ...
微信小程序实现下拉刷新
微信小程序实现下拉刷新配置json文件在js文件中写下拉刷新方法注意配置json文件如果需要全局使用下拉刷新就在app.json中设置如果为单页面使用则在页面json设置即可 " ...
微信小程序界面下拉刷新实现方法
微信小程序中,通过下拉刷新页面是基本操作,在当前页面排满的情况下继续下拉加载更多内容.小程序和网页都可以实现这一功能,不同的是小程序界面有能实现下拉刷新功能的API,只需从系统调用即可. 通过查看微信 ...
微信小程序五下拉刷新
微信小程序提供了原声的下拉刷新,三个小点的下拉刷新. 在.json 中写 {"enablePullDownRefresh": true, //开启下拉刷新"backgro ...
微信小程序OnPullDownRefresh下拉刷新不触发问题
小程序中写了onPullDownRefresh方法之后不生效可能有以下几种方面的原因: 没有配置enablePullDownRefresh 需要在对应页面的json文件中设置enablePullDow ...
vant实现下拉刷新和上拉加载_微信小程序 - 实现下拉刷新、上拉加载
在小程序开发中使用下拉刷新和上拉加载非常多,比如常用的展示型首页,而实现这个功能有两种形式,第一种是使用 scroll-view 组件,第二种是不使用 scroll-view 组件而让整个页面刷新,那 ...
taro开发微信小程序禁止下拉刷新(ios下拉出现空白问题)
一.问题描述最近用tarojs在做一个小程序项目时,首页需要禁止下拉刷新,于是在page.json里面添加了这段话 "enablePullDownRefresh":false 全 ...
微信小程序实现下拉刷新功能
第一步.在app.json文件里把enablePullDownRefresh设置为true 第二步.在需要下拉刷新页面的js文件里写onPullDownRefresh:function(){}这个方法 ...

小程序自定义下拉刷新

前言

正文

小程序自定义下拉刷新相关推荐

最新文章

热门文章