小程序的(页面懒加载、下拉刷新、上拉加载更多以及页码结合)

小程序获取接口数据

在js的getlist函数中用wx.request({url:“请求地址”,success:(res){ 微信请求成功的回调函数})来请求接口的公共地址小程序的默认请求是get请求并将getlist调用到生命周期函数–监听页面加载中(onLoad:function(options){})在进行将数据渲染进页面

小程序请求详情也的方法

在页面中可以使用navigator来进行跳转navigator标签中可以写内容也可以进行循环,在生命周期函数–监听页面加载(onLoad:function(options){})中options存放的一般为页面传过来的id或者item值并且根据请求接口的方法在生命周期函数–监听页面加载中写入wx.request({url:"详情页的接口数据"接收过来的数据通过success:(res)=>{}函数来进行渲染进data中的对象中})如果接收过来的对象中有div标签种类的就使用小程序渲染富文本标签中进行接收

小程序的页面懒加载

在请求接口中放入wx.showLoading({title:“懒加载中的内容”})这是进入页面显示进行加载,在引入接口完成后加入wx.hideLoading()这是加载完成后隐藏加载

小程序的下拉刷新

在json文件中加入enablePullDownRefresh将它设置为true就可以将下拉刷新显示出来

小程序上拉加载更多

在js文件中有一个页面上拉触底事件的处理函数(onReachBottom:function(){})

小程序的页码结合

在data中设置个属性例如:page将它设置为1在请求过来的数据中引入设置的属性名例如page并在上拉加载的函数中引入。

小程序上拉加载(显示第一页)和下拉刷新更多(分页)

将以上总结的引入过来。在请求过来的数据中的success:()=>{}这是请求成功的函数,在这里引入data中的数组例如topics将这个数组写成topics:[…this.datatopics,…res.data.data],然后在onPullDownRefresh:function()=>{}中先将页码值引入并将其设置为1因为上拉刷新只显示1页,并且也要将数据写入期中因为要停止下拉刷新并且在其中的请求数据的函数内写入wx.stopPullDownRefresh()例如:this.getList(()=>{wx.stopPullDownRefresh()})然后可以在获取数据的getlist中可以接收个cd
然后在请求成功中对cd进行判断如if(cd){this.setData({topics:res.data.data})}else{this.setData({topics:[…this.datatopics,…res.data.data]})}如果要停止下拉刷新可以在if下写入wx.stopPullDownRefresh()来停止下拉刷新

你可能感兴趣的:(小程序,前端,javascript)