在微信小程序开发中，在很多地方会用到相似的
UI布局时，如果我们每一页都重写一遍UI布局，不说效率低下，费时费力，在后期维护中如果需要更改UI布局，哪怕只是一个很小的改动，那么相同页面就都需要改动，工程量大！所以，这时我们可以将相似的UI做成自定义组件，在需要的页面引用，方便快捷！
效果图
自定义picker
自定义picker
Step 1：创建component
这里写图片描述
组件目录
上图中，创建的
component一共有四个文件，分别是js文件、json文件、wxml文件以及wxss文件
Step 2：绘制component
wxml
<!-- 带标题的普通选择器 -->
<block wx:if="{{show}}">
<view class="we-title-picker-container">
<view style="width:{{titleWidth}};font-size:{{titleSize}};color:{{titleColor}};">{{ title }}</view>
<picker class="we-title-picker"
style="background:{{pickerBg}};border:{{borderSize}} solid {{borderColor}};"
value="{{pickerIndex}}"
range="{{pickerRange}}"
bindchange="_pickerChangeEvent">
<view class="we-title-picker-content" style="font-size:{{contentSize}};color:{{contentColor}};">{{ content }}</view>
</picker>
</view>
</block>
wxss
.we-title-picker-container {
display: flex;
align-items: center;
width: 100%;
height: 100%;
}
.we-title-picker {
position: relative;
width: 100%;
height: 100%;
border-radius: 5px;
box-sizing: border-box;
overflow: hidden;
padding: 15rpx;
}
.we-title-picker-content {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
line-height: 110%;
left: 15rpx;
top: 15rpx;
width: calc(100% - 30rpx);
height: calc(100% - 30rpx);
}
Step 3：JS书写
重点注意JS文件中的properties: {}以及methods: {}
// 选择器的选择方法名
const EVENT_PICKER_CHANGE = 'pickerChange';
// 默认属性值
const DEF_CONFIG = {
show: true,
title: '标题',
titleWidth: '220rpx',
titleSize: '34rpx',
titleColor: '#353535',
pickerBg: 'white',
pickerIndex: 0,
pickerRange: null,
content: '',
contentSize: '34rpx',
contentColor: '#353535',
borderSize: '1rpx',
borderColor: '#dadada',
}
Component({
/**
* 组件的属性列表
*/
properties: {
// 是否显示
show: {
type: Boolean,
value: DEF_CONFIG.show
},
// 标题文字
title: {
type: String,
value: DEF_CONFIG.title
},
// 标题的宽
titleWidth: {
type: String,
value: DEF_CONFIG.titleWidth
},
// 标题文字的大小
titleSize: {
type: String,
value: DEF_CONFIG.titleSize
},
// 标题文字的颜色
titleColor: {
type: String,
value: DEF_CONFIG.titleColor
},
// 选择器的选择下标
pickerIndex: {
type: Number,
value: DEF_CONFIG.pickerIndex
},
// 选择器的选择范围
pickerRange: {
type: null,
value: DEF_CONFIG.pickerRange
},
// 选择器的背景
pickerBg: {
type: String,
value: DEF_CONFIG.pickerBg
},
// 内容
content: {
type: String,
value: DEF_CONFIG.content
},
// 内容文字的大小
contentSize: {
type: String,
value: DEF_CONFIG.contentSize
},
// 内容文字的颜色
contentColor: {
type: String,
value: DEF_CONFIG.contentColor
},
// 边框的大小
borderSize: {
type: String,
value: DEF_CONFIG.borderSize
},
// 边框的颜色
borderColor: {
type: String,
value: DEF_CONFIG.borderColor
}
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
/**
* 公共方法
*/
// 显示组件
show: function (config) {
this.setData({
show: true,
// 如果 config.title 有值，则使用 config.title；如果为空，则使用原来的 title 值，下面属性类似
title: config.title ? config.title : this.data.title,
titleWidth: config.titleWidth ? config.titleWidth : this.data.titleWidth,
titleSize: config.titleSize ? config.titleSize : this.data.titleSize,
titleColor: config.titleColor ? config.titleColor : this.data.titleColor,
pickerIndex: config.pickerIndex ? config.pickerIndex : this.data.pickerIndex,
pickerRange: config.pickerRange ? config.pickerRange : this.data.pickerRange,
pickerBg: config.pickerBg ? config.pickerBg : this.data.pickerBg,
content: config.content ? config.content : this.data.content,
contentSize: config.contentSize ? config.contentSize : this.data.contentSize,
contentColor: config.contentColor ? config.contentColor : this.data.contentColor,
borderSize: config.borderSize ? config.borderSize : this.data.borderSize,
borderColor: config.borderColor ? config.borderColor : this.data.borderColor,
});
},
// 隐藏组件
hide: function () {
this.setData({
show: false
});
},
/**
* 内部方法，所有内部方法不适合在外部调用，为区别开公有方法，内部方法可以以 "_" 开头
*/
// 选择器选择事件，在 picker 中的 bindchange="_pickerChangeEvent" 被调用
_pickerChangeEvent: function (e) {
// 获取事件 e 的 detail 值
let _detail = { value: e.detail.value }
// triggerEvent 为触发事件函数，与 _pickerChangeEvent 绑定，用于外部调用 _pickerChangeEvent 方法
// 参数 1：EVENT_PICKER_CHANGE ===> 是外部调用时使用的方法名
// 参数 2：_detail ===> 传递给 EVENT_PICKER_CHANGE 方法的 detail 值，
// 不传递则 EVENT_PICKER_CHANGE 方法的 detail 值为空
this.triggerEvent(EVENT_PICKER_CHANGE, _detail);
}
}
})
Step 4：在页面中使用
- 1、在页面的
json文件中添加组件引用
"usingComponents": {
"we-title-picker": "/lib-me/ui/we-title-picker/we-title-picker",
"we-title-date-picker": "/lib-me/ui/we-title-date-picker/we-title-date-picker",
"we-simple-toast": "/lib-me/ui/we-simple-toast/we-simple-toast"
}
引用规则 ===> "自定义组件名（可随意取名）":"组件在项目中的相对路径"
注意！注意！注意！ ===> 自定义组件名不能以wx-开头，否则在页面中会报"找不到组件标签"
- 2、在页面的
wxml中调用
<!-- 多元统计页面 -->
<view class="container">
<view class="container-main">
// 省略无关代码
......
<we-title-picker
id="customPicker"
class="multi-hp-picker"
title="机器地点"
pickerRange="{{machinePosList}}"
content="{{machinePos}}"
bind:pickerChange="machineChange"
contentSize="30rpx" />
// 省略无关代码
......
</view>
<we-simple-toast id="toast" class="we-simple-toast" />
</view>
上述<we-title-picker ... >即为我们的自定义组件
-
title、pickerRange、content、contentSize为我们的自定义属性 -
bind:pickerChange="machineChange"为我们在JS中使用this.triggerEvent(EVENT_PICKER_CHANGE, _detail);方法向外暴露的自定义方法，EVENT_PICKER_CHANGE为方法名，即pickerChange。注意：自定义方法前，一定要加bind，可以写为bind:方法名或者bind方法名。
- 3、在页面的
JS中调用
- 根据
id获取自定义组件对象：customPicker= this.selectComponent('#customPicker'); - 调用自定义组件的方法，即
methods: {...}中的方法：customPicker.show();
