范围:深圳亚博app开发,软件定制开发,亚博app软件开发公司,深圳软件外包公司.TEL:3447249690
当前位置:首页 > app小程序

亚博-微信小程序界面下拉刷新实现方法

09-18 亚博APP
摘要:微信小法式中,经由过程下拉刷新页面是根基操作,在当前页面排满的环境下继续下拉加载更多内容。

微信小法式中,经由过程下拉刷新页面是根基操作,在当前页面排满的环境下继续下拉加载更多内容。小法式和网页都可以实现这一功能,分歧的是小法式界面有能实现下拉刷新功能的API,只需从系统挪用便可。

经由过程查看微信开辟文档可知,enablePullDownRefresh 这个属性设置为true。就默许开启了下拉刷新。enablePullDownRefresh可以写在app.json 中 和页面的xxx.json,二者的区分是,app.json 是全局型的下拉刷新,而***.json 是单个页面的下拉刷新,只能设置window相干的设置装备摆设项,以决议本页面的窗口表示,所以无需写window这个键。另外一种方式是,监听scroll-view,自界说下拉刷新,scroll-view里面有一个bindscrolltoupper属性,当转动到顶部/左侧,会触发 scrolltoupper 事务,所以我们可以操纵这个属性,来实现下拉刷新功能。

微信小程序下拉刷新实现方法

两种方式都可以,第一种比力简单,易上手,究竟一些逻辑系统已给你处置好了,第亚博二种合适那种想要自界说下拉刷新样式的小法式,我们讲授电商,就用第一种,系统供给的就好,首要是教会大师怎样用。

1. home.json 参数设置装备摆设

enablePullDownRefresh: true

我们哪一个页面需要下拉刷新,就在哪一个页面临应的xxx.json文件设置装备摆设上面属性,这个属性从字面意思也能够知道,是不是答应下拉刷新,固然,若何你不想一个个设置装备摆设答应下拉刷新,你可以直接在全局变量app.json的window里面设置装备摆设上面这个属性,如许全部项目都答应下拉刷新了,这个必然要加的,由于系统默许是不具有下拉刷新功能的

home.js

//下拉刷新

onPullDownRefresh:function()

{

wx.showNavigationBarLoading() //在题目栏中显示加载

//摹拟加载

setTimeout(function()

{

// complete

wx.hideNavigationBarLoading() //完成住手加载

wx.stopPullDownRefresh() //住手下拉刷新

},1500);

},

onPullDownRefresh下拉刷新事务监听,具体看一下里面的代码,wx.showNavigationBarLoading() 与wx.hideNavigationBarLoading() 这两句话是用来节制小菊花的显示和埋没,因为我们此刻还没有讲授收集要求,所以我就摹拟了一下收集加载,经由过程setTimeout方式,写一个时候延迟的方式,这个方式可以摹拟收集加载所耗损的时候,还就是当收集加载完成我们要住手下拉刷新wx.stopPullDownRefresh() 。

加载更多

实现加载更多也同理有两种体例

1. 挪用系统的API

2. 监听scroll-view,bindscrolltolower滑动到底部的监听

处置体例和下拉刷新略有分歧,不外也年夜同小异。

home.js

onReachBottom: function () {

console.log(\'加载更多\')

setTimeout(() => {

this.setData({

isHideLoadMore:true,

recommends: [

{

goodId: 7,

name:\'.....\',

url: \'....\',

imageurl:\'......\',

},

{

goodId: 10,

name:\'......\',

url:\'......\',

},

],

})

}, 1000)

}

onReachBottom系统供给的触底事务的监听,和下拉刷新一样,我们也是摹拟一些数据,加了一个时候延迟的事务,isHideLoadMore,一个自界说的值,用来节制显示和埋没加载控件

home.wxml

正在加载

小法式中可以实现下拉刷新的方式还其他,可以模拟H5网页的做法,但微信小法式由于API接口的利用,在实现下拉刷新功能的时辰便可以减轻开辟人员承担。

保举浏览:甚么是小法式图片犯错处置机制

版权保护: 本文由 亚博app开发 原创
转载请保留链接: http://www.cqsLin.com

关于我们      深圳亚博定制开发软件有限公司,自2013年成立以来,为上千家企业提供软件外包、系统软件开发、亚博app开发、微信公众号开发、深圳亚博小程序开发等各种优秀的软件定制开发服务.关键词:软件外包公司、手机软件开发、app制作开发、手机亚博app开发、小程序开发公司【TEL】:3447249690 微信:3447249690 QQ:3447249690
  • 1578文章总数
  • 13访问次数
  • 建站天数