微信小程序下拉触底操作

本文主要是介绍微信小程序下拉触底操作，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

app.js
//app.js
App({onLaunch: function () {// 展示本地存储能力var logs = wx.getStorageSync('logs') || []logs.unshift(Date.now())wx.setStorageSync('logs', logs)// 登录wx.login({success: res => {// 发送 res.code 到后台换取 openId, sessionKey, unionId}})// 获取用户信息wx.getSetting({success: res => {if (res.authSetting['scope.userInfo']) {// 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框wx.getUserInfo({success: res => {// 可以将 res 发送给后台解码出 unionIdthis.globalData.userInfo = res.userInfo// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回// 所以此处加入 callback 以防止这种情况if (this.userInfoReadyCallback) {this.userInfoReadyCallback(res)}}})}}})},globalData: {userInfo: null}
})

index.js

// pages/index/index.js
Page({/*** 页面的初始数据*/data: {arr:[],page:1,isHidden:true,//没有更多数据了refresh:false//是否下拉刷新 默认没有},//wx.request请求数据的方法getData:function(){      //页面加载的提示信息wx.showLoading({title: '数据正在加载中...',})let that =this;wx.request({url:"https://route.showapi.com/1700-2",data:{"showapi_appid":"102953","showapi_sign":"74a3c3c9d2c74a818d4b3abfdd80da21","page":this.data.page,//2"keyword":"妈妈"},success:function(res){ //成功的请求到了数据wx.hideLoading()    //判断是否还有数据if (res.data.showapi_res_body.contentlist==""){that.setData({isHidden:false})return}//请求数据的来源  是下拉 还是触底   //如果是触底操作  需要拼接var data = res.data.showapi_res_body.contentlist //33var  newArr = []if(that.data.refresh){//true          //如果是下拉newArr = data}else{//触底操作console.log(that.data.arr,"装数据的容器");//50newArr = that.data.arr.concat(data)console.log(newArr, "拼接数据的容器");}that.setData({arr:newArr})       }})},/*** 生命周期函数--监听页面加载*/onLoad: function (options) { //调用获取数据的方法this.getData()},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {//需要在app.json中  开启一下//  "backgroundColor":"#ccc",//"enablePullDownRefresh": trueconsole.log(1)var page = this.data.page//page++//2this.setData({refresh:true,page:page})this.getData()},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {// console.log("触底了");//50+50var page = this.data.page//1page++//2//50老数据 arrthis.setData({refresh:false,page:page})this.getData() //arr 50},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

index.wxml

<!-- 
https://www.showapi.com
15200088836
15200088836w
1.进入到index页 请求加载的方法 放入到onLoad
监听页面加载
2.下拉刷新的时候   页面+1  page  
3.老数据10条+新数据10条-->
<view class="item"
wx:for="{{arr}}"
wx:key="{{item.id}}"
>
<view class='content'>
<view class="left">{{index+1}}</view>
<view class="center">{{item.title}}</view>
</view>
</view>
<view class="loading"  hidden='{{isHidden}}'>已经没有更多数据了</view>

index.wxss

/* pages/index/index.wxss */.item{padding-left:.7rem;font-size:1rem;
}
.content{height: 4rem;line-height: 4rem;width: 20rem;border:1px solid #e5e5e5;display: flex;
}
.left{padding: 0 1.5rem;height: 4rem;line-height: 4rem;color:red;  
}
.loading{text-align: center;padding: 10rpx;color:red;
}

在这里插入图片描述