小程序?qū)崿F(xiàn)下拉加載

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

    • index.wxml

        //引用封裝好的小數(shù)點保留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>
            實付￥
            <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

      //獲取應(yīng)用實例
// 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é)流  判斷這個接口數(shù)組的長度  當(dāng)這個接口數(shù)組不為空的時候發(fā)送請求數(shù)據(jù) ，否則不發(fā)送
      if (res.list.length) {
        console.log(res.list, '商品列表')
        //遍歷這個接口數(shù)組
        let tempArr = res.list.map(item => {
          return {
            ...item,
            //把商品價格保留2位小數(shù)
            minPrice: (item.minPrice / 100).toFixed(2)
          }
        })
        // 拼接productList
        let tempt = this.data.productList.concat(tempArr)
        // 保存數(shù)據(jù)
        this.setData({
          // 然后把這個數(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ù)為假的時候不在發(fā)送請求
        dataBack: false
      })
    }
  }
});
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。
禁止轉(zhuǎn)載，如需轉(zhuǎn)載請通過簡信或評論聯(lián)系作者。

推薦閱讀更多精彩內(nèi)容