简单直接上图

Untitled1.gif

实现方式

1.界面布局

<view class='bottom_picker_view' catchtouchmove="ture" hidden='{{hidden}}'>

  <view class='selected_view' style="height: {{widHeight * 8 / 9}}rpx;">

    <view class='selected_top_view' style="height: {{100 + (85 * areaList.length)}}rpx;">
      <view class='selected_top_title_view'>
        请选择
      </view>
      <view class='district_item_view' wx:for="{{areaList}}" wx:for-index="idx" wx:for-item="itemName" wx:key="districtList">
      <view class='left_line_view'>
        <view wx:if='{{idx == 0}}' class='line_white_view'></view>
        <view wx:else class='line_view'></view>
        <view class='circle_view'></view>
        <view wx:if='{{idx == 4}}' class='line_white_view'></view>
        <view wx:else class='line_view'></view>
      </view>
      <view class='district_view {{currentLevel == idx ?  "selectedView"  : ""}}' bindtap='selected_cell_tap' data-index='{{idx}}'>{{itemName}}</view>
      </view>

    </view>

    <view class='selected_bottom_view'>

    <scroll-view scroll-y class='selected_scrollview' style="height: {{widHeight * 8 / 9 - 100 - (85 * areaList.length)}}rpx;">

      <view class='selected_title_view'>选择省市区</view>

      <view class='cell_view' wx:for="{{currentArray}}" wx:for-index="idx" wx:for-item="itemName" wx:key="selectedList" bindtap='cell_tap' data-obj='{{itemName}}' data-index='{{idx}}'>{{itemName.text}}</view>
    </scroll-view>
      
    </view>

  </view>

</view>

wxss最好使用弹性布局，更好适配界面

.bottom_picker_view {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.6);
  /* background-color: rgb(148, 143, 143);filter:Alpha(Opacity=60);   opacity:0.6; */
  
}
.selected_view {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 20rpx 20rpx 0 0;
  background-color: #fff;
}

.selected_top_title_view {
  width: 100%;
 text-align: center;
 padding:  20rpx 0;
}
.district_item_view {
  padding-top: 14rpx;
  font-size: 44rpx;
  display: flex;
  padding: 0 20rpx;
  /* border-bottom: 1px #66CC99 solid; */
}

/* 左侧的竖线 */
.left_line_view {
  /* display: flex; */
  flex-direction: column;
  height:80rpx;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  /* background-color: red; */
  
}
.line_white_view {
  background-color: white;
  width: 2rpx;
  height: 40rpx;
  margin: 0;
  padding: 0;
  margin-left: 9rpx;
  /* flex: 1; */
}
.circle_view {
  /* display: block; */
  background-color: #47B7FB;
  width: 20rpx;
  height: 20rpx;
  border-radius: 10rpx;
  /* flex: 1; */
}
.line_view {
  width: 2rpx;
  height: 30rpx;
  background-color: #47B7FB;
  margin: 0;
  padding: 0;
  margin-left: 9rpx;
  /* flex: 1; */
}
.district_view {
  margin-left: 40rpx;
  /* background-color: yellow; */
  height: 80rpx;
  line-height: 80rpx;
}
/* 选中层级的颜色 */
.selectedView {
  color: #47B7FB;
}


.selected_bottom_view {
  background-color: whitesmoke;
}

.selected_title_view {
  background-color: whitesmoke;
  text-align: center;
  height: 80rpx;
  line-height: 80rpx;
}

.selected_scrollview {
  background-color: whitesmoke;
}
.cell_view {
  padding-left: 20rpx;
  height: 100rpx;
  line-height: 100rpx;
  font-size: 42rpx;
}

2.实现上下两个界面点击事件即可

 // 底部列表 选中点击事件
  cell_tap: function (e){
    // console.log(e.currentTarget.dataset);
    var index = e.currentTarget.dataset.index
    var model = e.currentTarget.dataset.obj

    if (!model.id) return;
}

 // 修改选择省市区
  selected_cell_tap: function (e){
    var index = e.currentTarget.dataset.index
}

数据结构式采用🌲树状形式，一层一层，逐级向下。