框架是uview2.0

效果圖：

1、下載城市文件

文件：city.js? ?密碼2sq1

2、引入城市文件

文件放到項目的根目錄utils文件內了

代碼如下

html：

如果跟我一樣是在框架的form組件中使用 且存在input輸入框的情況下 可能會造成軟鍵盤和picker同時彈出的情況? ?這種情況可以參考uniapp小程序點擊輸入框時阻止彈出軟鍵盤

<u--form labelPosition="left"><u-form-item label="省市縣區:" borderBottom labelWidth="70" @tap="cityShow = true"><u--input v-model="cityName" border="none" placeholder="請選擇省市縣區"></u--input><!-- 城市選擇 --><u-picker :show="cityShow" ref="uPicker" :columns="cityList" @confirm="cityConfirm" @change="changeHandler" @cancel="cityShow = false"></u-picker></u-form-item> </u--form>

js：?

<script>// 導入城市js文件import cityData from '@/utils/city.js'export default {data() {return {cityName: "請選擇省市縣區",// 城市選擇器cityShow: false,// 打開選擇器顯示默認城市cityList: [],cityLevel1: [],cityLevel2: [],cityLevel3: [],};},onLoad() {// 城市選擇器初始化this.initCityData();},methods: {// 城市選擇器initCityData() {// 遍歷城市jscityData.forEach((item1, index1) => {let temp2 = [];this.cityLevel1.push(item1.provinceName);let temp4 = [];let temp3 = [];// 遍歷市item1.cities.forEach((item2, index2) => {temp2.push(item2.cityName);// 遍歷區item2.counties.forEach((item3, index3) => {temp3.push(item3.countyName);})temp4[index2] = temp3;temp3 = [];})this.cityLevel3[index1] = temp4;this.cityLevel2[index1] = temp2;})// 選擇器默認城市this.cityList.push(this.cityLevel1, this.cityLevel2[0], this.cityLevel3[0][0]);},// 選中時執行changeHandler(e) {const {columnIndex,index,indexs,value,values,// 微信小程序無法將picker實例傳出來，只能通過ref操作picker = this.$refs.uPicker} = e;if (columnIndex === 0) { // 選擇第一列數據時// 設置第二列關聯數據picker.setColumnValues(1, this.cityLevel2[index]);// 設置第三列關聯數據picker.setColumnValues(2, this.cityLevel3[index][columnIndex]);} else if (columnIndex === 1) { // 選擇第二列數據時// 設置第三列關聯數據picker.setColumnValues(2, this.cityLevel3[indexs[0]][index]);}},// 單擊確認按鈕時執行cityConfirm(e) {// 輸出數組 [省, 市, 區]console.log(e.value);this.cityName = e.value.join("-");// 隱藏城市選擇器this.cityShow = false;},}} </script>

總結

以上是生活随笔為你收集整理的uniapp小程序使用省市县区选择器picker的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。