小程序+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
})
},

最后

以上就是直率老鼠为你收集整理的小程序+vant城市选择的全部内容，希望文章能够帮你解决小程序+vant城市选择所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。