android中常用的下拉刷新加载更多_微信小程序/上拉加载/下拉刷新

上拉加载这个其实要后台的配合。后台把数据分好页，然后请求数据的时候发送现在所需要的页码，然后把请求到的数据concat链接到之前获取到的数据数组中。这里做了个判断，如果第一次加载的时候直接赋值；否则concat到数组中。当然在这之前要判断一下有没有得到请求的数据。如果没有则底部没有数据的信息显示出来（贴出关键代码，整体代码会在文末贴出）//上拉加载商品reach: function(that...

weixin_39620535

171人浏览 · 2020-11-23 15:15:05

weixin_39620535 · 2020-11-23 15:15:05 发布

上拉加载

这个其实要后台的配合。后台把数据分好页，然后请求数据的时候发送现在所需要的页码，然后把请求到的数据concat链接到之前获取到的数据数组中。这里做了个判断，如果第一次加载的时候直接赋值；否则concat到数组中。当然在这之前要判断一下有没有得到请求的数据。如果没有则底部没有数据的信息显示出来（贴出关键代码，整体代码会在文末贴出）

//上拉加载商品
  reach: function(that) {
    wx.request({
      url: "http://service.520haikushilan.com/index/Product/query_classify_product",
      data: {
        classify_id: that.data.productId,
        page: that.data.pages //请求的页码
      },
      header: {
        "content-type": "application/json"
      },
      success: function(e) {
        //有数据传数据
        if (e.data.list != null) {
          console.log(e.data.list, that.data.pages)
          //第一次加载把数据直接传给page_sections
          if (that.data.pages == 1) {
            that.setData({
              Page_sections: e.data.list
            })
          } else { //不是第一次加载的时候将两个数组合并
            that.setData({
              Page_sections: that.data.Page_sections.concat(e.data.list)
            })
          }
        } else { //没有数据将底部没有数据信息显示
          that.setData({
            dataHidden: false
          })
        }
      }
    })
  },

我把请求封装成了一个方法，每次需要的时候就去调用他，加了一个判断第一次加载（传的pages是否为1），与不是第一次加载。pages++;然后在上拉触发onReachBottom执行封装的方法，

// 上拉加载
  onReachBottom: function() {
    var that = this;
    that.data.pages++
    that.reach(that);
  },

————————————————————————————————————————

下拉刷新

.首先，在要实现下拉刷新的页面的json配置文件里面加上

"enablePullDownRefresh": true, //开启下拉刷新

"backgroundColor": "#f0145a" //设置背景颜色，如果不设置背景颜色，就看不见下拉刷新的加载动画了，因为加载动画和背景色颜色一样

下拉要执行的代码后就可以直接关掉了，wx.stopPullDownRefresh();这里下拉执行了this.reach()，用户刷新提示写在this.reach()里面，(如果要分页的话需要把分页重置为1）

 //下拉刷新

  onPullDownRefresh: function () {
    this.setData({ //重置分页
      page:1
     })
    this.reach();
    wx.stopPullDownRefresh();
  },

贴出全部代码

wxml

<!-- 商品 -->
<view class="sectionBox">
<navigator url="../storesHome/details/details?shop_id={{item.id}}" class="sectionLists"
 wx:for="{{Page_sections}}">
  <image src="http://service.520haikushilan.com{{item.url}}"/>
  <text>{{item.name}}</text>
  <view class="bottoms">
  <view class="nums">￥{{item.price}}</view>
  <view class="solds">已售{{item.sales_volume}}万件</view>
  <image src="{{item.avatar}}"/>
  </view>
</navigator>
<view class="nulldata" hidden="{{dataHidden}}">已经没有数据了</view>
</view>

wxss

page{
  background:#f5f5f5;
  color:#333;
  font-family: PingFangSC-Regular, sans-serif;
  font-size:32rpx;
  border-top:1rpx #ccc solid;
}
/* 商品 */
.sectionBox{
  display:flex;
  flex-flow:row wrap;
  justify-content:space-between;
  margin-bottom:95rpx;
}
.sectionLists{
  width:330rpx;
  padding:20rpx;
  border-radius:10rpx; /*圆角*/ 
  box-shadow:0.5px 0.5px 7px #eee;/* 阴影 */
  margin-top:20rpx;
  background:#fff;
}
.sectionLists image{
  vertical-align:top;
  width:330rpx;
  height:330rpx;
  border-radius:10rpx; /*圆角*/ 
}
.bottoms{
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.nums{
  font-size:36rpx;
  width:114rpx;
  height:71rpx;
  line-height:71rpx;
  color:#e41d20;
}
.solds{
  font-size:20rpx;
  width:160rpx;
  height:71rpx;
  line-height:71rpx;
  color:#999;
}
.bottoms image{
  width:48rpx;
  height:48rpx;
}
.sectionLists text{
  margin-top:13rpx;
  display:block;
  font-size:24rpx;
  width:330rpx;
  line-height:35rpx;
  height:70rpx;
  text-indent:.5em;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.nulldata{
  color:#999;
  height:40rpx;
  width:200rpx;
  font-size:24rpx;
  margin:10rpx auto;
  text-align:center;
}

Page({
  data: {
    pages: 1,
    dataHidden: true
  },
  //上拉加载商品
  reach: function(that) {
    wx.showNavigationBarLoading() //加载动画
    wx.request({
      url: "http://service.520haikushilan.com/index/Product/query_classify_product",
      data: {
        classify_id: 46,
        page: that.data.pages
      },
      header: {
        "content-type": "application/json"
      },
      success: function(e) {
      wx.hideNavigationBarLoading() //停止加载动画
        console.log(that.data.pages)
        //有数据传数据
        if (e.data.list != null) {
          console.log(e.data.list, that.data.pages)
          //第一次加载把数据直接传给page_sections
          if (that.data.pages == 1) {
            that.setData({
              Page_sections: e.data.list
            })
          } else { //不是第一次加载的时候将两个数组合并
            that.setData({
              Page_sections: that.data.Page_sections.concat(e.data.list)
            })
          }
        } else { //没有数据将底部没有数据信息显示
          that.setData({
            dataHidden: false
          })
        }
      }
    })
  },
  // 上拉加载
  onReachBottom: function() {
    var that = this;
    that.data.pages++
    that.reach(that);
  },
  //下拉刷新
  onPullDownRefresh: function () {
    this.setData({
      pages:1
    })
   this.reach();
    wx.stopPullDownRefresh() //停止下拉刷新
  },
  /*** 生命周期函数--监听页面加载*/
  onLoad: function(options) {
    var that = this;
   //执行加载请求函数
   that.reach(that);
  }
})