01 创建组件
遇见的困难
图标显示不出来,是因为你没有在组件的css中引入,所以显示不出来。
我一直以为是一个坑。结果是自己没有整清楚
01==》在page的同级目录下,创建一个文件夹,命名为components文件夹,这个文件夹是用来放组件的哈。
02==》然后单击这个文件夹,选择创建一个目录(如topheader)。topheader在components文件夹下。
03===》创建好了目录(topheader),在点击这个(topheader)这个文件夹。创建【page】
02如何引入组件
在创建好的组件中,有一个XXX.json文件。在这个文件中添加如下
XXX.json
{
"usingComponents": {},
"component": true //这一组的四个文件会被当做一个组件哈。
//说明这是一个组件哈
}
循环数据,动态的class直接 class="{{item}}"这样就行哈,不需要写冒号
XXX.wxml
<view class="header-top">
<block wx:for="{{paramAtoListIocn}}" :key="index">
<text style='color:greenyellow;font-size:40rpx;' class=" iconfont ali-size {{item}}"></text>
</block>
</view>
XXX.wcss
@import "../../styles/iconfont.wxss";
//引入矢量图标库。否者图标不能够现实出来哈。
.header-top {
display: flex;
justify-content: flex-end;
padding: auto 30rpx;
}
.ali-size {
margin-left: 20rpx;
}
XXX.js
//注意在这个页面,原来的Page要替换成 Component哈,要注意这个
Component({
data: {},
//父传子的参数哈
properties: {
paramAtoListIocn: Array
},
使用的界面。父组件中
XXXX.json引入组件
{
"usingComponents": {
"headertopicon": "/components/headertopicon/headertopicon",
}
}
hmtl
<view class="top-header">
<headertopicon paramAtoListIocn='{{paramAtoListIocn}}' />
</view>
js
data: {
paramAtoListIocn: ["icon-bianqian", "iconshexiangtou", "icon-setup"]
},
css
.top-header {
height: 300rpx;
100%;
background: pink;
padding: 20rpx;
}