微信小程序中的商品列表渲染

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

实例

page{
	font-size: 28rpx; 
	color: #1a1a1a;
	font-family: microsoft yahei;
}