小程序的上拉加载功能

最新推荐文章于 2024-10-08 08:38:42 发布

九点钟的orange

最新推荐文章于 2024-10-08 08:38:42 发布

阅读量1.5k

点赞数

文章标签：小程序 javascript 微信小程序

本文链接：https://blog.csdn.net/Hi_x_j/article/details/125256993

版权

本文介绍了微信小程序中实现页面上拉加载的步骤，通过在JS文件创建获取数据的方法，并在JSON配置文件中设定，利用小程序内置的上拉触发事件来实现加载更多数据的功能。

摘要由CSDN通过智能技术生成

小程序页面上拉加载步骤

首先，在需要实现的页面js文件中，创建一个获取请求数据的方法：

getdata(bool){
	let _this = this
	wx.showLoading({
      title: '加载中',
    })
	wx.request({
	      url: url,
	      method: method,
	      data: {
	      	offset: _this.data.offset //当offset+1时请求下一页的数据
	      },
	      header: {},
	      dataType: 'json',
	      success: function (res) {
	      	...//对数据进行处理
			if(bool) {
				//bool为1表示上拉触发事件，需要将新的数据追加进来（这里注意去重）
				//不传bool则表示普通加载数据
				let add_list = [],
	            obj = {}
	            list = _this.data.exceptionList.concat(res.data.rows) 
	            // console.log(list)
	            for(var i=0; i<list.length; i++) {
	              if(!obj[list[i]]) {
	                add_list.push(list[i])
	                obj[list[i]] = 1
	              }
	            }
	            list = add_list
	            _this.setData({ exceptionList: list })