小程序实例:如何自定义下拉刷新(微信小程序自定义下拉刷新)

网友投稿 762 2022-10-04

小程序实例:如何自定义下拉刷新(微信小程序自定义下拉刷新)

小程序实例:如何自定义下拉刷新(微信小程序自定义下拉刷新)

本篇文章给大家带来的内容是关于小程序实例:如何自定义下拉刷新,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

自定义组件:

js:

// components/test/test.jsComponent({/*** 组件的属性列表*/properties: { }, /*** 组件的初始数据*/data: {scrollHeight: 0,startY: 0,tips: '下拉刷新',isRefreshing: false}, /*** 组件的方法列表*/methods: {end: function(e) {if (this.data.isRefreshing) {return}if (this.data.scrollHeight >= 50) {this.setData({scrollHeight: 50,tips: '正在刷新',isRefreshing: true})this.triggerEvent('onRefresh')} else {this.setData({scrollHeight: 0,tips: '下拉刷新'})}},move: function(e) {if (this.data.isRefreshing) {return} var that = this;var moveY = e.touches[0].pageY;var dY = moveY - that.data.startY;console.log(dY);if (dY >= 50 && dY <= 80) {this.setData({tips: '松开加载',scrollHeight: dY})} else if (dY > 80) {this.setData({tips: '松开加载',scrollHeight: 80})} else {this.setData({tips: '下拉刷新',scrollHeight: dY})} }, start: function(e) {this.data.startY = e.touches[0].pageY;}, stopRefresh: function() {this.setData({isRefreshing: false,scrollHeight: -50})},}})-

wxml:

{{tips}}-

wxss:其中引用了weui 这个用不用都无所谓的很简单的

@import '/pages/common/weui.wxss';page{height: 100%;} .loading-container{height: 100%;}-

pages里wxml:

-

js://刷新方法回调

onRefresh: function() {var that = this;setTimeout(function(){that.selectComponent("#loadmore").stopRefresh();},3000)},json:{"enablePullDownRefresh": false,"usingComponents":{"loadmore":"../../components/test/test"}}-

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:git 本地文件修改错误,重新取回服务器历史版本
下一篇:centos 7.0 连接wifi常用命令
相关文章

 发表评论

暂时没有评论,来抢沙发吧~