组件的初步认知。
首先组件也是由js，json，wxml，wxss四个文件组成，和page页面一样，只不过组件js文件的写法跟page有所区别。以下组件的js文件，可以看下。接下来我们写一个简单的组件infoCell，效果图如下。
截屏2021-01-28 下午4.52.48.png
Component({
/**
* 组件的属性列表
*/
// 在这里itemDic是为了外部引用组件时，把外部的数据传进来。
// 不仅要在属性properties里面定义并声明其类型，还要在data里面声明。
properties: {
itemDic:{
type:JSON,
value:''
}
},
/**
* 组件的初始数据
*/
data: {
// itemDic:{"title":"姓名","subTitle":"请输入会员姓名","xing":false}
itemDic:{},
},
/**
* 组件的方法列表
*/
methods: {
cellTap:function(e){
// console.log(e.currentTarget)
}
}
})
组件的json文件写法其实很简单
{
"component": true
}
接下来就是wxml，wxss文件里面一些控件的编写，就不叙述了。直接上代码吧。
<view class="cell" bindtap="cellTap">
<view class="leftCell">
<view class="cellTitle">{{itemDic.title}}</view>
<view class="xing" hidden="{{itemDic.xing}}">*</view>
</view>
<view class="rightCell">
<view class="cellPlaceHoder">{{itemDic.subTitle}}</view>
</view>
</view>
.cell {
width: 100%;
height: 90rpx;
display: flex;
flex-direction: row;
border-bottom: 1rpx solid #e5e5e5;
vertical-align: center;
align-items: center;
justify-content: center;
}
.leftCell{
margin-left: 20rpx;
display: flex;
flex-direction: row;
flex: 1;
}
.cellTitle {
color: rgba(0, 0, 0, 0.616);
font: 15rpx;
}
.xing{
color: red;
margin-left: 10rpx;
}
.cellPlaceHoder {
margin-right: 30rpx;
font: 12rpx;
color: rgba(0, 0, 0, 0.425);
}
那么组件写完了，该怎么使用呢？
首先，要在页面中引入组件。这里，我以newCust这个页面为例子。
在newCust.json中引入如下
{
"navigationBarTitleText": "新客建档",
"usingComponents": {
"infoCell": "../../component/infoCell/infoCell",
"selectCell": "../../component/selectCell/selectCell",
"radioCell": "../../component/radioCell/radioCell"
}
}
引入时，注意下图提示内容：
Snip20210128_1.png
就这样，组件就引入了页面，可以在页面中直接使用了。
<block wx:for="{{dataArr1}}" wx:key="id">
<infoCell id="infoCell" class="infoCell" itemDic="{{item}}" bindtap="cellTap" wx:key="{{item.ID}}" data-item= "{{item}}" ></infoCell>
</block>
