微信小程序：block制作动态商品列表

微信小程序：block制作动态商品列表

在制作微信小程序时，我们往往会碰到需要动态生成列表的情况，本文便是以常见的商品列表为例来学习如何利用block制作动态商品列表。

运行截图

实现代码

js:

Page({
  data: {
    showData:null
  },
  onLoad:function(){
  //使用的时候仅需替换调参数和里面的值即可
    var showData=[
      { goods_name: "商品名称",store_img_url: '../images/store_img.jpg', goods_img_url: '../images/goods_img.png', introduce: "商品购买介绍", sell_price: "商品售价",saled_num:50.0},
      { goods_name: "电视机",store_img_url: '../images/store_img.jpg', goods_img_url: '../images/goods_img.png', introduce: "五彩缤纷", sell_price: "2200",saled_num:29.0},
      { goods_name: "电冰箱",store_img_url: '../images/store_img.jpg', goods_img_url: '../images/goods_img.png', introduce: "很冷很冷", sell_price: "1800",saled_num:90.0},
      { goods_name: "自行车",store_img_url: '../images/store_img.jpg', goods_img_url: '../images/goods_img.png', introduce: "跑得快", sell_price: "800",saled_num:40.0},
      { goods_name: "钢笔",store_img_url: '../images/store_img.jpg', goods_img_url: '../images/goods_img.png', introduce: "不耗墨", sell_price: "1800",saled_num:70.0},
      { goods_name: "自行车",store_img_url: '../images/store_img.jpg', goods_img_url: '../images/goods_img.png', introduce: "跑得快", sell_price: "800",saled_num:40.0},
      { goods_name: "钢笔",store_img_url: '../images/store_img.jpg', goods_img_url: '../images/goods_img.png', introduce: "不耗墨", sell_price: "1800",saled_num:70.0}
    ]
    this.setData({
      showData:showData
    })
  },
  //购买按钮点击事件
  buy_click:function(){
    wx.showToast({
      title: '购买成功',
      icon:'success',
      duration:2000
    })
  }
})

wxml:

<scroll-view class='content' scroll-y="true" style='height:100%'><!-- 改变height的值便可改变列表高度-->
  <block wx:for="{{showData}}" wx:key="goods_name">
    <view class = "button_item" data-testid="{{item}}"  >
      <button class="goods" data-testid="{{item}}"><!--之所以利用button控件来承载是因为block循环其他控件会产生重叠现象，这里我没有细究-->
        <view class= "goods_head">
          <image class="logo" src = "{{item.store_img_url}}"></image>
        </view>
        <view class="divLine"></view>
        <image class="goods_logo" src = "{{item.goods_img_url}}"></image>
        <text class="goods_name">{{item.goods_name}}</text>
        <text class="introduce">{{item.introduce}}</text>
        <text class="amount">¥{{item.sell_price}}</text>
        <progress class = "goods_progress"  percent="{{item.saled_num}}" color = "#0cc22a" active = "true" ></progress>
        <button class = "btn_goods" bindtap="buy_click">
          <text class = "buy">购买</text>
        </button>
      </button>
    </view>
  </block>
</scroll-view>

wxss:

page{
  background: #f5f5f5;
  }
.content{
  position: absolute;
  top:0rpx;
  left:0%;
  width:100%;
}
.button_item{
  top:10rpx;
  left:0%;
  width:100%;
  height: 310rpx;
}
.goods{
  top:10rpx;
  left:0%;
  width:90%;
  height: 280rpx;
  background: #fff;
  border-radius: 15rpx;
  box-shadow: 2px 2px 3px #cfcece;
}
.goods::after{
  border:0px;
}
.goods_head{
  position: absolute;
  top:0rpx;
  left:0%;
  width:100%;
  height: 65rpx;
}
.logo{
  position: absolute;
  top:12.5rpx;
  left:5%;
  width:40rpx;
  height: 40rpx;
}
.divLine{
  position: absolute;
  background: #E0E3DA;
  top:65rpx;
  width: 91%;
  height:3rpx;
}
.goods_logo{
  position: absolute;
  top:90rpx;
  left:5%;
  width:75px;
  height: 75px;
}
.goods_name{
  position: absolute;
  top:70rpx;
  left:30%;
  width:40%;
  height: 80rpx;
  font-size: 15px;
  text-align: left;
  display:-webkit-box;
  -webkit-line-clamp:1;
  overflow:hidden;
  text-overflow:ellipsis;
  -webkit-box-orient:vertical;
  word-break:break-all;
}
.introduce{
  position: absolute;
  top:120rpx;
  left:30%;
  width:35%;
  height: 55rpx;
  text-align: left;
  color:rgb(151, 150, 150);
  font-size: 13px;
  overflow:hidden; 
  text-overflow:ellipsis;
  white-space:nowrap;
}
.amount{
  position: absolute;
  top:180rpx;
  left:30%;
  width:30%;
  height: 55rpx;
  text-align: left;
  color:rgba(185, 20, 20, 0.796);
  font-size: 15px;
}
.btn_goods{
  position: absolute;
  top:100rpx;
  right:6%;
  width: 150rpx;
  height: 60rpx;
  background: #67e956;
  z-index: 99999;
}
.btn_goods::after{
  border: 0ch;
}
.buy{
  position: absolute;
  top:-6rpx;
  right:0%;
  width: 100%;
  color:#fff;
  text-align: center;
  font-size: 13px;
}
.goods_progress{
  position: absolute;
  top:185rpx;
  right:6%;
  width: 150rpx;
  height: 6rpx;
  font-size: 8px;
  border-radius: 15px;
}

从动态生成的商品列表出发，其他列表的生成只需要改变样式以及参数就可以轻松完成，希望这篇文章能够帮助到你哦！！！