小程序自带的modal组件比较局限,只能适用于少部分较为简单的情景,很多情况下还是需要自定义,然后就写了一个自定义的左右布局的自定义模态框,效果展示如下图所示:
自定义模态框.gif-
页面布局
-
然后就是单选的问题了
1.首先找到点击事件循环列表的索引,根据索引找到对应的循环项
2.设置点击项isOpen属性的值,0为选择,1为未选择(isOpen是自定义,是为了页面渲染添加的),同时不要忘记将其他的项的isOpen设置为1
3.重新赋值
附代码,有些内容代码中做过标注
-
WXMl
<view class='top-insurance-platform' catchtap='srceenPlatform'>
<view>保险平台</view>
<image src='../../resource/icon/btn_down.png' class='down'></image>
</view>
<view style="text-align:center;font-size:32rpx;margin-top:3vh">您当前选择的是:</view>
<view style="text-align:center;font-size:32rpx;margin-top:3vh">{{companyName}}</view>
<view hidden="{{menuDisplay}}" class='mengceng-box'>
<view class='left-mengceng'>
<view class='top-title' catchtap='srceenPlatform'>保险公司</view>
<view wx:for="{{policyCompanyList}}" data-index="{{index}}" bindtap='selectPolicyCompany' wx:key="{{index}}">
<view class='company-one-line'>
<view class="{{item.isOpen == 1?'select-company':'company-left'}}">{{item.name}}</view>
<view class='company-right'>
<image src='../../resource/icon/duihao.png' class='duihao' wx:if="{{item.isOpen == 1}}"></image>
</view>
</view>
</view>
</view>
<view class='right-mengceng' catchtap='srceenPlatform'></view>
</view>
-
WXSS
.top-insurance-platform {
height: 6vh;
margin-top: 2vh;
background: white;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0rpx -1.2rpx 10rpx 4rpx #dddddd99; /*for Android*/
-webkit-box-shadow: 0px -0.6px 5px 2px #dddddd99;
}
.down {
width: 20rpx;
height: 14rpx;
margin-left: 12rpx;
}
.mengceng-box {
display: flex;
}
.left-mengceng {
height: 100vh;
width: 50vw;
position: absolute;
left: 0;
top: 0;
z-index: 99;
background: white;
}
.right-mengceng {
height: 100vh;
width: 50vw;
z-index: 99;
position: absolute;
top: 0;
left: 50vw;
background: rgba(33, 33, 33, 0.74);
}
.top-title {
height: 6.6vh;
line-height: 6.6vh;
background: #fff2c2;
text-align: center;
}
.duihao {
width: 36rpx;
height: 36rpx;
}
.company-one-line {
width: 50vw;
height: auto;
line-height: 5.6vh;
display: flex;
align-items: center;
justify-content: center;
border-bottom: 1rpx solid #e2e2e2;
}
.select-company {
width: 25vw;
padding-left: 17vw;
height: auto;
font-size: 26rpx;
color: #ffa918;
}
.company-left {
width: 25vw;
padding-left: 17vw;
height: auto;
font-size: 26rpx;
}
.company-right {
display: flex;
align-items: center;
width: 8vw;
}
-
JS
Page({
data: {
menuDisplay: true, //用来控制模拟modal的显隐
companyName:"人保车险", //选择的公司名称
policyCompanyList:[
{
"isOpen": 1, //isOpen用来控制当前选择的保险公司
"insuranceCompanyId": 1,
"name": "人保车险",
},
{
"isOpen": 0,
"insuranceCompanyId": 2,
"name": "太平洋车险",
},
{
"isOpen": 0,
"insuranceCompanyId": 3,
"name": "平安车险",
},
{
"isOpen": 0,
"insuranceCompanyId": 6,
"name": "人寿保险",
}
]
},
/**
* 控制自定义modal的显隐
*/
srceenPlatform: function (e) {
var that = this
that.setData({
menuDisplay: !that.data.menuDisplay
})
},
/**
* 选择保险公司
*/
selectPolicyCompany:function(e){
var that = this
var index = e.currentTarget.dataset.index; //循环列表的索引
var name = that.data.policyCompanyList[index].name
that.data.policyCompanyList[index].isOpen = 1 //将当前选择项的isOpen属性设置为1 在页面渲染时,0表示未选择,1标识选择
//在给选择的项isOpen赋值为1的同时,将其他项的isOpen设置为0
for (var i = 0; i < that.data.policyCompanyList.length; i++){
if(index != i){
that.data.policyCompanyList[i].isOpen = 0
}
}
//不要忘记重新给全局赋值,这个非常重要!!!
that.setData({
companyName:name,
policyCompanyList: that.data.policyCompanyList,
menuDisplay: !that.data.menuDisplay
})
},
})
本篇分享就到这里了,如果你在这篇文章里发现了什么问题或者说有更好的建议,可以评论哦
网友评论