產品老哥對項目再一次進行關愛, 新增頁面, 新增需求, 很完美........
不多說, 記錄一下新增東西中的省市區聯動選擇, (這里全國地區信息是在本地, 但不建議這么做, 因為js文件太大.. 建議使用插件, 或者后台將地區信息返回前台)
先看一下效果圖
全國地區信息js文件(鏈接打開另存為即可) https://files.cnblogs.com/files/yk95/data.js ;
page頁面 (頁面中-- margin-t, bgc-f, ...等等是項目中公共樣式, 這里寫在頁面樣式中了 )
1 <template> 2 <view id="AddressAction"> 3 <view class="addressBox margin-t"> 4 <view class="name addressItem bgc-f border-b display-flex"> 5 <view class="left c-333 ">收貨人</view> 6 <input type="text" placeholder-class="placeholder" placeholder="請填寫收貨人姓名"></input> 7 </view> 8 <view class="phone addressItem bgc-f border-b display-flex"> 9 <view class="left c-333">手機號</view> 10 <input type="text" maxlength="11" placeholder="請填寫11位手機號"></input> 11 </view> 12 <view class="address addressItem bgc-f border-b display-flex" @tap.stop="selecteHandle"> 13 <view class="left c-333">省市區</view> 14 <view class="right"> 15 <text>{{areaInfo}}</text> 16 <text class="iconfont icon-arrow-right c-gray-time font-s26"></text> 17 </view> 18 </view> 19 <view class="address_detail addressItem bgc-f border-b display-flex"> 20 <view class="left c-333">詳細地址</view> 21 <input class="flex-1" type="text" placeholder="街道、樓牌號等"></input> 22 </view> 23 </view>
<!-- 這里使用組件 組件傳值以及組件通信--> 24 <selectedAddressView :isShow.sync="isShow" :provinces.sync="provinces" :citys.sync="citys" :areas.sync="areas" :value.sync="value" 25 @cancel.user="cancelHandle" @sure.user="sureHandle"></selectedAddressView> 26 <view></view> 27 </view> 28 </template> 29 <script> 30 import wepy from 'wepy'; 31 import address from '@/utils/data'; //引入全國地區信息js文件 32 import selectedAddressView from '@/components/selectedAddress'; //引入三級聯動組件 33 export default class sAddressAction extends wepy.page{ 34 config = { 35 navigationBarTitleText: "" 36 } 37 components = { 38 selectedAddressView //聲名組件 39 } 40 data = { 41 isShow: false, // 三級聯動組件是否可見 ,組件傳值 42 value: [0, 0, 0], // 對應 picker-view中change()事件中的e.detail.value, 用來做判斷; 組件傳值 43 provinces: [], //所有省份 provinces; 組件傳值 44 citys: [], // 選擇省對應的所有市; 組件傳值 45 areas: [], // 選擇市對應的所有區; 組件傳值 46 areaInfo: '', //點擊確定是選擇的地址信息 47 } 48 init() { //初始化三級聯動信息 49 let that = this; 50 let id = address.provinces[0].id; //默認聯動顯示北京 51 that.provinces = address.provinces; 52 that.citys = address.citys[id]; 53 that.areas = address.areas[address.citys[id][0].id]; 54 } 55 onLoad() { 56 this.init(); 57 } 58 methods = { 59 selecteHandle() { 60 this.isShow = true; 61 this.$apply(); 62 }, 63 cancelHandle() { 64 this.isShow = false; 65 this.$apply(); 66 }, 67 sureHandle(areaInfo) { 68 this.isShow = false; 69 this.areaInfo = areaInfo; 70 this.$apply(); 71 } 72 73 } 74 } 75 </script> 76 <style lang="less"> 77 .addressItem{ 78 padding: 0 54rpx 0 48rpx; 79 .left{ 80 width: 126rpx; 81 height: 100rpx; 82 line-height: 100rpx; 83 margin-right: 20rpx; 84 } 85 .right{ 86 width: 100%; 87 height: 100rpx; 88 line-height: 100rpx; 89 text-align: right; 90 } 91 input{ 92 text-align: right; 93 width: 100%; 94 height: 100rpx; 95 line-height: 100rpx; 96 font-size: 32rpx; 97 } 98 } 99 .margin-t{ margin-top: 20rpx; } 100 .bgc-f { background-color: #ffffff } 101 .border-b { border-bottom: 1px solid #999999; } 102 .display-flex{ display: flex; } 103 .flex-1{ flex: 1; } 104 .c-333 { color: #333333; } 105 .c-gray-time { color: #999999; } 106 .font-s26 { font-size: 26rpx; } 107 </style>
組件頁面
1 <template> 2 <view class="selectedAddress" wx:if="{{isShow}}"> 3 <view class="btnBox"> 4 <text @tap.stop="btnCancelHandle">取消</text> 5 <text style="folat: right" @tap.stop="btnSureHandle">確定</text> 6 </view> 7 <!-- picker-view 的change事件 --> 8 <picker-view class="pickerBox" value="{{value}}" bindchange="selectedAddressHandle"> 9 <!-- 省 --> 10 <picker-view-column> 11 <repeat for="{{provinces}}"> 12 <view class="picker-item">{{item.name}}</view> 13 </repeat> 14 </picker-view-column> 15 <!-- 市 --> 16 <picker-view-column> 17 <repeat for="{{citys}}"> 18 <view class="picker-item">{{item.name}}</view> 19 </repeat> 20 </picker-view-column> 21 <!-- 區 --> 22 <picker-view-column> 23 <repeat for="{{areas}}"> 24 <view class="picker-item">{{item.name}}</view> 25 </repeat> 26 </picker-view-column> 27 </picker-view> 28 <view></view> 29 </view> 30 </template> 31 <script> 32 import wepy from 'wepy'; 33 import address from '@/utils/data'; //引入全國地區信息 34 export default class selectedAddress extends wepy.component { 35 // props 接收父組件傳遞過來的值 36 props = { 37 provinces: { //省數據 38 type: Array, 39 default: [], 40 }, 41 citys: { //市數據 42 type: Array, 43 default: [], 44 }, 45 areas: { //區數據 46 type: Array, 47 default: [], 48 }, 49 value: { 50 type: Array, 51 default: [0, 0, 0], 52 }, 53 isShow: { 54 type: Boolean, 55 default: false 56 } 57 } 58 59 components = {} 60 61 data = { 62 63 } 64 onLoad() {} 65 computed = {} 66 methods = { 67 btnCancelHandle() { //點擊取消, $emit通知父組件page頁面, 68 this.$emit('cancel'); 69 }, 70 btnSureHandle() { //點擊確定, $emit通知父組件page頁面, 並將選擇的省市區發送給父組件 71 let value = this.value; 72 let areaInfo = this.provinces[value[0]].name + '·' + this.citys[value[1]].name + '·' + this.areas[value[2]].name; 73 this.$emit('sure', areaInfo); 74 75 }, 76 selectedAddressHandle(e) { //picker-view的 change事件 處理三級聯動 77 let that = this; 78 let e_value = e.detail.value; 79 let provinceNum = e_value[0]; 80 let cityNum = e_value[1]; 81 let areaNum = e_value[2]; 82 console.log("組件",e_value); 83 console.log('數組', provinceNum + '--' + cityNum + '--' + areaNum); 84 if (that.value[0] != provinceNum){ //第一列滾動處理 85 let id = that.provinces[provinceNum].id; 86 that.value = [provinceNum, 0, 0]; 87 that.citys = address.citys[id]; 88 that.areas = address.areas[address.citys[id][0].id]; 89 that.$apply(); //that.$apply() 更新數據 和原生小程序的this.setData({})作用一樣 90 91 } else if (that.value[1] != cityNum) { //第二列滾動處理 92 let id = that.citys[cityNum].id; 93 that.value = [provinceNum, cityNum, 0]; 94 that.areas = address.areas[id]; 95 that.$apply(); 96 } else if (that.value[2] != areaNum) { //第三列處理 97 that.value = [provinceNum, cityNum, areaNum]; 98 that.$apply(); 99 } 100 } 101 } 102 event = {} 103 } 104 </script> 105 <style lang="less"> 106 .selectedAddress{ 107 width: 100%; 108 display: flex; 109 z-index: 99; 110 background-color: #ffffff; 111 background: rgba(0, 0, 0, .2); 112 flex-direction: column; 113 justify-content: center; 114 align-items: center; 115 position: fixed; 116 bottom: 0; 117 left: 0; 118 height: 40vh; 119 } 120 .btnBox{ 121 width: 100%; 122 height: 90rpx; 123 padding: 0 24rpx; 124 box-sizing: border-box; 125 line-height: 90rpx; 126 text-align: center; 127 display: flex; 128 background: rgba(255, 255, 255, .8); 129 justify-content: space-between; 130 } 131 .pickerBox{ 132 width: 100%; 133 height: 389rpx; 134 .picker-item{ 135 line-height: 70rpx; 136 margin-left: 5rpx; 137 margin-right: 5rpx; 138 text-align: center; 139 } 140 } 141 </style>
結語: 這是在小程序wepy框架中使用的, 如果要在原生小程序中使用, 可以作為參考,自己進行修改;
由於本人踏入前端時間不長(半年的時間), 如果文章寫得有錯誤的地方,實在抱歉,也請您留言指出錯誤,我會第一時間修改.
努力努力再努力, 加油!!