小程序自定义模态框+单选

小程序自带的modal组件比较局限，只能适用于少部分较为简单的情景，很多情况下还是需要自定义，然后就写了一个自定义的左右布局的自定义模态框，效果展示如下图所示：

自定义模态框.gif

• 页面布局

自定义模态框分为左右两侧，两侧都是采用绝对定位的方式 image.png

• 然后就是单选的问题了

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
    })
  },
})

本篇分享就到这里了，如果你在这篇文章里发现了什么问题或者说有更好的建议，可以评论哦