小程序+vant城市选择

1、wxml中

<!-- 达人区域 -->
<view class="release_subtitle">达人区域</view>
<van-cell title="所在地区" value="{{userInfo.localtion}}" is-link size="large" bindtap="showModal" data-modalType="locationShow" title-class="title-class" value-class="value-class" custom-class="release_address" />

地区弹窗代码

<!-- ====== 地区弹窗 start ====== -->
<van-action-sheet show="{{ locationShow }}" bind:click-overlay="closeModal" data-modalType="locationShow">
  <view class="modal-content">
    <!-- 省市选择 -->
    <van-area area-list="{{ areaList }}" value="{{userInfo.area}}" title="选择所在地区" columns-num="{{ 2 }}" visible-item-count="3"  bind:confirm="areaSelect" bind:cancel="closeLocationModal"/>
  </view>
</van-action-sheet>
<!-- ====== 地区弹窗 end ====== -->

2、js中
引入地区数据

import areaList from '../../utils/areaList'

 /*
 *@Description: 地区选择弹窗
 *@MethodAuthor: LiJuncai
 *@Date: 2022-06-11 14:01:07
*/
areaSelect(e) {
  const code = e.detail.values[e.detail.values.length - 1].code;
  const area = "userInfo.area"
  const localtion = "userInfo.localtion"
  this.setData({
    [area]: code,
    [localtion]: e.detail.values.map(v => v.name).join(' '),
    locationShow: false
  })
},