小程序--下拉刷新,上拉加载

 
//index.json 文件
{
  "enablePullDownRefresh": true
}

  

//关键代码 index.js
Page({
  data: {
    list: [],
    page: 1,
    hidden: false, //是否显示上拉加载的图标
    show: false,  //是否显示 文字(已经没有数据了)

  },

 
  getData: function () {
    this.setData({ hidden: true })
    var _this = this;
    var param = {};
    param.min_distance = 1;
    param.max_distance = 100000;
    param.type = this.data.types;
    param.page = this.data.page;
    param.row = this.data.row;
    param.storeId = '';
    api.getGoodsList(param).then(function (res) {
      console.log(res)
      let page = ++_this.data.page;
      if (res.data.length == 0) {
        _this.setData({ show: true, hidden: false })
      } else {
        _this.setData({
          page: page,
          list: _this.data.list.concat(res.data),
          hidden: false,
          show: false
        })
        //下拉刷新停止刷新
        wx.stopPullDownRefresh()
      }
    })
  },
  
  onReachBottom() {
   console.log('上拉')
    this.getData()
  },
  onPullDownRefresh() {
    console.log('下拉刷新')
    this.setData({
      page: 1,
      list: []
    })
    this.getData();
  },

})
    
<--index.wxml文件 -->
<
view class="weui-tab__panel"> <view class="weui-tab__content" wx:for='{{list}}' wx:key='{{index}}'></view> </view> <view class="page__bd"> <view class="weui-loadmore" wx:if="{{hidden}}"> <view class="weui-loading"></view> <view class="weui-loadmore__tips">正在加载</view> </view> <view class="weui-loadmore weui-loadmore_line" wx:if='{{show}}'> <view class="weui-loadmore__tips weui-loadmore__tips_in-line">暂无数据</view> </view> </view>

猜你喜欢

转载自www.cnblogs.com/mengdiezhuangzhou/p/9705381.html