小程序--wepy省市区三级联动选择

产品老哥对项目再一次进行关爱, 新增页面, 新增需求, 很完美........

不多说, 记录一下新增东西中的省市区联动选择, (这里全国地区信息是在本地, 但不建议这么做, 因为js文件太大.. 建议使用插件, 或者后台将地区信息返回前台)

先看一下效果图

全国地区信息js文件(链接打开另存为即可) https://files.cnblogs.com/files/yk95/data.js ; 

page页面 (页面中-- margin-t, bgc-f, ...等等是项目中公共样式,  这里写在页面样式中了 )

 <template>
     <view id="AddressAction">
         <view class="addressBox margin-t">
             <view class="name addressItem bgc-f border-b display-flex">
                 <view class="left c-333 ">收货人</view>
                 <input type="text" placeholder-class="placeholder" placeholder="请填写收货人姓名"></input>
             </view>
             <view class="phone addressItem bgc-f border-b display-flex">
                 <view class="left c-333">手机号</view>
                 <input type="text" maxlength="11" placeholder="请填写11位手机号"></input>
             </view>
             <view class="address addressItem bgc-f border-b display-flex" @tap.stop="selecteHandle">
                 <view class="left c-333">省市区</view>
                 <view class="right">
                     <text>{{areaInfo}}</text>
                     <text class="iconfont icon-arrow-right c-gray-time font-s26"></text>
                 </view>
             </view>
             <view class="address_detail addressItem bgc-f border-b display-flex">
                 <view class="left c-333">详细地址</view>
                 <input class="flex-1" type="text" placeholder="街道、楼牌号等"></input>
             </view>
         </view>
　　　　　　　　<!-- 这里使用组件 组件传值以及组件通信-->
         <selectedAddressView :isShow.sync="isShow" :provinces.sync="provinces" :citys.sync="citys" :areas.sync="areas" :value.sync="value"
                     @cancel.user="cancelHandle" @sure.user="sureHandle"></selectedAddressView>
         <view></view>
     </view>
 </template>
 <script>
 import wepy from 'wepy';
 import address from '@/utils/data'; //引入全国地区信息js文件
 import selectedAddressView from '@/components/selectedAddress'; //引入三级联动组件
 export default class sAddressAction extends wepy.page{
     config = {
         navigationBarTitleText: ""
     }
     components = {
         selectedAddressView  //声名组件
     }
     data = {
         isShow: false,   // 三级联动组件是否可见  ,组件传值
         value: [0, 0, 0], // 对应 picker-view中change()事件中的e.detail.value, 用来做判断; 组件传值
         provinces: [],   //所有省份 provinces; 组件传值
         citys: [],    // 选择省对应的所有市; 组件传值
         areas: [],   // 选择市对应的所有区; 组件传值
         areaInfo: '', //点击确定是选择的地址信息
     }
     init() { //初始化三级联动信息
         let that = this;
         let id = address.provinces[0].id; //默认联动显示北京
         that.provinces = address.provinces;
         that.citys = address.citys[id];
         that.areas = address.areas[address.citys[id][0].id];
     }
     onLoad() {
         this.init();
     }
     methods = {
         selecteHandle() {
             this.isShow = true;
             this.$apply();
         },
         cancelHandle() {
             this.isShow = false;
             this.$apply();
         },
         sureHandle(areaInfo) {
             this.isShow = false;
             this.areaInfo = areaInfo;
             this.$apply();
         }
 
     }
 }
 </script>
 <style lang="less">
     .addressItem{
         padding: 0 54rpx 0 48rpx;
         .left{
             width: 126rpx;
             height: 100rpx;
             line-height: 100rpx;
             margin-right: 20rpx;
         }
         .right{
             width: 100%;
             height: 100rpx;
             line-height: 100rpx;
             text-align: right;
         }
         input{
             text-align: right;
             width: 100%;
             height: 100rpx;
             line-height: 100rpx;
             font-size: 32rpx;
         }
     }
     .margin-t{ margin-top: 20rpx; }
     .bgc-f { background-color: #ffffff }
     .border-b { border-bottom: 1px solid #999999; }
     .display-flex{ display: flex; }
     .flex-1{ flex: 1; }
     .c-333 { color: #333333; }
     .c-gray-time { color: #999999; }
     .font-s26 { font-size: 26rpx; }
 </style>

组件页面

 <template>
     <view class="selectedAddress" wx:if="{{isShow}}">
         <view class="btnBox">
             <text @tap.stop="btnCancelHandle">取消</text>
             <text style="folat: right" @tap.stop="btnSureHandle">确定</text>
         </view>
         <!-- picker-view 的change事件 -->
         <picker-view class="pickerBox" value="{{value}}" bindchange="selectedAddressHandle">
             <!-- 省 -->
             <picker-view-column>
                 <repeat for="{{provinces}}">
                     <view class="picker-item">{{item.name}}</view>
                 </repeat>
             </picker-view-column>
             <!-- 市 -->
             <picker-view-column>
                 <repeat for="{{citys}}">
                     <view class="picker-item">{{item.name}}</view>
                 </repeat>
             </picker-view-column>
             <!-- 区 -->
             <picker-view-column>
                 <repeat for="{{areas}}">
                     <view class="picker-item">{{item.name}}</view>
                 </repeat>
             </picker-view-column>
         </picker-view>
         <view></view>
     </view>
 </template>
 <script>
 import wepy from 'wepy';
 import address from '@/utils/data';  //引入全国地区信息
 export default class selectedAddress extends wepy.component {
     //    props 接收父组件传递过来的值
     props = {
            provinces: {  //省数据
                type: Array,
                default: [],
            },
            citys: {   //市数据
                type: Array,
                default: [],
            },
            areas: {  //区数据
                type: Array,
                default: [],
            },
            value: {
                type: Array,
                default: [0, 0, 0],
            },
         isShow: {
             type: Boolean,
             default: false
         }
     }
 
     components = {}
 
     data = {
 
     }
     onLoad() {}
     computed = {}
     methods = {
         btnCancelHandle() {  //点击取消, $emit通知父组件page页面,
             this.$emit('cancel');
         },
         btnSureHandle() {    //点击确定, $emit通知父组件page页面, 并将选择的省市区发送给父组件
             let value = this.value;
             let areaInfo = this.provinces[value[0]].name + '·' + this.citys[value[1]].name + '·' + this.areas[value[2]].name;
             this.$emit('sure', areaInfo);
 
         },
         selectedAddressHandle(e) {  //picker-view的 change事件  处理三级联动
             let that = this;
             let e_value = e.detail.value;
             let provinceNum = e_value[0];
             let cityNum = e_value[1];
             let areaNum = e_value[2];
             console.log("组件",e_value);
             console.log('数组', provinceNum + '--' + cityNum + '--' + areaNum);
             if (that.value[0] != provinceNum){   //第一列滚动处理
                 let id = that.provinces[provinceNum].id;
                 that.value = [provinceNum, 0, 0];
                 that.citys = address.citys[id];
                 that.areas = address.areas[address.citys[id][0].id];
                 that.$apply();  //that.$apply() 更新数据 和原生小程序的this.setData({})作用一样
 
             } else if (that.value[1] != cityNum) { //第二列滚动处理
                 let id = that.citys[cityNum].id;
                 that.value = [provinceNum, cityNum, 0];
                 that.areas = address.areas[id];
                 that.$apply();
             } else if (that.value[2] != areaNum) { //第三列处理
                 that.value = [provinceNum, cityNum, areaNum];
                 that.$apply();
             }
         }
     }
     event = {}
 }
 </script>
 <style lang="less">
     .selectedAddress{
         width: 100%;
         display: flex;
         z-index: 99;
         background-color: #ffffff;
         background: rgba(0, 0, 0, .2);
         flex-direction: column;
         justify-content: center;
         align-items: center;
         position: fixed;
         bottom: 0;
         left: 0;
         height: 40vh;
     }
     .btnBox{
         width: 100%;
         height: 90rpx;
         padding: 0 24rpx;
         box-sizing: border-box;
         line-height: 90rpx;
         text-align: center;
         display: flex;
         background: rgba(255, 255, 255, .8);
         justify-content: space-between;
     }
     .pickerBox{
         width: 100%;
         height: 389rpx;
         .picker-item{
             line-height: 70rpx;
             margin-left: 5rpx;
             margin-right: 5rpx;
             text-align: center;
         }
     }
 </style>

结语: 这是在小程序wepy框架中使用的, 如果要在原生小程序中使用, 可以作为参考,自己进行修改; 

　　  由于本人踏入前端时间不长(半年的时间), 如果文章写得有错误的地方,实在抱歉,也请您留言指出错误,我会第一时间修改.

　　  努力努力再努力, 加油!!