目录结构
组件 self_item.js
...
#item 定义主页面传值并定义该属性的类型
properties: {
item:Object
}
...
组件 self_item.wxml
<view class="item">
<image wx:if="{{item.image}}" class="image" src="{{item.image}}" mode="aspectFill"></image>
<text class="text">{{item.name}}</text>
</view>
主页面注册组件 list.json
{
"usingComponents": {
"list-item":"/components/list-item/list-item"
}
}
主页面数据初始化 list.js
...
data: {
listitem:[
{
id:"0",
image:"/assets/images/2.jpg",
title:"php-玩微信小程序系列",
title1:"友儿",
title2:"2300",
isStart: true
},
{
id:"1",
image:"/assets/images/2.jpg",
title:"java-玩微信小程序系列",
title1:"笑话",
title2:"800",
isStart: false
},
{
id:"2",
image:"/assets/images/2.jpg",
title:"python-玩微信小程序系列",
title1:"晓明",
title2:"8000",
isStart: true
}
]
}
...
主页面 list.wxml 调用
<block wx:for="{{listitem}}" wx:key="id">
<list-item item="{{item}}"/>
</block>