• 注册
    • 查看作者
    • 微信小程序实现下拉加载更多商品

       

      这篇文章主要为大家详细介绍了微信小程序实现下拉加载更多商品,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

      本文实例为大家分享了微信小程序下拉加载更多商品的具体代码,供大家参考,具体内容如下

      1. source code

      微信小程序实现下拉加载更多商品

      <view class=’goods’>
      <view class=’good’ wx:for=”{{ goodslist }}” wx:key=’index’>
      <view class=’pic’>
      <image src='{{ item.imgUrl }}’></image>
      </view>
      <view class=’title’> {{ item.des }} </view>
      <view class=’desc’>
      <text class=’price’>¥{{ item.price }}</text>
      <text class=’paynum’> {{ item.alreadyPaid }} </text>
      </view>
      </view>
      </view>

      <button loading wx:if=”{{loadmore}}”> loading… </button>
      <button wx:else> 我是有底线的 </button>

      wxss:

      /* pages/loadmore/loadmore.wxss */

      .goods{
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-top: 20rpx;
      background-color: #ddd;
      }
      .good{
      width: 370rpx;
      height: 528rpx;
      /* background-color: red; */
      margin-bottom: 20rpx;
      }

      .pic{
      width: 370rpx;
      height: 370rpx;
      }
      .pic image{
      width: 100%;
      height: 100%;
      }

      .title{
      font-size: 26rpx;
      padding: 20rpx;
      height: 52rpx;
      overflow: hidden;
      }
      .desc{
      font-size: 23rpx;
      padding: 20rpx;
      }
      .paynum{
      margin-left: 165rpx;
      }

      js:

      1

      // pages/loadmore/loadmore.js
      Page({

      /**
      * 页面的初始数据
      */
      data: {
      data: [], // 所有数据
      goodslist:[], // 展示数据
      loadmore: true
      },

      /**
      * 生命周期函数–监听页面加载
      */
      onLoad: function (options) {
      const that = this;
      wx.request({
      url: ‘http://www.tanzhouweb.com/vueProject/vue.php?title=likeYou’,
      success(res){
      const data = res.data;
      const goodslist = [];
      // 初始显示6条数据
      data.forEach((item, index) => {
      if(index<6){
      goodslist.push(item)
      }
      });
      // console.log(data)
      that.setData({
      goodslist,
      data
      })
      }
      })
      },

      // 下拉触底执行(下拉触底添加后6条数据,直到所有数据加载完成)
      onReachBottom(e){
      const {data, goodslist} = this.data;
      const start = goodslist.length;
      const end = Math.min( start + 6, data.length – 1);
      if(goodslist.length == data.length){
      this.setData({
      loadmore:false
      })
      return ;
      }
      for(let i = start; i<=end; i++){
      goodslist.push(data[i])
      }
      this.setData({
      goodslist
      })
      }
      })

      {
      “usingComponents”: {},
      “navigationBarBackgroundColor”: “#3366CC”,
      “navigationBarTitleText”: “商品加载”,
      “navigationBarTextStyle”: “white”
      }

      2. 效果

      初始显示6条数据,下拉触底加载后6条数据

      生命周期函数: onLoad onReachBottom

      以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

      来源:脚本之家

      链接:https://www.jb51.net/article/203114.htm

      ,。,!

    • 0
    • 0
    • 0
    • 12
    • 请登录之后再进行评论

      登录
    • 单栏布局 侧栏位置: