微信小程序里的触底加载实现流程

最新推荐文章于 2024-07-07 16:36:23 发布

weixin_45261845

最新推荐文章于 2024-07-07 16:36:23 发布

阅读量361

点赞数

分类专栏：前端文章标签：小程序

本文链接：https://blog.csdn.net/weixin_45261845/article/details/116165281

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

触底加载

index.wxml

 <view class="wrap" wx:for="{{singerList}}" wx:key="index">
    <view wx:key="{{item.id}}" class="list">
        <view class="name">{{item.name}}</view>
        <image class="img" src="{{item.pic70}}" alt=""></image>
    </view>
  </view>

index.js

// 获取应用实例
const app = getApp()
Page({
data:{
  singerList:[],
  page:1
},
// 请求数据
getData(page){
  wx.request({
    url: 'http://www.kuwo.cn/api/www/artist/artistInfo?category=11&rn=10&httpsStatus&pn='+this.data.page+'&=1&reqId=4c428f30-a65a-11eb-9202-3bf9c9f0d08d',
    header:{
      "csrf": "RJQ1YJ7APA",
      "Cookie":"kw_token=RJQ1YJ7APA"
    },
    success:res=>{ 
         this.setData({
          singerList:[...this.data.singerList,...res.data.data.artistList],
        })
    }
  })
},
// 监听页面加载
onLoad:function(options){
this.getData()
},
onReachBottom:function(){
  // 页数触底加1
this.setData({
  page:this.data.page+1
})
  this.getData()
}
})