小程序实现下拉加载

首页下拉加载数据

• index.wxml

    //引用封装好的小数点保留2位的方法
  <wxs module="filters" src="../../../filter/filter.wxs"></wxs>
  <view class="order-list">
      <view class="navagator">
         <!-- 标签栏 -->
        <view style="color:#797d82;">
          <van-tabs>
            <van-tab title="全部"></van-tab>
            <van-tab title="待分享"></van-tab>
            <van-tab title="待付款"></van-tab>
            <van-tab title="待发货"></van-tab>
            <van-tab title="待收货"></van-tab>
          </van-tabs>
        </view>
      </view>
    <!-- 商品详情 -->
      <view class="goodsDetail">
        <view class="goodsBox" style="margin-top:30rpx;" wx:for="{{orderListArr}}" wx:key="{{index}}" bindtap="toDetail" data-orderId="{{item.orderId}}">
          <van-card class="padd-15" wx:for="{{item.carts}}" wx:key="{{cartsItem.cartId}}" wx:for-item="cartsItem" num="{{cartsItem.buyNum}}" price="{{filters.toFix(cartsItem.price)}}" title="{{cartsItem.masterName}}" thumb="{{cartsItem.imgUrl}}" style="font-size: 30rpx;background-color: #fff;" />
          <view slot="footer" style="height:80rpx" class="border-line">
            <view style="height:26rpx;font-size:26rpx;padding-right:20rpx">
              共{{item.cartnumber}}件商品
              <text style="padding-left:20rpx"></text>
              实付￥
              <text style="color:#C03131;font-size:30rpx">{{filters.toFix(item.totalPrice)}}</text>
            </view>
          </view>
          <view slot="footer" class="margin-top">
            <text class="flr">{{item.payStatus == "0"?"已取消":"交易成功"}}</text>
            <view class="buttosize">{{item.payStatus == "0"?"重新购买":"评价"}}</view>
          </view>
        </view>
    </view>
  </view>
  

• index.wxss

  .van-card__price {
     color: #C03131 !important;
  }
  .padd-15 {
    padding: 30rpx 30rpx 0 30rpx;
  }
  .border-line {
     background-color: #fff;
     display: flex;
     justify-content: flex-end;
     line-height: 80rpx;
     height: 80rpx;
     border-bottom: 2rpx solid #ece9e9;
     border-top: 2rpx solid #ece9e9;
     z-index: 3
  }
  .van-card[data-v-55a01f0e] {
    border-bottom: 2rpx solid #ECE9E9;
  }
  .van-card:not(:first-child) {
    margin-top: 0
  }
  van-nav-bar .van-icon {
    color: #2e2f30;
    font-size: 44rpx
  }
  .order-list {
    height: 100%;
    background: #fff
  }
  .order-list .van-card {
    background: #fff
  }
  .order-list .navagator {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 9
  }
  .van-card__header {
      background: #fff
  }
  .order-list .goodsDetail {
    margin-top: 45px;
    background: #fff
  }
  img {
    width: 140rpx;
    height: 140rpx
  }
  .van-card__thumb {
    width: 140rpx;
    height: 140rpx
  }
  .van-image__error,
  .van-image__img,
  .van-image__loading {
    width: 140rpx;
    height: 140rpx
  }
  .van-card__content {
    height: 140rpx
  }
  .van-card__header {
    min-height: 140rpx
  }
  .van-card__bottom {
    line-height: 40rpx;
    margin-top: 64rpx
  }
  .van-card {
    background: white
  }
  .flr {
    float: left;
    line-height: 90rpx;
    color: #bdc0c5
  }
  .buttosize {
    font-size: 26rpx;
    width: 172rpx;
    height: 66rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2rpx solid #2e2f30;
    box-sizing: border-box
  }
  .margin-top {
    height: 90rpx;
    align-items: center;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    margin-right: 10rpx;
    padding: 0 20rpx
  }
  

• index.json

  {
    "usingComponents": {
      "w-swiper": "/components/w-swiper/w-swiper",
      "van-sticky": "../../../dist/sticky/index"
    },
    "navigationBarTitleText": "首页"
  }
  

• index.js

  //获取应用实例
  // const filterFn  = require("../../filter/filter.js");
  const app = getApp()
  //Page Object
  Page({
    data: {
      // 首页头部图片
      headSwiper: [],
      // 商品分类数组
      categoryList: [],
      // 商品列表
      productList: [],
      pageNum: 1,
      pullDownArr: [],
      // flag:true
      resing: [],
      dataBack: true
    },
    sendId(event) {
      // console.log(event.currentTarget.dataset.link)
      var productId = event.currentTarget.dataset.link
      wx.navigateTo({
        url: productId
      });
    },
    // 页面展示相当于 created()
    onShow: function () {
      // 获取轮播图数据
      this.getDataList()
      // 获取商品分类数据
      this.categoryData()
      // 商品列表
      this.productListData(this.data.pageNum)
  
      // this.goodList(1)
    },
    // 获取轮播图数据
    getDataList() {
      let url = '/product/getBanners'
      app.$get(url).then(res => {
        // console.log(res,'sss')
        this.setData({
          headSwiper: res.banners
        })
      }).catch(err => {
        console.log(err)
      })
    },
    // 获取商品分类数据
    categoryData() {
      let url = '/category/all'
      app.$get(url).then(res => {
        // console.log(res,'商品分类')
          this.setData({
          categoryList: res.list
        })
      }).catch(err => {
        console.log(err)
      })
    },
    // 获取商品列表数据
    productListData(pageNum) {
      // console.log(2 + 1)
      let url = "/product/list?pageNum=" + pageNum
      app.$get(url).then(res => {
       wx.showLoading({
          title: '拼命加载中',
        })
  
        setTimeout(function () {
          wx.hideLoading()
        }, 2000)
        // 节流  判断这个接口数组的长度  当这个接口数组不为空的时候发送请求数据 ，否则不发送
        if (res.list.length) {
          console.log(res.list, '商品列表')
          //遍历这个接口数组
          let tempArr = res.list.map(item => {
            return {
              ...item,
              //把商品价格保留2位小数
              minPrice: (item.minPrice / 100).toFixed(2)
            }
          })
          // 拼接productList
          let tempt = this.data.productList.concat(tempArr)
          // 保存数据
          this.setData({
            // 然后把这个数组赋值给productList
            productList: tempt,
            resing: res.list,
            dataBack: true
          })
        }
      }).catch(err => {
        console.log(err)
      })
    },
  
    // 事件处理函数的声明(上拉刷新)
    // onPullDownRefresh: function () {
    //   // 重新加载数据
    //   this.setData({ pageNum: 0 })
    //   this.getData()
    // },
    // 监听用户上拉触底事件（下拉加载）
    onReachBottom() {
      if (this.data.dataBack) {
        // 判断数据长度是否为0
        let pages = this.data.pageNum + 1
        console.log(pages)
        this.productListData(pages)
        this.setData({
          pageNum: pages,
          // 当监听数据为假的时候不在发送请求
          dataBack: false
        })
      }
    }
  });