小程序选择地区左右联动

wxml

<view class="header">
  <view>
    <view style="height: {{navObj}}px;line-height: {{navObj}}px;padding-top: {{navTop}}px;padding-right:{{navObjWidth+5}}px;display: flex;align-items: center;">
      <view class="head-back flex-row j_b" style="margin-top: 10rpx;">
        <image src="../../../../images/icon/return.png" mode="aspectFill" catchtap="handleBackClick" />
      </view>
      <view style="margin-left: 130rpx;">城市选择</view>
    </view>
  </view>
</view>
<view class="map">
    <view class="map_top">当前选择：<text style="color: #000;">{{address.city?address.city:address.province}}</text></view>
    <view class="map_city">
        <view>热门城市</view>
        <view style="display: flex;flex-wrap: wrap;margin-top: 20rpx;">
            <view class="city_vo" wx:for="{{mapList.hot}}" wx:key="index" bind:tap="goDetail" data-item="{{item}}">{{item.name}}</view>
        </view>
    </view>
    <view style="padding: 40rpx 3%;color: #999;">全部城市</view>
    <view class="con flex">
        <scroll-view scroll-y="true" class="c_left">
            <block wx:for="{{mapList.all}}" wx:key="index">
                <view catchtap="choseTab" data-index="{{index}}" class="flex-column j_c tab_item {{chosed_tab==index?'ative':''}}">{{item.name}}</view>
            </block>
        </scroll-view>
        <view scroll-y="true" class="c_right">
            <scroll-view scroll-y="true" class="c_right_sc">
                <view class="theme_box">
                    <block wx:for="{{mapList.all[chosed_tab].children}}" wx:key="index" wx:for-item="vo">
                        <view class="theme_item" bind:tap="goDetail" data-item="{{vo}}">
                            <view class="item">{{vo.name}}</view>
                        </view>
                    </block>
                </view>
            </scroll-view>

        </view>
    </view>
    <!-- <view style="height: 20rpx;"></view> -->
</view>

js

var util = require('/utils/util')
const app = getApp();
Page({

    /**
     * 页面的初始数据
     */
    data: {
        // 导航栏高度
        navHeight: app.globalData.navHeight,
        // 导航栏距离顶部距离
        navTop: app.globalData.navTop,
        // 胶囊的高度
        navObj: app.globalData.navObj,
        // 胶囊宽度+距右距离
        navObjWid: app.globalData.navObjWid,
        mapList: '',
        chosed_tab: 0,
        address: '',
        showPage1: true
    },
    handleBackClick() {
        if (wx.getStorageSync('location') == '') {
            wx.showModal({
                title: '提示',
                content: '请选择城市',
                showCancel: false,
                mask: true,
                success(res) {
                    if (res.confirm) {
                    }
                }
            })
        } else {
            wx.switchTab({
                url: '/pages/index/index',
            })
        }

    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        let address = wx.getStorageSync('location')
        this.setData({
            address: address
        })
        this.getMap()

    },
    getMap() {
        let that = this
        wx.showLoading({
            title: '加载中...'
        })
        wx.request({
            url: 'https://接口',
            method: 'GET',
            header: {
              TenantToken: 你的token
            },
            data: '',
            success: function (res) {
              console.log(res, "res")
              if (res.data.code == 1) {
                that.setData({
                    mapList: res.data.data
                })
                wx.hideLoading()
              }
            },
          })

    },
    goDetail(e) {
        console.log(e.currentTarget.dataset.item)
        let item = e.currentTarget.dataset.item
        let location = {
            code: item.code,
            city: item.name,
            // parentCode: item.parentCode
            // parentCode: ''
        }
        wx.setStorageSync('location', location)
        setTimeout(() => {
            wx.navigateBack({
                delta: 1
            })
        }, 500)
    },
    choseTab(e) {
        let {
            index
        } = e.currentTarget.dataset;
        if (this.data.chosed_tab === index || index === undefined) {
            return false;
        } else {
            this.setData({
                chosed_tab: index,
            })
        }
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {
        if (wx.getStorageSync('location') == '') {
            wx.showModal({
                title: '提示',
                content: '请选择城市',
                showCancel: false,
                mask: true,
                success(res) {
                    // if (res.confirm) {
                    wx.reLaunch({
                        url: '还是此页面',
                    })
                    // }
                }
            })
        }

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {

    }
})

json

{
	"usingComponents": {},
	"navigationStyle": "custom"
	}

wxss

page{
    background-color: #f9f9f9;
}
.map{
    /* width: 94%; */
    /* padding: 0 3%; */
}
.map_top{
    width: 94%;
    padding: 0 3%;
    height: 100rpx;
    line-height: 100rpx;
    background-color: #fff;
    color: #999;
}
.map_city{
    width: 94%;
    padding: 40rpx 3%;
    color: #999;

}
.city_vo{
    width: 23%;
    color: #333;
    height: 70rpx;
    line-height: 70rpx;
    border-radius: 30rpx;
    background-color: #fff;
    text-align: center;
    margin: 20rpx 6rpx 0;
}
.flex {
    display: flex;
    align-items: flex-start;
}
.c_left {
    width: 32%;
    height: calc(100vh - 110rpx);
  }
  
  .c_right {
    flex: 1;
    height: calc(100vh - 110rpx);
    width: 68%;
    background-color: #fff;
  }
  
  .tab_item {
    height: 120rpx;
    line-height: 120rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: #666666;
    text-align: center;
  }
  
  .ative {
    /* color: #db4e0c; */
    background: #fff;
  }
  
  .theme_box {
    /* margin: 31rpx auto; */
    width: 100%;
    background-color: #fff;
  }
  
  .theme_item {
    display: flex;
    width: 96%;
    margin: 25rpx 2%;
    
  }
  .item{
      height: 80rpx;
      line-height: 80rpx;
      margin-left: 20rpx;
  }
 
.header {
    width: 100%;
    position: relative;
  }
  
  .header .header-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    clip-path: ellipse(95% 50% at 50% 35%);
  }
  
  .head-back {
    padding: 0 20rpx;
    box-sizing: border-box;
    border-radius: 50rpx;
    /* border: 1rpx solid rgba(204, 204, 204, .6); */
    width: 170rpx;
    /* margin-left: 25rpx; */
    position: relative;
  }
  
  .head-back image {
    width: 40rpx;
    height: 40rpx;
  }
  
  .head-back::after {
    content: '';
    position: absolute;
    width: 2rpx;
    height: 80%;
    background: #fff;
    left: calc(50% - 1rpx);
    top: 10%;
  }

 代码可直接粘贴复用，关于导航栏高度 胶囊高度...可翻前几篇帖子都有封装

onUnload里是监听退出时有没有选地址，没有的话强制留在本页面，当然wx.reLaunch里路径要写对，还是本页面...