小程序仿淘宝五级地址选择

简单直接上图

Untitled1.gif

实现方式

1.界面布局

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
}

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