收藏
回答

Component构造器 怎样使用onReachBottom

问题模块 框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
API和组件 小程序 需求 onReachBottom 工具 6.5.3 2.7.7


    

 Component构造器  怎样使用 onReachBottom 方法 ~

或者构造器 怎样实现 底部上拉加载数据的 操作呢 

最后一次编辑于  07-26  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏投诉关注问题回答

2 个回答

  • 卢霄霄
    卢霄霄
    07-26

    页面里onReachBotton之后,调用组件的方法。。

    调用组件的方法有很多种

    1、page里selectComponent可以拿到组件实例,然后可以直接调用组件方法

    2、可以在组件的 properties的属性里加 observer方法,然后执行组件里的方法

    3、组件里可以getCurrentPage,将方法或者监听加入page的属性里,然后page调用

    07-26
    赞同 1
    回复 7
    • sameal°
      sameal°
      07-26
      ok 大佬我测试一波~ 感谢啦 ~
      07-26
      回复
    • 卢霄霄
      卢霄霄
      07-26回复sameal°
      好的 有问题再来
      07-26
      回复
    • sameal°
      sameal°
      07-27回复卢霄霄
      const app = getApp();
      Component({
        options: {
          addGlobalClass: true,
        },
        data: {
        
          iconList: [{
              icon: 'cartfill',
              color: 'orange',
              badge: 0,
              name: '已下单'
            },
            {
              icon: 'sponsorfill',
              color: 'brown',
              badge: 0,
              name: '已付款'
            },
            {
              icon: 'deliver_fill',
              color: 'yellow',
              badge: 0,
              name: '已发货'
            }, {
              icon: 'goodsfill',
              color: 'olive',
              badge: 0,
              name: '已完成'
            }
          ],
          isBg: 0, //点击切换背景颜色
          userInfo:'',
          orderList: [], //请求的订单列表
          page: 1, //分页的页码
          isLoad: false, //加载的完成标志
          orderStatus: 10, //默认 已下单的数据 20 已付款  30 已发货 40 已完成
          isVip:0         //是否会员
        },
        
        attached() {
          let userInfo = wx.getStorageSync('userInfo');
          let that = this;
          that.setData({
            userInfo:userInfo,
            loadModal: true
          })
           
        },
        
        methods: {
         
          //实现加载分页的效果
          onReachBottom: function () {
            var that = this;
            that.setData({ //开始加载显示
              isLoad: true
            })
        
            that.setData({ //页码+1
              page: that.data.page + 1
            })
        
            wx.request({
              url: app.globalData.url + '/admin/api/v1/xcxx/order/list.php',
              header: {
                'content-type': 'application/x-www-form-urlencoded' // 默认值
              },
              data: {
                token: wx.getStorageSync('token'),
                userId: wx.getStorageSync('userInfo').user_id,
                orderStatus: that.data.orderStatus,
                limit: 5,
                page: that.data.page
        
              },
              method: "POST",
              success: function (res) {
                if (Object.keys(res.data.data).length > 0) { //加载的数据 不为空
                  that.setData({
                    orderList: that.data.orderList.concat(res.data.data.data)
                  })
                } else {
                  wx.showToast({
                    icon: 'none',
                    title: '到底啦~'
                  })
                  that.setData({
                    isLoad: false
                  })
                }
              }
            })
          }
        
      })
       
       
       
       
       
      //  大佬麻烦动一下代码 试了几个  没实现 哈哈哈哈 ~~


      07-27
      回复
    • 卢霄霄
      卢霄霄
      07-29回复sameal°
      周末没在。。我给你写个片段吧
      07-29
      回复
    • 卢霄霄
      卢霄霄
      07-29回复sameal°
      https://developers.weixin.qq.com/s/L6wGhdmp7Rag
      07-29
      回复
    查看更多(2)
  • 今天天气很好
    今天天气很好
    07-26

    直接用即可,引入的时候会对应那个页面的onReachBottom 方法

    07-26
    赞同
    回复 4
    • sameal°
      sameal°
      07-26
      Component methods里面写没效果
      07-26
      回复
    • 今天天气很好
      今天天气很好
      07-26
      它调用的是你引入的那个页面的onReachBottom呢..不是在Component里面写onReachBottom方法哦
      07-26
      回复
    • sameal°
      sameal°
      07-27回复今天天气很好
      const app = getApp();
      Component({
        options: {
          addGlobalClass: true,
        },
        data: {
        
          iconList: [{
              icon: 'cartfill',
              color: 'orange',
              badge: 0,
              name: '已下单'
            },
            {
              icon: 'sponsorfill',
              color: 'brown',
              badge: 0,
              name: '已付款'
            },
            {
              icon: 'deliver_fill',
              color: 'yellow',
              badge: 0,
              name: '已发货'
            }, {
              icon: 'goodsfill',
              color: 'olive',
              badge: 0,
              name: '已完成'
            }
          ],
          isBg: 0, //点击切换背景颜色
          userInfo:'',
          orderList: [], //请求的订单列表
          page: 1, //分页的页码
          isLoad: false, //加载的完成标志
          orderStatus: 10, //默认 已下单的数据 20 已付款  30 已发货 40 已完成
          isVip:0         //是否会员
        },
        
        attached() {
          let userInfo = wx.getStorageSync('userInfo');
          let that = this;
          that.setData({
            userInfo:userInfo,
            loadModal: true
          })
           
        },
        
        methods: {
         
          //实现加载分页的效果
          onReachBottom: function () {
            var that = this;
            that.setData({ //开始加载显示
              isLoad: true
            })
        
            that.setData({ //页码+1
              page: that.data.page + 1
            })
        
            wx.request({
              url: app.globalData.url + '/admin/api/v1/xcxx/order/list.php',
              header: {
                'content-type': 'application/x-www-form-urlencoded' // 默认值
              },
              data: {
                token: wx.getStorageSync('token'),
                userId: wx.getStorageSync('userInfo').user_id,
                orderStatus: that.data.orderStatus,
                limit: 5,
                page: that.data.page
        
              },
              method: "POST",
              success: function (res) {
                if (Object.keys(res.data.data).length > 0) { //加载的数据 不为空
                  that.setData({
                    orderList: that.data.orderList.concat(res.data.data.data)
                  })
                } else {
                  wx.showToast({
                    icon: 'none',
                    title: '到底啦~'
                  })
                  that.setData({
                    isLoad: false
                  })
                }
              }
            })
          }
        
      })
       
       
       
       
       
      //  大佬麻烦动一下代码 试了几个  没实现 哈哈哈哈 ~~


      07-27
      回复
    • 今天天气很好
      今天天气很好
      07-29回复sameal°
      不对,不是这样写.哪个页面用的你写哪里
      07-29
      回复