goods.wxml
moduls="模型名字,对应本文件中要引用的地方"
src="模型所在的文件地址"
<wxs module="filters" src="./goods.wxs" /> <!-- 商品列表渲染 --> <view class="goods-show"> <block wx:for="{{goods}}" wx:key="id"> <view class="goods-box"> <image src='/image/home.png'></image> <view class="goods-name">{{item.goodsName}}</view> <view class="goods-price">¥ {{filters.toFix(item.goodsPrice,1)}}</view> </view> </block> </view>
点击 "运行实例" 按钮查看在线实例
goods.wxs
var filters = { toFix: function(val,count){ return parseFloat(val).toFixed(count); } } module.exports = { toFix: filters.toFix }
点击 "运行实例" 按钮查看在线实例
goods.wxss
.goods-show{display: flex; flex-wrap: wrap; } .goods-box{width: 246rpx; padding: 0 28prx; margin: 28rpx 0; text-align: center; } .goods-box image{width: 200rpx; height:200rpx; } .goods-price{color: orange; font-size: 32rpx; }
点击 "运行实例" 按钮查看在线实例
goods.js
Page({ data: { goods: [{ goodsName: "商品1", goodsPrice: "66.6" }, { goodsName: "商品2", goodsPrice: "66.6" }, { goodsName: "商品3", goodsPrice: "66.6" }, { goodsName: "商品4", goodsPrice: "66.6" }, { goodsName: "商品5", goodsPrice: "66.6" }, { goodsName: "商品6", goodsPrice: "66.6" }, { goodsName: "商品7", goodsPrice: "66.6" }, { goodsName: "商品8", goodsPrice: "66.6" }, { goodsName: "商品9", goodsPrice: "66.6" }, { goodsName: "商品9", goodsPrice: "66.6" }, ] } })
点击 "运行实例" 按钮查看在线实例
app.wxss