微信小程序：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;
}

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

微信小程序：block制作动态商品列表相关推荐

微信小程序电商实战-商品列表流式布局
微信小程序电商实战-商品列表流式布局流式布局概念流式布局也叫百分比布局把元素的宽,高,margin,padding不再用固定数值,改用百分比, 这样元素的宽,高,margin,padding会根 ...
微信小程序商城系列之商品列表页（一）
微信小程序商城列表页 wxml: <view class='list'><block wx:for='{{dataList}}' wx:key='list' wx:for-item= ...
微信小程序之实现到商品列表跳转商品详情页
模仿京东小程序,实现下列功能首页包含了手机图片,手机的描述,手机的价格,购物车图标首页显示两行文字,多余的文字隐藏,以3个点代替点击页面不同的地方,能够跳转到不同的手机详情页面手机详情页包含手 ...
微信小程序实现美团goods商品列表页开发
1.使用的组件 scroll-view和wx.createSelectorQuery()方法 2.代码图 js代码 Page({/*** 页面的初始数据*/data: {currentIndex:0, ...
微信小程序傻瓜制作_傻瓜式教程：做一个带优惠券的微信小程序
优惠券一直是电商零售商家们常用的营销手段之一,如今在各种微信小程序商城中,我们也常常能见到优惠券.为什么商家这么喜欢使用优惠券呢?当然是因为它确实能有效地刺激客户消费.商家发放优惠券,利用一种对比效应 ...
微信小程序傻瓜制作_微信小程序模板制作：手把手教你做一个生鲜小程序
传统线下生鲜水果类商家如今正面临诸多问题,包括服务范围有限.客户源不稳定.缺少订单导致新鲜食材过期等等.新零售概念的提出,很多商家虽然懂得要打通线上渠道,但通常都是仅仅局限于普通O2O外卖平台,其实这 ...
生鲜小程序微信小程序怎么制作临沂修齐网络专业制作微信小程序
生鲜小程序微信小程序怎么制作临沂修齐网络专业制作微信小程序生鲜小程序开发功能介绍: 1.产品展示:通过扫码或者搜索小程序,用户可以看到不同品种的新鲜蔬菜.水果以及肉类. 2.定时收货:买家可以预 ...
微信小程序修改数组中的元素_微信小程序——this.setData()动态修改数组中的某一值...
微信小程序--this.setData()动态修改数组中的某一值S8v编程技术_踩坑日志_进阶指南_无知人生大家是不是都觉得微信小程序的开发方式和 vue react 这种框架的开发方式很像?S8v ...
微信小程序如何制作？快捷方法有哪些？
微信小程序是一种即开即用的软件,依赖微信生态系统,可以在微信里面搜索"名称"或"小程序二维码"进入,无需下载,无需安装就可以使用,操作非常的快捷和方便.那么如何 ...

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

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

运行截图

实现代码

微信小程序：block制作动态商品列表相关推荐

最新文章

热门文章