自定义组件弹出框
.tip-area {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, .5);
z-index: 1000;
}
.dialog-bg {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.dialog-content {
width: 65vw;
min-height: 260rpx;
border-radius: 25rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: #252525;
}
.tip-title {
margin-top: 30rpx;
font-size: 35rpx;
color: #F3C38F;
font-weight: 600;
}
.tip-txt {
font-size: 25rpx;
color: #858584;
}
.btn-single-content {
width: 85%;
height: 65rpx;
border-radius: 40rpx;
background: #F3C28E;
text-align: center;
line-height: 65rpx;
font-size: 30rpx;
color: black;
margin: 30rpx 0 50rpx 0;
}
picker-view {
position: relative;
background: #252525;
text-align: center;
box-sizing: border-box;
width: 100%;
height: 40vw;
margin: 30rpx 0rpx;
padding: 0 120rpx;
box-sizing: border-box;
background: transparent;
}
.shu-line {
width: 15rpx;
height: 150rpx;
background: #252525;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
picker-view-column {
color: #F3C28E;
font-size: 40rpx;
background: transparent;
}
.pickerCol {
width: 100%;
height: 90rpx;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
border-image: linear-gradient(to right, #2D2D2D, #545550, #2D2D2D) 1 1;
background: transparent;
}
.pickerCol::before {
content: '';
position: absolute;
top: 0px;
border: none;
}
.pickerCol::after {
content: '';
position: absolute;
bottom: 0;
border: none;
}
.picker-mask {
background-color: transparent;
opacity: 0;
}
.pre-horver {
transform: scale(.96);
/* box-shadow: 0 0 10px 0 #b8b9bd; */
/* border-radius: 120rpx; */
}
.big-txt {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
font-size: 40rpx;
}
.small-txt {
font-size: 25rpx;
align-self: stretch;
}
<view wx:if="{{isShowTimeDialog}}" class="tip-area">
<view class="dialog-bg">
<view class="dialog-content">
<view class="tip-title">时间设置</view>
<picker-view bindchange="changeHandler" value="{{timeShowIndex}}" indicator-class='pickerCol' mask-class="picker-mask">
<picker-view-column>
<view wx:for="{{timeArr}}" wx:key="item" style="line-height: 50px">{{item}}</view>
</picker-view-column>
</picker-view>
<view class="tip-txt">{{timeTipStr}}</view>
<view bind:tap="clickHandler" class="btn-single-content">确定</view>
</view>
</view>
</view>
Component({
properties: {
isShowTimeDialog: { //是否显示弹出框
value: false,
type: Boolean
},
dialogTimeType: { //显示弹出框类型
value: 0,
type: Number
},
timeSetShow: {
value: 0.5 * 60,
type: Number
},
timeTipStr: { //提示字符串
value: '推荐时间:05m 00s',
type: String,
}
},
data: {
timeShowIndex: [0], //显示时间的下标
timeArr: [0.5 * 60, 1.0 * 60, 1.5 * 60, 2.0 * 60, 2.5 * 60, 3.0 * 60, 3.5 * 60, 4.0 * 60, 4.5 * 60, 5.0 * 60],
},
observers: {
timeSetShow: function (setTime) {
const timeArr = this.data.timeArr;
for (let index = 0; index < timeArr.length; index++) {
const element = timeArr[index];
if (setTime == element) {
this.setData({
timeShowIndex: [index],
})
break;
}
}
}
},
methods: {
changeHandler(e) { //时间选择监听事件
const indexArr = e.detail.value;
this.data.timeShowIndex = indexArr;
},
clickHandler(e) { //点击事件
// wx.audio.key();
const timeArr = this.data.timeArr;
this.triggerEvent('clickDialog', {
dialogType: this.data.dialogTimeType,
time: timeArr[this.data.timeShowIndex[0]],
timeShowIndex: this.data.timeShowIndex,
});
}
},
})
页面中使用
{
"usingComponents": {
"time-dialog": "../../components/time-dialog/index"
},
"enablePullDownRefresh": true,
"backgroundTextStyle": "dark",
"navigationBarTitleText": "dialog"
}
<time-dialog isShowTimeDialog="{{isShowTimeDialog}}" isSmallTime="{{isSmallTime}}" timeShowIndex="{{timeShowIndex}}" timeTipStr="{{timeTipStr}}" bind:clickDialog="clickTimeDialogHandler"></time-dialog>
clickTimeDialogHandler(e) { //时间弹出框监听事件
const time = e.detail.time;
const timeShowIndex = e.detail.timeShowIndex;
this.data.timeShowIndex = timeShowIndex;
this.setData({
isShowTimeDialog: false,
time: time,
})
},
showDialogClick() { //显示弹出框
const yearShowIndex = this.data.yearShowIndex;
const monthShowIndex = this.data.monthShowIndex;
this.setData({
isShowDateDialog: true,
yearShowIndex: yearShowIndex,
monthShowIndex: monthShowIndex,
})
},