上一章微信小程序-自定义弹框-版本3我们已经对弹框内容距离顶部做了优化，今天主要优化按钮的颜色设置，如图
E63CB24C-C202-4F65-9E87-9C15150FFC09.png
话不多说，直接上终极版代码，详细的解释请看微信小程序-自定义弹框-版本1
- popView.js
// components/popView/popView.js
Component({
options: {
// multipleSlots: true // 开启多slot支持
},
// 属性
properties: {
canShow: {
type: Boolean, //目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
value: false, // 默认值
},
btns: {
type: Array,
value: ['取消','确定'] // 默认值
},
cntMarginTop: {
type: Number,
value: 268 // 默认值
},
normalBtnColor: {
type: String,
value: 'green'
},
highlightedBtnColor: {
type: String,
value: 'blue'
}
},
// 初始化数据
data: {
},
methods: {
// 需要使用到this.triggerEvent(' ',{},{}),第一个参数是自定义事件名称，这个名称是在页面调用组件时bind的名称，第二个对象就可以将想要的属性拿到，第三个参数文档中有介绍
selectMask: function (e) {
this.setData({
canShow: !this.data.canShow
});
},
// 选中底部的按钮
selectBtn: function (e) {
console.log(e)
let index = e.currentTarget.dataset.index;
this.triggerEvent('didClickBtn', index); // 外面通过e.detail获取index的值
},
move: function () {
return;
}
}
})
- popView.json
{
"component": true,
"usingComponents": {}
}
- popView.wxml
<!--components/popView/popView.wxml-->
<view wx:if="{{canShow}}" class= 'popV' catchtouchmove="move">
<view class='popV-mask' bindtap="selectMask"></view>
<!-- 动态修改top -->
<view class='popV-content' style="top:{{cntMarginTop+'rpx'}}">
<slot></slot>
<view class='popV-content-btm'>
<view wx:for="{{btns}}"
wx:key="{{index}}"
data-index="{{index}}"
class='popV-item {{index==btns.length-1?"popV-item-highlighted":""}}'
style="color:{{index==btns.length-1?highlightedBtnColor:normalBtnColor}};"
hover-class='popV-hover'
bindtap='selectBtn'>{{item}}</view>
</view>
</view>
</view>
- popView.wxss
/* components/popView/popView.wxss */
.popV {
display: flex;
justify-content: center;
}
.popV-mask {
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.4);
display: block;
position: fixed;
z-index: 1000;
}
.popV-content{
top: 268rpx;
width: 560rpx;
background: white;
border-radius: 10rpx;
display: flex;
position: fixed;
z-index: 1001;
flex-direction: column;
overflow: hidden;
}
/* 底部 */
.popV-content-btm {
height: 100rpx;
width: 100%;
left: 0;
bottom: 0;
display: flex;
flex-direction: row;
align-items: center;
border-top-width: 1rpx;
border-top-style: solid;
border-top-color: #E1E1E1;
}
.popV-item {
flex: 1;
font-size: 36rpx;
color: #888888;
text-align: center;
line-height: 100rpx;
font-family: PingFang-SC-Medium;
border-right-width: 1rpx;
border-right-style: solid;
border-right-color: #E1E1E1;
}
.popV-item-highlighted {
color: blue;
border-right-width: 0rpx;
}
.popV-hover {
background: #DDD;
}
- index.js
//index.js
Page({
data: {
isShowPopView1: false, // 是否显示弹框
isShowPopView2: false // 是否显示弹框
},
//事件处理函数
didClick1: function() {
this.setData({
isShowPopView1:true
})
},
didClick2: function () {
this.setData({
isShowPopView2: true
})
},
//弹框事件
didClickBtn1: function (e) {
let index = e.detail; // 拿到子组件传递过来的下标
if(index == 0){console.log('点击按钮1')}else if(index == 1) {console.log('点击按钮2')}else{console.log('点击按钮3')}
this.setData({
isShowPopView1: !this.data.isShowPopView1
});
},
didClickBtn2: function (e) {
let index = e.detail; // 拿到子组件传递过来的下标
if(index == 0){console.log('点击按钮1')}else if(index == 1){console.log('点击按钮2')}else{console.log('点击按钮3')}
this.setData({
isShowPopView2: !this.data.isShowPopView2
});
}
})
- index.json
{
"usingComponents": {
"popView": "/components/popView/popView"
}
}
- index.wxml
<!--index.wxml-->
<view class="container">
<view class="userinfo">
<view class="btn1" bindtap="didClick1">
<text>弹框距离顶部默认top: 268rpx;</text>
</view>
<view class="btn2" bindtap="didClick2">
<text>弹框距离顶部自定义</text>
</view>
</view>
<view class="tempCnt1">我是来占位置的1</view>
<view class="tempCnt2">我是来占位置的2</view>
<view class="tempCnt3">我是来占位置的3</view>
<view class="tempCnt4">我是来占位置的4</view>
<view class="tempCnt5">我是来占位置的5</view>
</view>
<!-- 自定义弹框 -->
<popView canShow="{{isShowPopView1}}" btns="{{['按钮1','按钮2','按钮2']}}" binddidClickBtn="didClickBtn1">
<view class="popV-cntV">
<text class="popV-cntV-title">我是标题1</text>
<text class="popV-cntV-desc">我是详情说明,我是详情说明,我是详情说明,我是详情说明,我是详情说明,我是详情说明,</text>
</view>
</popView>
<popView canShow="{{isShowPopView2}}"
btns="{{['按钮1','按钮2','按钮2']}}"
binddidClickBtn="didClickBtn2"
cntMarginTop='400'
normalBtnColor='pink'
highlightedBtnColor='red'
>
<view class="popV-cntV">
<text class="popV-cntV-title">我是标题2</text>
<text class="popV-cntV-desc">我是详情说明,我是详情说明,我是详情说明,我是详情说明,我是详情说明,我是详情说明,</text>
</view>
</popView>
- index.wxss
/**index.wxss**/
.userinfo {
display: flex;
flex-direction: row;
align-items: center;
}
.btn1 {
width: 200rpx;
height: 200rpx;
background-color: red;
margin-right: 30rpx;
}
.btn2 {
width: 200rpx;
height: 200rpx;
background-color: green;
}
.tempCnt1 {
background-color: yellow;
display: flex;
height: 300rpx;
width: 100%;
}
.tempCnt2 {
background-color: rebeccapurple;
display: flex;
height: 300rpx;
width: 100%;
}
.tempCnt3 {
background-color: gray;
display: flex;
height: 300rpx;
width: 100%;
}
.tempCnt4 {
background-color: green;
display: flex;
height: 300rpx;
width: 100%;
}
.tempCnt5 {
background-color: blue;
display: flex;
height: 300rpx;
width: 100%;
}
/* 弹框内容布局 */
.popV-cntV {
display: flex;
flex-direction: column;
align-items: center;
}
.popV-cntV-title {
font-size: 34rpx;
color: #000000;
font-family: PingFangSC-Regular;
margin-top: 20rpx;
}
.popV-cntV-desc {
font-size: 28rpx;
color: #000000;
font-family: PingFang-SC-Medium;
margin: 20rpx;
}
