|
一、源码地址 https://github.com/imxiaoer/wechatminiselect
二、效果图  录屏图片质量较差，所以大家会看到残影
三、组件源码 1. select.wxml view
view catchtap="openclose"
text {{current.k8.com凯发真人name}} /text
/view
view wx:if="{{isshow}}" catchtap="optiontap"
text data-id="{{defaultoption.id}}"
data-name="{{defaultoption.name}}" {{defaultoption.name}}
/text
text wx:for="{{result}}"
wx:key="{{item.id}}"
data-id="{{item.id}}"
data-name="{{item.name}}" {{item.name}}
/text
/view
/view
说明：用 catchtap 而不用 bindtap 是为了阻止事件冒泡，为了实现点击页面其他地方关闭 select， 所以在父页面最外层绑定了 bindtap="close" 方法， 不阻止冒泡的话会执行父组件的 close 方法
2. select.js component {
let dataset = e.target.dataset
this.setdata
openclose {
this.setdata {
this.setdata {
// 属性名称转换, 如果不是 { id: '', name:'' } 格式，则转为 { id: '', name:'' } 格式
let result = []
if {
for {
let { [this.data.key]: id, [this.data.text]: name } = item
result.push
this.setdata,
result: result
})
说明：properties中的 key 和 text 是为了做属性名转换。比如我现在的数据结构如下： [{
city_id: '001',
city_name: '北京'
}, {
city_id: '002',
city_name: '上海'
}, {
city_id: '003',
city_name: '深圳'
}]而 select 组件要求的数据结构是： [{
id: '001',
name: '北京'
}, {
id: '002',
name: '上海'
}, {
id: '003',
name: '深圳'
}]因此我们就要将 city_id 转换成 id，city_name 转换成 name。 怎么实现属性名转换呢？ 就是通过 key 和 text 这两个参数。
3. select.json {
"component": true,
"usingcomponents": {}
}
4. select.wxss .select-box {
position: relative;
width: 100%;
font-size: 30rpx;
.select-current {
position: relative;
width: 100%;
padding: 0 10rpx;
line-height: 70rpx;
border: 1rpx solid #ddd;
border-radius: 6rpx;
box-sizing: border-box;
.select-current::after {
position: absolute;
display: block;
right: 16rpx;
top: 30rpx;
content: '';
width: 0;
height: 0;
border: 10rpx solid transparent;
border-top: 10rpx solid #999;
.current-name {
display: block;
width: 85%;
height: 100%;
word-wrap: normal;
overflow: hidden;
.option-list {
position: absolute;
left: 0;
top: 76rpx;
width: 100%;
padding: 12rpx 20rpx 10rpx 20rpx;
border-radius: 6rpx;
box-sizing: border-box;
z-index: 99;
box-shadow: 0rpx 0rpx 1rpx 1rpx rgba inset;
background-color: #fff;
.option {
display: block;
width: 100%;
line-height: 70rpx;
border-bottom: 1rpx solid #eee;
.option:last-child {
border-bottom: none;
padding-bottom: 0;
}
四、组件的使用 index.wxml view bindtap="close"
view
select id="select" options="{{options}}" key="city_id" text="city_name" bind:change="change" /select
/view
/view
|