微信小程序实现列表上拉加载,自动适应屏幕

最新推荐文章于 2025-06-27 09:31:51 发布

写写代码AAA

最新推荐文章于 2025-06-27 09:31:51 发布

阅读量5.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签：微信小程序上拉加载

本文链接：https://blog.youkuaiyun.com/qq_28988969/article/details/76677888

微信小程序专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个小程序中商品列表的实现方案，包括视图层的wxml和wxss代码，以及逻辑层js代码。通过列表渲染展示了商品信息，并实现了上拉加载更多功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.视图层wxml

<view class="page__bd">

    <!-- 列表渲染 -->
    <block wx:for="{{goodsList}}" wx:key="goodsId">
      <view class="placeholder goodsItem">
        <image src="../../images/goods.jpg" mode="center" class="goodsImg"></image>
        <view class="goodsDescItem">
          <view class="goodsName">{{item.goodsTitle}}</view>
          <view class="goodsPrice">
            <icon class="fa fa-jpy priceLogo" />{{item.goodsPrice}}</view>
          <view class="weui-flex">
            <view class="weui-flex__item">
              <view class="placeholder">
                <view class="goodsType">{{item.goodsType}}</view>
              </view>
            </view>
            <view class="weui-flex__item">
              <view class="placeholder">
                <view class="goodsTime">{{item.goodsTime}}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </block>

    <view class="showLoad">
      <view class="weui-loadmore weui-loadmore_line">
        <view class="weui-loadmore__tips weui-loadmore__tips_in-line loadDesc">数据加载完成</view>
      </view>
    </view>

    <view class="weui-footer">
      <view class="weui-footer__text">Copyright ©2017-2018 ahut</view>
    </view>

  </view>

2.视图层wxss

/*设置商品展示项*/

.goodsItem {
  background-color: #fff;
  border-radius: 10px;
  /*这里的355rpx非常重要,(355+左边距10rpx+右边距10rpx) * 2 = 750rpx(固定值)*/
  width: 355rpx;
  margin: 10rpx;
  float: left;
}

/*设置商品描述信息的内边距*/

.goodsDescItem {
  padding: 0px 10px 10px;
}

/*商品图片*/

.goodsImg {
  width: 100%;
  height: 150px;
  border: 1px solid #eee;
  border-radius: 10px;
}

/*商品名称*/

.goodsName {
  font-size: 14pt;
}

/*商品价格*/

.goodsPrice {
  font-size: 14pt;
  color: red;
}

/*商品类别*/

.goodsType {
  font-size: 11pt;
  color: #888;
}

/*商品上架时间*/

.goodsTime {
  font-size: 11pt;
  color: #888;
}

/*价格图标*/

.priceLogo {
  color: red;
  margin: -10px 2px 0px 0px;
}

/*清除数据加载完成提示两边的浮动*/

.showLoad {
  padding-top: 1px;
  clear: both;
}

/*设置数据加载完成提示样式*/

.loadDesc {
  background-color: #f8f8f7;
}

3.逻辑层js

data:{
    loadNumber: 0,//加载次数
    goodsList: [
      { goodsId: '1', goodsTitle: '玩具熊1', goodsPrice: '200.00', goodsType: '毛绒玩具', goodsTime: '2017-6-12' },
      { goodsId: '2', goodsTitle: '玩具熊2', goodsPrice: '200.00', goodsType: '毛绒玩具', goodsTime: '2017-6-12' },
      { goodsId: '3', goodsTitle: '玩具熊3', goodsPrice: '200.00', goodsType: '毛绒玩具', goodsTime: '2017-6-12' },
      { goodsId: '4', goodsTitle: '玩具熊4', goodsPrice: '200.00', goodsType: '毛绒玩具', goodsTime: '2017-6-12' }
    ],
    goodsList1: [
      { goodsId: '5', goodsTitle: '玩具熊5', goodsPrice: '200.00', goodsType: '毛绒玩具', goodsTime: '2017-6-12' },
      { goodsId: '6', goodsTitle: '玩具熊6', goodsPrice: '200.00', goodsType: '毛绒玩具', goodsTime: '2017-6-12' },
      { goodsId: '7', goodsTitle: '玩具熊7', goodsPrice: '200.00', goodsType: '毛绒玩具', goodsTime: '2017-6-12' },
      { goodsId: '8', goodsTitle: '玩具熊8', goodsPrice: '200.00', goodsType: '毛绒玩具', goodsTime: '2017-6-12' }
    ],
    goodsList2: [
      { goodsId: '21', goodsTitle: '玩具熊9', goodsPrice: '300.00', goodsType: '毛绒玩具', goodsTime: '2017-6-12' },
      { goodsId: '22', goodsTitle: '玩具熊10', goodsPrice: '300.00', goodsType: '毛绒玩具', goodsTime: '2017-6-12' },
      { goodsId: '23', goodsTitle: '玩具熊11', goodsPrice: '300.00', goodsType: '毛绒玩具', goodsTime: '2017-6-12' }
    ]
}

onReachBottom: function () {//上拉加载
    wx.showLoading({
      title: '正在加载',
    })
    //加载次数加一
    this.setData({
      loadNumber: this.data.loadNumber + 1
    })
    if (this.data.loadNumber == 1) {
      this.setData({
        goodsList: this.data.goodsList.concat(this.data.goodsList1)//将返回的数据拼接到现有数据后面
      });
    } else if (this.data.loadNumber == 2) {
      this.setData({
        goodsList: this.data.goodsList.concat(this.data.goodsList2)//将返回的数据拼接到现有数据后面
      });
    }
    setTimeout(function () {
      wx.hideLoading()
    }, 1000)
  }

4.最终效果图

这里写图片描述