uniapp城市列表_uni-app省市区选择器

现在大多数的省市区选择器都是三级滚动联动的，有时候可能不是我们所想要的，所以就自己做了一个选择器，效果如下：

20191109095738520.png

具体实现代码如下：

需要导入省市区的数据city.area.js以及弹窗组件uni-pop.vue，

city.area.js文件在百度网盘，如需要请自取(链接：https://pan.baidu.com/s/1V7hYksMtOH96UpwAy_nEPw

提取码：adds)

{ {item.txt}}—

选择地区

X

:key="index">

{ {item.txt}}

{ {item.name}}√

{ {item.name}}√

{ {item.name}}√

import cityDatas from '../../components/mpvue-citypicker/city-data/city.area.js'

import uniPopup from '@/components/uni-popup/uni-popup.vue'

export default {

components: {

uniPopup

},

data() {

return {

provinceData: cityDatas,

cityData: [],

areaData: [],

selectList: [{

txt: '请选择'

}, {

txt: '请选择'

}, {

txt: '请选择'

}],

tabOne: '请选择',

indexTab: 0,

proviceShow: true,

areaShow: false,

cityShow: false,

show: false,

type: '',

checkOne: null,

checkTwo: null,

checkThree: null,

}

},

onLoad() {

},

watch: {

},

methods: {

togglePopup(type, open) {

this.type = type

if (open === 'tip') {

this.show = true

} else {

this.$refs[open].open()

}

},

cancel(type) {

if (type === 'tip') {

this.show = fal