直播带货app源码，封装自定义图标组件的相关代码 组件 wxml
<!--组件/icon/icon.wxml--> <view style='height:{{size}}px;width:{{size}}px'> <block wx:for='{{icon}}' wx:key='index' wx:if='{{type==item.type}}'> <image src='{{item.img}}' /> </block> </view>组件 wxss
/* 组件/icon/icon.wxss */ image { height: 100%; width: 100%; }组件 js
// 组件/icon/icon.js Component({ /** * 组件的属性列表 */ properties: { //图标大小 size: { type: Number, value: 30 }, //图标名称 type: { type: String, value: '右箭头', } }, /** * 组件的初始数据 */ data: { icon: [{ type: '右箭头', img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=565293574,1932156552&fm=26&gp=0.jpg' }, { type: '导航图标1', img: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2904989259,3650743495&fm=26&gp=0.jpg' }, { type: '定位图标', img: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=386405852,51737315&fm=26&gp=0.jpg' }] } })组件 json 不变
使用页 wxml
<myIcon></myIcon> <myIcon size='60'></myIcon> <myIcon type='导航图标1' size='40'></myIcon> <myIcon type='导航图标1' size='120'></myIcon> <myIcon type='定位图标' size='50'></myIcon> <myIcon type='定位图标' size='140'></myIcon>使用页 json
{ "usingComponents": { "myIcon": "../../组件/icon/icon" //写自己的路径 } }以上就是直播带货app源码，封装自定义图标组件的相关代码， 更多内容欢迎关注之后的文章
