小程序实现下拉加载

• 首页下拉加载数据

  • index.wxml

      //引用封装好的小数点保留2位的方法
    
    
        
           
          
            
              
              
              
              
              
            
          
        
      
        
          
            
            
              
                共{{item.cartnumber}}件商品
                
                实付￥
                {{filters.toFix(item.totalPrice)}}
              
            
            
              {{item.payStatus == "0"?"已取消":"交易成功"}}
              {{item.payStatus == "0"?"重新购买":"评价"}}
            
          
      
    
    

  • 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
          })
        }
      }
    });