微信小程序加载更多 下拉列表加载更多功能实现-手机电子游戏网址

小程序开发

2021-05-12

  我们平时在小程序上面浏览内容的时候,如果当前页的内容过多,经常会发现需要下拉列表触发加载更多内容的功能,那么这种功能是怎么实现的呢?今天厦门在乎科技为大家带来微信小程序下拉列表加载更多功能实现,一起来了解一下吧。

微信小程序加载更多 下拉列表加载更多功能实现


  微信小程序加载更多整体思路:

  1、通过scroll-view组件提供的bindscroll方法监控滚动的时候是否距离底部在40px内,如果小于40px则触发加载更多方法(见完整代码index.js里的bindscroll方法)

  2、通过使用发现很多时候服务返回数据太快了,没有加载等待的过程,显的不自然,所以在loadmore方法里通过settimeout来保证至少有333毫秒的加载时间(见完整代码index.js里的loadmore方法)

  3、实际使用中又发现一个问题,上滑到底部会重复触发加载更多方法导致重复的网络请求。通过记录上次加载时间lastrequesttime,保证两次网络请求的间隔大于1秒(见完整代码index.js里的fetchlist方法),这样就能避免重复调用加载更多的问题

  备注:demo代码里的网络请求wx.requesttest方法是为了显示效果,所以写了个模拟的请求方法,实际使用可替换为wx.request对接自己项目的服务

微信小程序加载更多 下拉列表加载更多功能实现


  下拉列表加载更多功能实现:

  1.需要用到的组件和api

  scroll-view(可滚动视图区域)

  wx.showtoast(object)显示消息提示窗----显示loading小菊花用的

  2.需要用到的属性

微信小程序加载更多 下拉列表加载更多功能实现


  3.scrol-view需要指定一个高度,这个高度可以按自己的需求计算,我使用的是屏幕可用高度并且默认一页显示6个

微信小程序加载更多 下拉列表加载更多功能实现


  4.滚动到底部绑定需要触发的事件

       

  5.操作事件函数,主要是将请求下来的数据用concat方法进行合并,然后赋值,我是用的for循环假装添加的数据,实际项目中可以换成自己的ajax,并且为了模拟加载我添加了一个1.5秒的定时器,先调用提示框api成功之后关闭

微信小程序加载更多 下拉列表加载更多功能实现


  以上就是今天为大家带来的关于“微信小程序加载更多 下拉列表加载更多功能实现”全部内容,通过下拉列表加载更多内容,极大的提高了用户的阅读体验,如果用户对内容不感兴趣,也就不需要再继续点击,直接选择关闭,想要了解更多关于小程序开发的内容,欢迎关注厦门在乎科技-专注小程序、app、网站开发

即刻联系「在乎科技」专业项目经理为您提供产品咨询和项目报价!

contact us

联系手机电子游戏网址

联系电话:

131-6399-9993

电子邮箱:

公司地址:

厦门市思明区湖滨南路388号国贸大厦34d单元

公司地址