供自己之后参考
<view class="select-box">
<view class="select-current" catchtap="openClose">
<text class="current-name">{{defaultOption.name}}</text>
</view>
<view class="option-list" wx:if="{{isShow}}" catchtap="optionTap">
<text class="option" wx:for="{{options}}" wx:for-item="item" wx:key="index" wx:for-index="index" data-id="{{item.id}}"
data-name="{{item.name}}">{{item.name}}
</text>
</view>
</view>
Component({
properties: {
options: {
type: Array,
value: []
},
defaultOption: {
type: Object,
value: {}
},
},
data: {
isShow: false,
},
methods: {
optionTap(e) {
let dataset = e.target.dataset
this.setData({
current: dataset,
isShow: false
});
// 调用父组件方法,并传参
this.triggerEvent("change", { ...dataset })
},
openClose() {
this.setData({
isShow: !this.data.isShow
})
},
},
pageLifetimes: {
show: function () {
console.log(this.data.options,'toolNametoolName');
},
hide: function () {
// 页面被隐藏
},
resize: function (size) {
// 页面尺寸变化
}
},
})
.select-box {
position: relative;
width: 100%;
width: 200rpx;
background: #3a3a3a;
border-radius: 10rpx;
opacity: 0.5;
z-index: 100;
}
.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;
font-size: 30rpx;
color: #ffffff;
}
.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(0, 0, 0, 0.2) inset;
background: #3a3a3a;
}
.option {
display: block;
width: 100%;
line-height: 70rpx;
color: #ffffff;
}
.option:last-child {
border-bottom: none;
padding-bottom: 0;
}