微信小程序地址选择组件

先上效果图

这是一个地址选择组件    点击选择地址  启动组件选择完成  返回组件中选择的地址

首先先写组件代码   getAddress.js

var city = require('../../utils/city.js')
Component({

  properties: {
    locationArr: {
      type: Array,
      value: '',
      observer: function(newVal, oldVal) {
        console.log('我是传递进入的省', newVal)
      }
    },
  },

  data: {
    // 弹窗显示控制
    isShowToast: true,
    nameArr: ['请选择', '', ''],
    currentTab: 0, // tab切换 
    provinceArr: [],
    provinceIndex: 0,
    cityArr: [],
    cityIndex: 0,
    countryArr: [],
    countryIndex: 0,
  },

  methods: {

    //隐藏
    hideGoodsDetail: function() {
      var that = this

      that.setData({
        isShowToast: true
      })
    },

    //显示
    showsGoodsDetail: function() {
      var that = this
      var tempLocalArr = that.properties.locationArr //传入的省市区
      var tempNameArr = that.data.nameArr //顶部省市区

      that.setData({
        isShowToast: false
      })
      console.log('我是传入的值')
      console.log(tempLocalArr)

      this.setData({
        provinceArr: city.getProvince()
      });
      console.log(city.getProvince())
      //是否传入地址 传入则显示当前地址   为传入则显示之前地址
      if (tempLocalArr[0] == '' || tempLocalArr[1] == '' || tempLocalArr[2] == '') {
        console.log('我是未传入地址')
      } else {
        console.log('我是传入了地址')

        tempNameArr[0] = tempLocalArr[0]
        tempNameArr[1] = tempLocalArr[1]
        tempNameArr[2] = tempLocalArr[2]
        var tempProvinceIndex = that.data.provinceArr.indexOf(tempLocalArr[0]) //省索引
        var tempCityArr = city.getCity(that.data.provinceArr[tempProvinceIndex]) //市
        var tempCityIndex = tempCityArr.indexOf(tempLocalArr[1]) //市索引
        var tempCountryArr = city.getArea(that.data.provinceArr[tempProvinceIndex], tempCityArr[tempCityIndex]) //区
        var tempCountryIndex = tempCountryArr.indexOf(tempLocalArr[2]) //区索引
        that.setData({
          nameArr: tempNameArr,
          provinceIndex: tempProvinceIndex,
          cityArr: tempCityArr,
          cityIndex: tempCityIndex,
          countryArr: tempCountryArr,
          countryIndex: tempCountryIndex,
          currentTab: 0,
        })

      }
    },

    //改变省
    provinceChange: function(e) {
      var that = this
      var tempNameArr = that.data.nameArr

      console.log(e.currentTarget.dataset.index)
      console.log(e.currentTarget.dataset.item)
      tempNameArr[0] = that.data.provinceArr[e.currentTarget.dataset.index]
      tempNameArr[1] = '请选择'
      tempNameArr[2] = ''
      that.setData({
        provinceIndex: e.currentTarget.dataset.index,
        nameArr: tempNameArr,
        countryArr: [],
        countryIndex: 0,
      })
      //获取市
      this.setData({
        cityArr: city.getCity(that.data.provinceArr[that.data.provinceIndex]),
        currentTab: 1,

      });
      console.log(that.data.cityArr)
    },

    //改变市
    cityChange: function(e) {
      var that = this
      var tempNameArr = that.data.nameArr

      tempNameArr[0] = that.data.provinceArr[that.data.provinceIndex]
      tempNameArr[1] = that.data.cityArr[e.currentTarget.dataset.index]
      tempNameArr[2] = '请选择'
      that.setData({
        cityIndex: e.currentTarget.dataset.index,
        nameArr: tempNameArr
      })
      //获取区
      this.setData({
        countryArr: city.getArea(that.data.provinceArr[that.data.provinceIndex], that.data.cityArr[that.data.cityIndex]),
        currentTab: 2
      });
    },


    //改变区区/县
    districtChange: function(e) {
      var that = this
      var tempNameArr = that.data.nameArr

      tempNameArr[0] = that.data.provinceArr[that.data.provinceIndex]
      tempNameArr[1] = that.data.cityArr[that.data.cityIndex]
      tempNameArr[2] = that.data.countryArr[e.currentTarget.dataset.index]
      that.setData({
        countryIndex: e.currentTarget.dataset.index,
        nameArr: tempNameArr,
        isShowToast: true,
        currentTab: 0
      })

      //关闭并返回
      this.triggerEvent('resultEvent', {
        nameArr: that.properties.nameArr
      })
      console.log(that.data.provinceArr[that.data.provinceIndex])
      console.log(that.data.cityArr[that.data.cityIndex])
      console.log(that.data.countryArr[that.data.countryIndex])
      //关闭并返回  省市区
    },

    // 截获竖向滑动  2018年7月5日19:55:40  刘宣亮
    catchTouchMove: function(res) {
      return false
    },

    // 点击tab切换   2018年7月5日19:59:30 刘宣亮
    navbarTap: function(e) {
      var that = this

      that.setData({
        currentTab: e.currentTarget.dataset.index,
      })
      console.log(e.currentTarget.dataset.index)
    },
  }
})

getAddress.json

{
  "component": true,
  "usingComponents": {}
}

getAddress.wxml

<view class="goods-detail" hidden="{{isShowToast}}">
  <view class="mask" bindtap="hideGoodsDetail"></view>
  <view class="goodsdetail">
    <!-- <view class='goodsdetail-title'></view> -->
    <view class='goodsdetail-top'>
      <view wx:for='{{nameArr}}' class='{{currentTab == index ? "goodsdetail-top-l-o":"goodsdetail-top-l"}}' style='{{item == "" ? "display: none;":""}}' bindtap="navbarTap" data-index='{{index}}'>{{item}}</view>
      <view class='goodsdetail-top-cancel' bindtap='hideGoodsDetail'>取消</view>
    </view>

    <swiper class="swiper-box">
      <swiper-item wx:if='{{currentTab == 0}}' catchtouchmove='catchTouchMove'>
        <scroll-view scroll-y class="swiper-box-scr">
          <view class='swiper-box-item' wx:for='{{provinceArr}}' wx:key='{{item}}' data-item='{{item}}' data-index='{{index}}' bindtap='provinceChange' style='{{nameArr[0] == item ? "color: #e60012;":""}}'>{{item}}
            <view class='icon-cheveron-right font-size'></view>
          </view>
        </scroll-view>
      </swiper-item>

      <swiper-item wx:if='{{currentTab == 1}}' catchtouchmove='catchTouchMove'>
        <scroll-view scroll-y class="swiper-box-scr">
          <view class='swiper-box-item' wx:for='{{cityArr}}' wx:key='{{item}}' data-item='{{item}}' data-index='{{index}}' bindtap='cityChange' style='{{nameArr[1] == item ? "color: #e60012;":""}}'>{{item}}
            <view class='icon-cheveron-right font-size'></view>
          </view>
        </scroll-view>
      </swiper-item>

      <swiper-item wx:if='{{currentTab == 2}}' catchtouchmove='catchTouchMove'>
        <scroll-view scroll-y class="swiper-box-scr">
          <view class='swiper-box-item' wx:for='{{countryArr}}' wx:key='{{item}}' data-item='{{item}}' data-index='{{index}}' bindtap='districtChange' style='{{nameArr[2] == item ? "color: #e60012;":""}}'>{{item}}
            <view class='icon-cheveron-right font-size'></view>
          </view>
        </scroll-view>
      </swiper-item>
    </swiper>

  </view>
</view>

getAddress.wxss

/*弹窗*/

.goods-detail .mask {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}

.goods-detail .mask {
  background: rgba(0, 0, 0, 0.6);
}

.goodsdetail {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 750rpx;
  height: 700rpx;
  background: #fff;
  z-index: 20;
  overflow: hidden;
}

.goodsdetail-top {
  height: 80rpx;
  width: 750rpx;
  box-sizing: border-box;
  border-bottom: 1rpx solid #f0f0f0;
  display: flex;
  padding: 0 0 0 20rpx;
  position: relative;
}

.goodsdetail-top-l {
  height: 80rpx;
  padding: 0 20rpx 0 20rpx;
  line-height: 80rpx;
  box-sizing: border-box;
  /* border: 1rpx solid #000; */
  font-size: 26rpx;
}

.goodsdetail-top-l-o {
  height: 80rpx;
  padding: 0 20rpx 0 20rpx;
  line-height: 80rpx;
  box-sizing: border-box;
  border-bottom: 1rpx solid #e22e1f;
  font-size: 26rpx;
  /* color: #e22e1f; */
}

.goodsdetail-top-c {
  height: 80rpx;
  padding: 0 20rpx 0 20rpx;
  line-height: 80rpx;
  box-sizing: border-box;
  /* border: 1rpx solid #000; */
  font-size: 26rpx;
}

.goodsdetail-top-c-o {
  height: 80rpx;
  padding: 0 20rpx 0 20rpx;
  line-height: 80rpx;
  box-sizing: border-box;
  /* border: 1rpx solid #000; */
  font-size: 26rpx;
  /* color: #e22e1f; */
  border-bottom: 1rpx solid #e22e1f;
}

.goodsdetail-top-r {
  height: 80rpx;
  padding: 0 20rpx 0 20rpx;
  line-height: 80rpx;
  box-sizing: border-box;
  /* border: 1rpx solid #000; */
  font-size: 26rpx;
}

.goodsdetail-top-r-o {
  height: 80rpx;
  padding: 0 20rpx 0 20rpx;
  line-height: 80rpx;
  box-sizing: border-box;
  /* border: 1rpx solid #000; */
  font-size: 26rpx;
  /* color: #e22e1f; */
  border-bottom: 1rpx solid #e22e1f;
}

.goodsdetail-top-cancel {
  position: absolute;
  right: 0;
  top: 0;
  color: #aaa;
  height: 80rpx;
  padding: 0 40rpx 0 20rpx;
  line-height: 80rpx;
  box-sizing: border-box;
  /* border: 1rpx solid #000; */
  font-size: 26rpx;
}

.swiper-box {
  width: 750rpx;
  height: 620rpx;
  box-sizing: border-box;
  /* border: 1rpx solid #000; */
}

.swiper-box-scr {
  width: 750rpx;
  height: 620rpx;
  box-sizing: border-box;
  /* border: 1rpx solid #000; */
  padding: 0 40rpx 0 40rpx;
}

.swiper-box-item {
  height: 80rpx;
  width: 670rpx;
  line-height: 80rpx;
  font-size: 26rpx;
  border-bottom: 1rpx solid #f0f0f0;
  box-sizing: border-box;
  display: flex;
  /* border: 1rpx solid #000; */
  position: relative;
}

.icon-cheveron-right:before {
  content: "\e902";
  font-family: 'icomoon' !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
}

.font-size {
  font-size: 36rpx;
  height: 80rpx;
  box-sizing: border-box;
  line-height: 80rpx;
  /* border: 1rpx solid #000; */
  position: absolute;
  right: 0;
  top: 0;
  color: #d0d0d0;
}

然后进行调用   调用页面的js   applyStore.js

Page({

  data: {
    windowHeight: 0,
    // locationArr: ['山东省', '青岛市', '黄岛区']
    locationArr: ['', '', '']
  },

  onLoad: function(options) {
    var that = this
    console.log(options)
    //获得dialog组件
    this.getAddress = this.selectComponent("#getAddress");

    wx.getSystemInfo({
      success: function(res) {
        console.log(res.pixelRatio) //设备像素比
        console.log(res.windowWidth) //可使用窗口宽度
        console.log(res.windowHeight) //可使用窗口高度

        that.setData({
          windowWidth: res.windowWidth, //可使用窗口宽度
          windowHeight: res.windowHeight, //可使用窗口高度
        })
      }
    })
  },

  onShow: function() {

  },

  //选择地址
  chooseAddress: function(e) {
    var that = this

    this.getAddress.showsGoodsDetail();
  },

  //组件回调
  resultEvent: function(e) {
    var that = this

    console.log(e)
    console.log(e.detail.nameArr)
    that.setData({
      locationArr: e.detail.nameArr
    })
  }

})

applyStore.json

{
  "navigationBarTitleText": "收货地址",
  "usingComponents": {
    "getAddress": "../../../components/getAddress/getAddress"
  }
}

applyStore.wxml

<scroll-view scroll-y style="height: {{windowHeight}}px;width: 100%;" class='body'>
  <getAddress id='getAddress' locationArr="{{locationArr}}" bind:resultEvent="resultEvent">
  </getAddress>
  <view class='choose_address' bindtap='chooseAddress'>选择地址</view>
  <view>{{locationArr[0] + locationArr[1] + locationArr[2]}}</view>
</scroll-view>

applyStore.wxss

.body {
  display: block;
  /* border: 1rpx solid #000; */
  box-sizing: border-box;
}

.choose_address{
  height: 90rpx;
  width: 750rpx;
  box-sizing: border-box;
  padding: 0 40rpx 0 40rpx;
  font-size: 32rpx;
  line-height: 90rpx;
  border-bottom: 1rpx solid #aaa;
}

效果