首頁下拉加載數(shù)據(jù)

• index.wxml

    //引用封裝好的小數(shù)點(diǎn)保留2位的方法
  <wxs module="filters" src="../../../filter/filter.wxs"></wxs>
  <view class="order-list">
      <view class="navagator">
         <!-- 標(biāo)簽欄 -->
        <view style="color:#797d82;">
          <van-tabs>
            <van-tab title="全部"></van-tab>
            <van-tab title="待分享"></van-tab>
            <van-tab title="待付款"></van-tab>
            <van-tab title="待發(fā)貨"></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>
              實(shí)付￥
              <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"?"重新購買":"評(píng)價(jià)"}}</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

  //獲取應(yīng)用實(shí)例
  // const filterFn  = require("../../filter/filter.js");
  const app = getApp()
  //Page Object
  Page({
    data: {
      // 首頁頭部圖片
      headSwiper: [],
      // 商品分類數(shù)組
      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
      });
    },
    // 頁面展示相當(dāng)于 created()
    onShow: function () {
      // 獲取輪播圖數(shù)據(jù)
      this.getDataList()
      // 獲取商品分類數(shù)據(jù)
      this.categoryData()
      // 商品列表
      this.productListData(this.data.pageNum)
  
      // this.goodList(1)
    },
    // 獲取輪播圖數(shù)據(jù)
    getDataList() {
      let url = '/product/getBanners'
      app.$get(url).then(res => {
        // console.log(res,'sss')
        this.setData({
          headSwiper: res.banners
        })
      }).catch(err => {
        console.log(err)
      })
    },
    // 獲取商品分類數(shù)據(jù)
    categoryData() {
      let url = '/category/all'
      app.$get(url).then(res => {
        // console.log(res,'商品分類')
          this.setData({
          categoryList: res.list
        })
      }).catch(err => {
        console.log(err)
      })
    },
    // 獲取商品列表數(shù)據(jù)
    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)
        // 節(jié)流  判斷這個(gè)接口數(shù)組的長度  當(dāng)這個(gè)接口數(shù)組不為空的時(shí)候發(fā)送請(qǐng)求數(shù)據(jù) 问词，否則不發(fā)送
        if (res.list.length) {
          console.log(res.list, '商品列表')
          //遍歷這個(gè)接口數(shù)組
          let tempArr = res.list.map(item => {
            return {
              ...item,
              //把商品價(jià)格保留2位小數(shù)
              minPrice: (item.minPrice / 100).toFixed(2)
            }
          })
          // 拼接productList
          let tempt = this.data.productList.concat(tempArr)
          // 保存數(shù)據(jù)
          this.setData({
            // 然后把這個(gè)數(shù)組賦值給productList
            productList: tempt,
            resing: res.list,
            dataBack: true
          })
        }
      }).catch(err => {
        console.log(err)
      })
    },
  
    // 事件處理函數(shù)的聲明(上拉刷新)
    // onPullDownRefresh: function () {
    //   // 重新加載數(shù)據(jù)
    //   this.setData({ pageNum: 0 })
    //   this.getData()
    // },
    // 監(jiān)聽用戶上拉觸底事件（下拉加載）
    onReachBottom() {
      if (this.data.dataBack) {
        // 判斷數(shù)據(jù)長度是否為0
        let pages = this.data.pageNum + 1
        console.log(pages)
        this.productListData(pages)
        this.setData({
          pageNum: pages,
          // 當(dāng)監(jiān)聽數(shù)據(jù)為假的時(shí)候不在發(fā)送請(qǐng)求
          dataBack: false
        })
      }
    }
  });