封装一个上拉加载，下拉刷新与筛选用同一个请求方法(微信小程序为例)

最新推荐文章于 2023-03-07 14:42:07 发布

面壁思过程

最新推荐文章于 2023-03-07 14:42:07 发布

阅读量1.2k

点赞数

分类专栏：微信小程序文章标签：微信小程序上拉加载更多筛选

本文链接：https://blog.csdn.net/Candy_mi/article/details/82142847

版权

js 同时被 2 个专栏收录

52 篇文章 1 订阅

订阅专栏

微信小程序

41 篇文章 1 订阅

订阅专栏

代码如下：

<view class='pagewrap'>

  <!-- 搜索框 -->
  <view class='margin'>
    <view class='seach-box'>
      <view class='input-box'>
        <view class='left'>
          <image class='search-ico' src='../../../img/search.png' bindtap="sendSeek"></image>
          <input class='input' placeholder='请输入商品标题或者ID' placeholder-class='palcestyle' value='{{sendMsg}}' bindinput="bindBlur" bindconfirm="sendSeek"></input>
          <image class='del-ico' src='../../../img/del1.png' wx:if="{{showdel}}" bindtap="delCont"></image>
        </view>
        <span class='search-btn' bindtap="sendSeek">搜索
        </span>
      </view>
      <view class='publish' bindtap='gorpublish'>发布商品</view>
    </view>
  </view>
  <!-- 商品区 -->
  <view class='goods-wrap'>
    <!-- 没有商品时显示 -->
    <view class='nodata' wx:if="{{nodata}}" style="height:{{winHeight-165}}rpx;width:100%;text-align:center;color:#b9b9b9;font-size:30rpx;">
      <image class='nodata-ico' src='../../../img/nodata.png'></image>
      <p>暂无商品</p>
      <p>点击右上角去发布商品吧~</p>
    </view>
    <!-- 商品 -->
    <view class='goods-list' wx:for="{{goodsList}}" wx:key="key">
      <view class='img-box'>
        <image src='{{item.goodsSmallimg}}'></image>
      </view>
      <view class='goods-info'>
        <view class='name ellipsis'>{{item.goodsName}}</view>
        <view class='bottom-info'>

          <view class='left'>
            <view class='sale'>
              <!-- 平台 {{platform}}  1淘宝 2拼多多 5京东-->
              <block wx:if="{{item.platform==1}}">
                <image class='platform-ico' src='../../../img/tb.png'></image>
              </block>
              <block wx:if="{{item.platform==2}}">
                <image class='platform-ico' src='../../../img/ico_5.png'></image>
              </block>
              <block wx:if="{{item.platform==5}}">
                <image class='platform-ico' src='../../../img/ico_6.png'></image>
              </block>
              <!-- 平台 -->
              <span class='coupons'>
                <span class='small'>券</span>
                <span class='amount'>￥{{item.couponMoney}}</span>
              </span>
              <text>销量:{{item.sales}}</text>
              <!-- <text>销量:100000</text> -->
            </view>
            <view class='price'>
              <view class='before-price'>原价:￥{{item.goodsPrice}}</view>
              <view class='now-price'>￥{{item.endPrice}}</view>
            </view>
            <view class='time' style='color:#5f5d5e;font-size:25rpx'>
              发布时间: {{item.publishTime}}
            </view>


          </view>

          <view class='right'>
            <!-- 上架，下架 -->
            <block wx:if="{{item.status==1}}">
              <image class='shelves-ico' src='../../../img/shelves.png'></image>
            </block>
            <block wx:if="{{item.status==2}}">
              <image class='shelves-ico' src='../../../img/noshelves.png'></image>
            </block>
            <text>佣金:{{item.tkCommission}}</text>
          </view>

        </view>
      </view>

    </view>

      <!-- 没数据 -->
      <view class="bottom" wx:if="{{nomore}}">----我是有底线的----</view>
      <!-- 有更多加载图标 -->
      <block wx:else>
        <view class="loading">
          <view class='isupdraw' wx:if="{{isupdraw}}">
            <image src="../../../img/loading1.gif"></image>
          </view>
        </view>
      </block>


  </view>
</view>

js代码：

.pagewrap {
}

.margin{
  height: 165rpx;
  width: 100%;
  background: #f5f5f5;
  position: fixed;
  top: 0;
  z-index: 11111;
}
.seach-box {
  height: 150rpx;
  width: 100%;
  background: #fff;
  position: fixed;
  top: 15rpx;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  border-bottom: 1px solid #e9e9e9;
  z-index: 11111;
}

.input-box {
  width: 520rpx;
  height: 68rpx;
  background: #f7f7f7;
  border-radius: 68rpx;
  overflow: hidden;
  display: flex;
  flex-wrap: nowrap;
  line-height: 68rpx;
  padding-left: 30rpx;
  margin-left: 35rpx;
  margin-right: 25rpx;
  position: relative;
}

.left {
  width: 370rpx;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  position: relative;
}

.search-ico {
  width: 30rpx;
  height: 30rpx;
}



.input {
  width: 255rpx;
  height: 100%;
  padding-left: 20rpx;
}

.del-ico {
  width: 30rpx;
  height: 30rpx;
  margin-right: 15rpx;

}


.search-btn {
  width: 145rpx;
  height: 100%;
  background: linear-gradient(to right, #fd521c, #ed0805);
  color: #fff;
  text-align: center;
}

.publish {
  width: 150rpx;
  height: 68rpx;
  background: linear-gradient(to right, #fd521c, #ed0805);
  color: #fff;
  text-align: center;
  border-radius: 68rpx;
  line-height: 68rpx;
}

/* 商品区 */
.goods-wrap {
  margin-top: 165rpx;
}

/* 无数据时 */
.nodata{
  position: absolute;
}
.nodata-ico{
  width: 283rpx;
  height: 316rpx;
  display: block;
  margin: 0 auto;
  margin-top: 250rpx;
}
/* 商品列表 */
.goods-list {
  height: 280rpx;
  width: 100%;
  background: #fff;
  border-bottom: 1px solid #e9e9e9;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  padding-left: 30rpx;
}

.img-box {
  width: 220rpx;
  height: 220rpx;
  background: lightblue;
  border-radius: 10rpx;
}

.img-box image {
  width: 100%;
  height: 100%;
}

.goods-info {
  width: 445rpx;
  height: 220rpx;
  display: flex;
  flex-wrap: wrap;
  margin-left: 20rpx;
}

.goods-info .name {
  margin-bottom: 15rpx;
  font-size: 28rpx;
  color: black;
}

.bottom-info {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
}

.bottom-info .left {
  width: 300rpx;
  height: 150rpx;
  display: flex;
  flex-wrap: wrap;
  color: #989898;
}

.sale, .before-price, now-price {
  width: 100%;
}

.bottom-info .left .sale {
  display: flex;
  flex-wrap: no-wrap;
  margin-bottom: 30rpx;
}
.platform-ico {
  width: 35rpx;
  height: 35rpx;
  display: block;
  /* background: red; */
  border-radius: 8rpx;
  margin-right: 20rpx;
}

.coupons {
  width: 90rpx;
  height: 35rpx;
  line-height: 35rpx;
  /* background: #f53318; */
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFcAAAAiCAYAAAAqJ0UeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1MjlDRjYzM0E4MDUxMUU4OUQ2Q0YxRjc5MjhDNTVBMCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1MjlDRjYzNEE4MDUxMUU4OUQ2Q0YxRjc5MjhDNTVBMCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjUyOUNGNjMxQTgwNTExRTg5RDZDRjFGNzkyOEM1NUEwIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjUyOUNGNjMyQTgwNTExRTg5RDZDRjFGNzkyOEM1NUEwIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+opqISwAAAexJREFUeNrsmL9LQlEUx8+zImoRkXARaarBf8CpvSEJh2gJ3YvG/gihJRBaBMfaIpf6D9xqaRNqcBJCJFFs8HVOHeu9p099z3eH4PuB7/Nx/cmH67n3Hqt3tkVkU4yITjkXfJ+mMbbj0SZyjdvTnrd8xj3vsX0+ZzRv3Jr/OUG+0/d3Wv6/n2Y+tvha5lT4fhTT4StNmsAypB0uaZVzoLMWRIf4fJSZW4ILI5REbg4ejJATuQl4MEIiBgfmgNx/LfdzQCvZPVovlsn+eIdcEA0Wn9D6fJrYmDiV4YQW5oTmdDSQmVvgXHJ6KAuR0FOfBTmhPWiuOXecLP7QoXnhHHKa3porAyecNhyFoq3+mn4L2hOnCk+hqKq/mbuFOqcLV4HoqreJ3YJ3N7CptWMbu4WFdwtvulb1fx2NZOZ6xf28YIjdQiCGLrE6z2JyIcs1vKYBizPpzHbW3D/Ju5w4fAUirt5c5WPagrbPScJXIJLqbWZvIcMpwlUoijxjM9N3C/TdX7jh+zx6C6F7C/d8PeYMxjU3xTniPHPy6C0sRV49is+U9BZeddaCaNjh3MrsRT/XIJBrEDTLo13QnI5QFkyXhQ40GKEjchvwYISGyK3BgxFqIleavBW4iBTxWR8vaOeaFrwsRcvhkr4EGAAYYH5RH4j+fAAAAABJRU5ErkJggg==') no-repeat;
  background-size: 90rpx 35rpx;
  margin-right: 20rpx;
  color: #fff;
  font-size: 19rpx;
  display: flex;
  flex-wrap: nowrap;
}
.coupons .small{
  width: 27rpx;
  display: block;
  font-size: 15rpx;
  text-align: center;
  line-height: 35rpx;
}
.amount{
  flex: 1;
  display: block;
  padding-left: 5rpx;
  line-height: 35rpx;
}

.price{
  display: flex;
  flex-wrap: nowrap;
}

.bottom-info .left .before-price {
  text-decoration: line-through;
  font-size: 23rpx;
  margin-right: 20rpx;
}

.bottom-info .left .now-price {
  color: #ED2D3C;
  font-family: 'PingFang-SC-Medium';
  font-size: 26rpx;
}



.bottom-info .right {
  width: 150rpx;
  height: 150rpx;
  text-align: center;
   color: #ed2d3a;
}

.shelves-ico {
  width: 112rpx;
  height: 88rpx;
  display: block;
  margin: 0 auto;
  margin-top: 20rpx;
  margin-bottom: 10rpx;
}


.palcestyle{
  font-size: 30rpx;
}

const app = getApp()
const util = require("../../../utils/util.js");

Page({

  /**
   * 页面的初始数据
   */
  data: {
    showdel: false,  //是否显示清除按钮
    nodata: false,  //后台返回数据是否为空完全没数据
    sendMsg: '', //搜索文本
    nomore: '', //上拉时是否有更多数据
    isupdraw: false, //是否上拉
    // state: 'up', //商品状态，是否上架
    goodsList: '', //商品列表
    max_count: 20,
    page: 1, //页码
    stop: false,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    var that = this;
    //  高度自适应（rpx）
    wx.getSystemInfo({
      success: function(res) {
        var clientHeight = res.windowHeight;
        var clientWidth = res.windowWidth;
        var rpxR = 750 / clientWidth; //比例
        var calc = clientHeight * rpxR;
        console.log(calc)
        that.setData({
          winHeight: calc
        });
      }
    });


    that.getgoods(that.data.page, that.data.max_count, 1);
  },

  //键盘输入时   有内容时显示清空按钮
  bindBlur: function(e) {
    var that = this;
    var sendMsg = e.detail.value
    if (sendMsg == 0) {
      that.setData({
        showdel: false,
      })
    } else {
      that.setData({
        showdel: true,
        sendMsg: sendMsg,   
      })
    }
  },

  //删除搜索内容
  delCont: function() {
    this.setData({
      sendMsg: '',
      showdel: false
    })
  },

  //点击搜索时每次让页面重置回1
  sendSeek: function(e) {
    var that = this;
    var sendMsg = that.data.sendMsg;
    console.log(that.data.sendMsg);
    that.setData({
      page: 1,
      goodsList: '',
      nodata: false,
      nomore: '',
      stop: false,
    })
    that.getgoods(that.data.page, that.data.max_count, 1);
  },


  //跳转到发布 
  gorpublish: function() {
    wx.navigateTo({
      url: 'released/released',
    })
  },

  // 商品列表
  getgoods: function(page, max_count, load) {
    var that = this;
    console.log(page);
    var pams = {
      token: wx.getStorageSync('token'),
      page: page,
      goodsName: that.data.sendMsg,
    }

    util.request(util.mainUrl + 'haha/haha/haha', pams, 'GET', load, function(res) {
      var contentlistTem = that.data.goodsList; //上一次请求的内容
      console.log(res.data);
      if (res.data.result == "OK") {
        wx.hideNavigationBarLoading()   //完成停止加载
        var goodsList = res.data.list;
        var goods_len = goodsList.length;

        for (var i = 0; i < goods_len; i++) {
          goodsList[i]["publishTime"] = util.formatDate2(goodsList[i]["publishTime"]); //转换时间戳
          goodsList[i]["sales"]=util.transform(goodsList[i]["sales"]); //转化成万元
        }

        if (page == 1) {
          contentlistTem = [];
          if (goods_len == 0) {
            that.setData({
              nodata: true,
              goodsList:'',
              isupdraw:false,
            });
            return;
          }
        }
        if (goods_len < max_count) {
          that.setData({
            goodsList: contentlistTem.concat(goodsList),
            nomore: true,
            isupdraw: true,
            stop: true,
            // page: page + 1
          })
        } else {
          that.setData({
            goodsList: contentlistTem.concat(goodsList),
            isupdraw: true,
            // page: page + 1
          })
        }

      } else {
        wx.showToast({
          title: res.data.result,
          mask: "true",
          icon: 'none',
          duration: 3000
        })
        return;
      }

    })
  },
  /**
  * 页面相关事件处理函数--监听用户下拉动作
  */
  onPullDownRefresh: function () {
    wx.showNavigationBarLoading()  //在标题栏中显示加载
    var that = this;
    that.getgoods(1, that.data.max_count, 0); //商品
  },

  /**`
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    var that = this;
    if (that.data.stop==true){
     return
    }else{
      that.setData({
        isupdraw: true,
        page: that.data.page + 1,
      })
      that.getgoods(that.data.page, that.data.max_count, 0);
    }

   
  },





  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {
    
    var that = this;
    that.getgoods(1, that.data.max_count, 0);
  },

  
})