微信小程序三级联动，非微信自带picker类型

叁歲伎倆 2022-12-17 12:57 225阅读 0赞

这里写的暂时不是一个组件，可以当做参考。如果有小伙伴有其他更好的解决方案或者优化地方可以提出来，效果如下：  
![在这里插入图片描述][2020102318000812.gif_pic_center]  
wxml：

<view class="">
      <view class="animation-button" bindtap="translate">地址:{ { contentadd}}</view>
      <view class="float { {isRuleTrue?'isRuleShow':'isRuleHide'}} ">
        <view class="animation-element" animation="{ {animation}}">
          <view class='animation-header'>
                <view class="left-title">选择地区</view>
                <view class="animation-button" catchtap="success">X</view>
          </view>
          <view class="title">
            <view class="area { {Province ? '':'active'}}" catchtap="provinceSelected">{ { Province ? Province : '请选择区'}}</view>
            <view class="area { {City ? '':'active'}}" catchtap="citySelected" >{ { City ? City:'请选择街道'}}</view>
            <view class="area { {District ? '' :'active'}}" catchtap="districtSelected" wx:if="City">{ { District ? District:'请选择社区'}}</view>
            <block wx:if="{ {fourList != null}}">
              <view class="area { {Dischildren ? '' :'active'}}" catchtap="districtSelectedChild" wx:if="District">{ { Dischildren ? Dischildren:'请选择'}}</view>
            </block>
          </view>
          <view class="isul">
            <view class="addList { {item.selected ? 'active' : ''}}" wx:key="key" wx:for="{ {info}}" catchtap="getProvinceId" wx:if="{ {showProvince}}"  data-value="{ {item.value}}" data-label="{ {item.label}}" data-index="{ {index}}">{ { item.label}}</view>
            <view class="addList { {item.selected ? 'active' : ''}}" wx:key="key" wx:for="{ {showCityList}}" catchtap="getCityId" wx:if="{ {showCity}}"  data-value="{ {item.value}}" data-label="{ {item.label}}" data-index="{ {index}}">{ { item.label}}</view>
            <view class="addList { {item.selected ? 'active' : ''}}" wx:key="key" wx:for="{ {showDistrictList}}" catchtap="getDistrictId" wx:if="{ {showDistrict}}"  data-value="{ {item.value}}" data-label="{ {item.label}}" data-index="{ {index}}">{ { item.label}}</view>
            <block wx:if="{ {fourList != null}}">
              <view class="addList { {item.selected ? 'active' : ''}}" wx:key="key" wx:for="{ {showChildrenList}}" catchtap="getChildrenId" wx:if="{ {showChildren}}"  data-value="{ {item.value}}" data-label="{ {item.label}}" data-index="{ {index}}">{ { item.label}}</view>
            </block>
          </view>
        </view>
      </view>
    </view>

js:（其中的数据就不在这里展示，感兴趣可以去下载https://github.com/myyezi/myapi/blob/master/shuju.js）

wxss:

.isRuleShow { 
      display: block;
    }
    
    .isRuleHide { 
      display: none;
    }
    .float { 
      height: 100%;
      width: 100%;
      position: fixed;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 2;
      top: 0;
      left: 0;
      /* margin-top:80rpx; */
    }
    
    .iconuse { 
      margin-left: 11rpx;
    }
    
    .iconprice { 
      margin-left: 11rpx;
    }
    
    .animation-reset{ 
    float: left;
     line-height: 2;
      width: 260rpx;
      margin: 15rpx 12rpx;
      border: 1px solid #f3f0f0;
      text-align: center;
    }
    .animation-header{ 
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20rpx 20rpx 0rpx 20rpx;
    }
    .left-title{ 
      font-size: 32rpx;
      color: #333;
      font-weight: bold;
    }
    .animation-button{ height: 60rpx;}
    .animation-button image{ 
        width: 60rpx;
        height: 60rpx;
    }
    /* */
    
    /* .animation-element { width: 750rpx; height: 920rpx; background-color: #ffffff; border: 1px solid #f3f0f0; position: absolute; left: 0; right: 0; bottom: 0; } */
    .animation-element{ 
      position:absolute;
      height: 920rpx;
      bottom:0;
      left:0;
      z-index:121;
      background:#fff;
      width:750rpx;
    }
    .title h4{ 
      display:inline-block;
      margin-left:3.2rem;
      font-size:0.32rem;
      line-height:0.88rem;
      font-weight:normal;
      color:#999;
    }
    .title span{ 
      margin:0.42rem 0 0 2.2rem;
      font-size:0.45rem;
      line-height:0.34rem;
      color:#D8D8D8;
    }
    .area{ 
      display:inline-block;
      font-size:32rpx;
      line-height:60rpx;
      margin-left:20rpx;
      color:#333;
    }
    .addList{ 
      /* width:100%; */
      padding-left: 28rpx;
      font-size: 34rpx;
      font-weight: bold;
      line-height:64rpx;
      color:#333;
    }
    /* 修改的格式 */
    .animation-element .isul{ 
      height:100%;
      max-height: 722rpx;
      overflow:auto;
      font-size: 28rpx;
    }
    /* .animation-element .isul view{ margin-left:5%; } */
    .animation-element .title{ 
      display: flex;
      flex-direction: row;
    }
    .animation-element .title .active{ 
      font-size: 32rpx;
      color:#0071B8;
      border-bottom:2rpx solid #0071B8;
    }
    .animation-element .isul .active{ 
      color:#0071B8;
    }

[2020102318000812.gif_pic_center]: /images/20221122/28131121cc804fe5a96ef7af9c0a2961.png