微信小程序地址选择插件

发表于 | 更新于

官方封装的地址picker无法自定义样式 官方地址
所以自己网上找了下大神的代码自己再改改封装了一个组件 项目地址

wxml代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<view class="mask" wx:if="{{show}}" bindtap="cancel" catchtouchmove='preventTouchMove'>
</view>
<view class='pickercontent'>
  <view class='{{aniType?"slidedown":"slideup"}}' wx:if="{{show}}" style="background:#fff;">
    <view style="display:flex;justify-content:space-between;padding:0 42rpx 0 42rpx;height:100rpx;align-items:center;border: 1px solid #CCCCCC;">
      <text bindtap="cancel" style="color: #999999;font-size:30rpx;">取消</text>
      <text style='font-size:30rpx;'>选择{{areatype}}</text>  
      <text style="color: #0086D1;font-size:30rpx;" bindtap="confirm">确定</text>     
    </view>
    <picker-view  indicator-style="height:50px;"  style="width:100%;height:440rpx;"  bindchange="handleNYZAreaChange" value="{{[10,0,0]}}">
    <picker-view-column>
      <view  wx:for="{{provinces}}" style="line-height:100rpx;text-align:center;font-size:30rpx;">{{item}}</view>
    </picker-view-column>
    <picker-view-column>
      <view wx:for="{{citys}}" style="line-height:100rpx;text-align:center;font-size:30rpx;">{{item}}</view>
    </picker-view-column>
    <picker-view-column>
      <view  wx:for="{{areas}}" style="line-height:100rpx;text-align:center;font-size:30rpx;">{{item}}</view>
    </picker-view-column>
  </picker-view>
 </view>
</view>

js部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
var areaTool = require('../../utils/area.js');
var index = [10,0,5]
var provinces = areaTool.getProvinces();
var citys = areaTool.getCitys(index[0]);
var areas = areaTool.getAreas(index[0],index[1]);
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    areatype:{
      type:String,
      value:"地区"
    },
    show:{//显示组件
      type:Boolean,
      value:false
    },
    aniType:{//动画类型
      type:Boolean,
      value:true
    }

  },

  /**
   * 组件的初始数据
   */
  data: {
     province: '浙江省',
     city: '杭州市',
     area: '拱墅区',
     provinces: provinces,
     citys: areaTool.getCitys(index[0]),
     areas: areaTool.getAreas(index[0], index[1]),
  },

  /**
   * 组件的方法列表
   */
  methods: {
  //地区
    handleNYZAreaChange:function(e){
    var that = this;
    console.log("e:" + JSON.stringify(e));
    var value = e.detail.value;
    /**
     * 滚动的是省
     * 省改变 市、区都不变
     */
    if(index[0] != value[0]){
      index = [value[0],0,0]
      let selectCitys = areaTool.getCitys(index[0]);
      let selectAreas = areaTool.getAreas(index[0], 0);
      that.setData({
        citys: selectCitys,
        areas: selectAreas,
        value: [index[0],0,0],
        province: provinces[index[0]],
        city: selectCitys[0],
        area: selectAreas[0]
      })
    } else if (index[1] != value[1]){
      /**
       * 市改变了 省不变 区变
       */
      index = [value[0], value[1], 0]
      let selectCitys = areaTool.getCitys(index[0]);
      let selectAreas = areaTool.getAreas(index[0], value[1]);
      that.setData({
        citys: selectCitys,
        areas: selectAreas,
        value: [index[0], index[1], 0],
        province: provinces[index[0]],
        city: selectCitys[index[1]],
        area: selectAreas[0]
      })
    } else if (index[2] != value[2]){
      /**
       * 区改变了
       */
      index = [value[0], value[1], value[2]]
      let selectCitys = areaTool.getCitys(index[0]);
      let selectAreas = areaTool.getAreas(index[0], value[1]);
      that.setData({
        citys: selectCitys,
        areas: selectAreas,
        value: [index[0], index[1], index[2]],
        province: provinces[index[0]],
        city: selectCitys[index[1]],
        area: selectAreas[index[2]]
      })
    }
  },
   // 取消地区选择
   cancel(){
       var that=this;
       var index = [10,0,0]
       var provinces = areaTool.getProvinces();
       var citys = areaTool.getCitys(index[0]);
       var areas = areaTool.getAreas(index[0],index[1]);
       that.setData({aniType:false})
       setTimeout(function(){
         that.setData({show:false,provinces:provinces,citys:citys,areas:areas,province: '浙江省',city: '杭州市',area: '拱墅区'})
      },300)
   },
   //确定选择
   confirm(){
        var that=this;
        var index = [10,0,0]
        var provinces = areaTool.getProvinces();
        var citys = areaTool.getCitys(index[0]);
        var areas = areaTool.getAreas(index[0],index[1]);
        that.setData({aniType:false})
        setTimeout(function(){
            that.setData({show:false,provinces:provinces,citys:citys,areas:areas,province: '浙江省',city: '杭州市',area: '拱墅区'})
        },300)
        var viewArea=this.data.province+" "+this.data.city+" "+this.data.area
        var submitArea=this.data.province+","+this.data.city+","+this.data.area
        var data={
          viewArea:viewArea
        }
        this.triggerEvent("confirm",data);
   }
  }
})
0%