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

goods.wxml

实例

moduls="模型名字，对应本文件中要引用的地方"

src="模型所在的文件地址"

{{item.goodsName}}

￥ {{filters.toFix(item.goodsPrice,1)}}

运行实例 »

点击 "运行实例" 按钮查看在线实例

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;

}

运行实例 »

点击 "运行实例" 按钮查看在线实例