微信小程序下拉触底操作

ゝ一纸荒年。 2023-10-11 12:44 23阅读 0赞

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 发送给后台解码出 unionId
                  this.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 //33
        var  newArr = []
              if(that.data.refresh){//true          //如果是下拉
                newArr = data
              }else{
                //触底操作
                console.log(that.data.arr,"装数据的容器");//50
                newArr = 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": true
          console.log(1)
          var page = this.data.page//
          page++//2
          this.setData({
            refresh:true,
            page:page
          })
          this.getData()
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
          // console.log("触底了");
          //50+50
          var page = this.data.page//1
          page++//2
          //50老数据 arr
          this.setData({
            refresh:false,
            page:page
          })
          this.getData() //arr 50
      },
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
      }
    })

index.wxml

<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;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190923174023907.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0,size_16,color_FFFFFF,t_70