uniapp+uview实现城市选择器

1.效果

2.代码—在components中创建CitySelect组件

<template>
  <view>
    <text class="uni-input"  style="
    background-color: #F8F8F8;
    display: block;
    line-height: 76rpx;padding:0 29rpx;" @tap="open">{{value}}</text>
  <u-popup :show="integralShow" v-if="integralShow" duration='100' :closeable='true' mode="bottom"
  	border-radius="20" close-icon="true" @close="closePopup(2)">
      <view class="cityselect">
        <view class="cityselect-header">
          <view class="cityselect-title">
            <text>请选择地址</text>
          </view>
          <view class="cityselect-nav">
            <view class="item" v-if="provinceActive" @tap="changeNav(0)">
              <text>{{provinceActive.n}}</text>
            </view>
            <view class="item" v-if="cityActive" @tap="changeNav(1)">
              <text>{{cityActive.n}}</text>
            </view>
            <view class="item" v-if="districtActive" @tap="changeNav(2)">
              <text>{{districtActive.n}}</text>
            </view>
            <view class="item active" v-else>
              <text>请选择</text>
            </view>
          </view>
        </view>
        <view class="cityselect-content">
          <swiper class="swiper" disable-touch="true" touchable="false" :current="current">
            <swiper-item>
              <scroll-view scroll-y class="cityScroll">
                <view>
                  <view
                    class="cityselect-item"
                    v-for="(item,index) in province"
                    :key="index"
                    @tap="selectProvince(index)"
                  >
                    <view class="cityselect-item-box">
                      <text>{{item.n}}</text>
                    </view>
                  </view>
                </view>
              </scroll-view>
            </swiper-item>
            <swiper-item>
              <scroll-view scroll-y class="cityScroll">
                <view>
                  <view
                    class="cityselect-item"
                    v-for="(item,index) in city"
                    :key="index"
                    @tap="selectCity(index)"
                  >
                    <view class="cityselect-item-box">
                      <text>{{item.n}}</text>
                    </view>
                  </view>
                </view>
              </scroll-view>
            </swiper-item>
            <swiper-item>
              <scroll-view scroll-y class="cityScroll">
                <view>
                  <view
                    class="cityselect-item"
                    v-for="(item,index) in district"
                    :key="index"
                    @tap="selectDistrict(index)"
                  >
                    <view class="cityselect-item-box">
                      <text>{{item.n}}</text>
                    </view>
                  </view>
                </view>
              </scroll-view>
            </swiper-item>
          </swiper>
        </view>
      </view>
	  </u-popup>
  </view>
</template>

<script type="text/babel">
export default {
  name: "CitySelect",
  components: {
  },
  props: ["callback", "items", "defaultValue"],
  data() {
    return {
		integralShow:false,
      value: "请选择",
      show: this.value,
      province: [],
      provinceActive: null,
      city: [],
      cityActive: null,
      district: [],
      districtActive: null,
      current: 0
    };
  },
  watch: {
    items(nextItem) {
      // console.log(nextItem,'1111111111111111111');
      this.province = nextItem;
    },
	defaultValue(nextItem){
		 // console.log(nextItem,'222222222222222222');
		 this.value = nextItem;
	}
  },
  mounted() {
	  // console.log(this.defaultValue,'改变的地址');
    if (this.defaultValue) {
      this.value = this.defaultValue;
    }
    this.province = this.items;
  },
  methods: {
	  closePopup(){
		  this.integralShow = false;
	  },
    open() {
      this.province = this.items;
      this.provinceActive = null;
      this.cityActive = null;
      this.districtActive = null;
      this.city = [];
      this.district = [];
      this.current = 0;
	  this.integralShow = true;
      // this.$refs.popup.open();
    },
    changeNav(index) {
      if (index == 0) {
        this.provinceActive = null;
      }
      if (index == 1) {
        this.cityActive = null;
      }
      if (index == 2) {
        this.districtActive = null;
      }
      this.current = index;
    },
    selectProvince(index) {
      this.provinceActive = this.province[index];
      this.city = this.province[index].c;
      this.current = 1;
    },
    selectCity(index) {
      this.cityActive = this.city[index];
      this.district = this.city[index].c;
      this.current = 2;
    },
    selectDistrict(index) {
      this.districtActive = this.district[index];
      this.value = `${this.provinceActive.n} ${this.cityActive.n} ${this.districtActive.n}`;
      // this.callback({
      //   province: {
      //     id: this.provinceActive.v,
      //     name: this.provinceActive.n
      //   },
      //   city: {
      //     id: this.cityActive.v,
      //     name: this.cityActive.n
      //   },
      //   district: {
      //     id: this.districtActive.v,
      //     name: this.districtActive.n
      //   }
      // });
      this.$emit("callback", {
        province: {
          id: this.provinceActive.v,
          name: this.provinceActive.n
        },
        city: {
          id: this.cityActive.v,
          name: this.cityActive.n
        },
        district: {
          id: this.districtActive.v,
          name: this.districtActive.n
        }
      });
      // this.$refs.popup.close();
	  this.integralShow = false;
    }
  }
};
</script>

<style lang="less">
.cityselect {
  width: 100%;
  height: 75%;
  background-color: #fff;
  z-index: 1502;
  position: relative;
  padding-bottom: 0;  
  padding-bottom: constant(safe-area-inset-bottom);  
  padding-bottom: env(safe-area-inset-bottom);  
  .cityScroll {
    height: 100%;
  }
  .swiper {
      height: 800rpx;
  }
}
.cityselect-header {
  width: 100%;
  z-index: 1;
}
.cityselect-title {
  width: 100%;
  font-size: 30rpx;
  text-align: center;
  height: 95rpx;
  line-height: 95rpx;
  position: relative;
  &:cityselect-title:after {
    height: 1px;
    position: absolute;
    z-index: 0;
    bottom: 0;
    left: 0;
    content: "";
    width: 100%;
    background-image: linear-gradient(0deg, #ececec 50%, transparent 0);
  }
}
.cityselect-nav {
  width: 100%;
  padding-left: 20rpx;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  .item {
    font-size: 26rpx;
    color: #222;
    display: block;
    height: 80rpx;
    line-height: 92rpx;
    padding: 0 16rpx;
    position: relative;
    margin-right: 30rpx;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 40%;
    &.active {
      color: #99CC00 !important;
      border-bottom: 1rpx solid #99CC00;
    }
  }
}
.cityselect-content {
  height: 100%;
  width: 100%;
}
.cityselect-item {
  .cityselect-item-box {
    display: block;
    padding: 0 40rpx;
    position: relative;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
    text-overflow: ellipsis;
    line-height: 64rpx;
    max-height: 65rpx;
    font-size: 26rpx;
    color: #333;
    &:after {
      content: "";
      height: 1rpx;
      position: absolute;
      z-index: 0;
      bottom: 0;
      left: 0;
      width: 100%;
      background-image: linear-gradient(0deg, #ececec 50%, transparent 0);
    }
  }
}
</style>

3.在需要的页面调用

<template>
<view>
<view>
						<view style="backgroundColor: #F8F8F8;">
							<CitySelect ref="cityselect" :defaultValue="model1.qu" @callback="result" :items="district">
							</CitySelect>
						</view>
					</view>
</view>
</template>
<script>
	import CitySelect from "@/components/CitySelect";
	export default {
		components: {
			CitySelect
		},
		data() {
		return{
		address: {
					province: [],
					city: [],
					district: [],
				},
		model1: {
					realName: '',
					phone: '',
					qu: '',
					stree: '',
					detail: '',
					isOk: false,
				},
				district: [{
				n: "台湾",
                pid: 0,
                v: 714401,
                c:[{
                n: "彰化县",
				pid: 714401,
				v: 714402,
				c:[{
				n: "芳苑乡",
				pid: 714402,
				v: 714403
				},{
				n: "芬园乡",
				pid: 714402,
				v: 714632}]
}]
				}],
		}
		},
		methods:{
		result(values) {
				this.address = {
					province: values.province.name || "",
					city: values.city.name || "",
					district: values.district.name || "",
					city_id: values.city.id
				};
				this.model1.qu = `${this.address.province}${this.address.city}${this.address.district}`;
			},}
		}
</script>
<style lang="scss" scoped>
</style>