如何做下拉刷新文章php,小程序实例：如何自定义下拉刷新

拼搏现实的明天。 2023-01-15 08:19 152阅读 0赞

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

自定义组件：

js:// components/test/test.js

Component(\{

/\*\*

\* 组件的属性列表

\*/

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"

如何做下拉刷新文章php,小程序实例：如何自定义下拉刷新

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关微信小程序下拉刷新

相关如何做下拉刷新文章php,小程序实例：如何自定义下拉刷新

相关小程序下拉刷新怎么实现？

相关小程序自定义下拉刷新（Taro版）

相关下拉刷新

相关自定义控件：下拉刷新

相关微信小程序页面刷新,下拉刷新

相关微信小程序-自定义下拉刷新

相关 mpvue - 小程序下拉刷新配置

相关微信小程序下拉刷新