mpvue开发微信小程序城市三级联动加筛选功能

先看效果：上图 

这里引用了 Mpvue-WeUI   但是原生的组件没有不限地区的功能自己手写上取消每个级别的取消

Mpvue-WeUI  https://mpcomponent.github.io/mpvue-weui/guide/

代码全↓↓↓↓

<template>
  <div class="longinPage">
    <div class="head_top">

      <picker class="weui-btn" mode="region" :value="region" @change="CityChange">
        <div class="ChoiceCity" type="default">
          <div class="CityList">
            <div>{{province}}</div>
            <div>{{city}}</div>
            <div>{{area}}</div>
          </div>
        </div>
        <div v-if="Unlimited" class="Unlimited">不限地区</div>
        <div class="cancel">
          <div v-show="cancelProvinceShow" @click.stop="cancelProvince">╳</div>
          <div v-show="cancelCityShow" @click.stop="cancelCity">╳</div>
          <div v-show="cancelAreaShow" @click.stop="cancelArea">╳</div>
        </div>
      </picker>

    </div>
  
    
  </div>
  

</template>

<script>
export default {
  data () {
    return {
      
      province:"",//省市
      city:"",//城市
      area:"",//区
      region: ["北京市", "北京市"],//默认
      cancelProvinceShow:false,
      cancelCityShow:false,
      cancelAreaShow:false,
      Unlimited:false,
      
      
      detailsList:[],

    }
  },
  mounted(){
    //标题
    wx.setNavigationBarTitle({
      title: '屠宰'
    })
    this.cityList()
    this.buttonShow()
    this.PageLoading()
  },
  methods: {
    
    
    //城市关闭按钮显示
    buttonShow(){
      this.cancelProvinceShow=false,
      this.cancelCityShow=false,
      this.cancelAreaShow=false,
      this.Unlimited=false

      if(this.province){
        this.cancelProvinceShow=true
      }
      if(this.city){
        this.cancelCityShow=true
      }
      if(this.area){
        this.cancelAreaShow=true
      }
      if(!this.province&&!this.city&&!this.area){
        this.Unlimited=true
      }
    },
    //取消省
    cancelProvince(){
      this.province=""
      this.city=""
      this.area=""
      this.buttonShow()

      this.searchList.province_id=""
      this.searchList.city_id=""
      this.searchList.area_id=""
      this.PageLoading()
    },
    //取消市
    cancelCity(){
      this.city=""
      this.area=""
      this.buttonShow()

      this.searchList.city_id=""
      this.searchList.area_id=""
      this.PageLoading()
    },
    //取消区
    cancelArea(){
      this.area=""
      this.buttonShow()

      this.searchList.area_id=""
      this.PageLoading()
    },
    //已选城市显示
    cityList(){
      this.province=this.region[0]
      this.city=this.region[1]
      this.area=this.region[2]
    },
    //城市三级联动
    CityChange(e) {
      this.region=e.mp.detail.value
      this.cityList()
      this.buttonShow()

      this.searchList.province_id=e.mp.detail.code[0]
      this.searchList.city_id=e.mp.detail.code[1]
      this.searchList.area_id=e.mp.detail.code[2]
      this.PageLoading()
    },



    }

  },




}
</script>

<style scoped>
.longinPage{
  width: 100%;
  height: 100%;
  background: #F7F7F7;
}
.longinPage .head_top{
  width: 100%;
  height: 38px;
  background: #fff;
  box-shadow: 0 2px 4px 0 rgba(238,236,236,0.50);
  margin-bottom: 10px;
  position: relative;
}
.Unlimited{
  width: 100%;
  height: 38px;
  font-size: 16px;
  line-height: 38px;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
}
.cancel{
  width: 100%;
  height: 38px;
  position: absolute;
  top: 0;
  left: 0;
}
.cancel>div{
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #ccc;
  color: #999;
  line-height: 22px;
  text-align: center;
}
.cancel>div:nth-child(1){
  position: absolute;
  top: 9px;
  left: 25%;
}
.cancel>div:nth-child(2){
  position: absolute;
  top: 9px;
  left: 57%;
}
.cancel>div:nth-child(3){
  position: absolute;
  top: 9px;
  right: 5%;
}
.CityList{
  width: 100%;
  height: 38px;
  line-height: 38px;
  display: flex;
  justify-content:space-between;
  padding: 0 5%;
  box-sizing: border-box;
}
.CityList>div{
  width: 20%;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
  text-align: center;
}
.CityList>div:nth-child(3){
  margin-right: 26px;
}
.ChoiceCity{
  padding: 0;
}
.main{
  width: 100%;
  overflow: hidden;
  padding: 0 3%;
  box-sizing: border-box;
  display: flex;
  flex-wrap:wrap;
  justify-content:space-between;
}
.main_list{
  width: 49%;
  height: 188px;
  background: #fff;
  box-shadow: 0 2px 4px 0 rgba(229,227,227,0.50);
  margin-bottom: 10px;
}
.main_list_img{
  width: 100%;
  height: 108px;
}
.content{
  width: 90%;
  margin: 0 auto;
}
.content_title{
  font-size: 12px;
  color: #333333;
  margin-top: 5px;
}
.content_Second{
  display: flex;
  justify-content:space-between;
  margin-top: 5px;
  margin-bottom: 5px;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.content_Second>div{
  font-size: 12px;
  color: #333333;
}
.content_Second>div:nth-child(3){
  font-size: 15px;
  color: red;
  line-height: 17px;
}
.content_time{
  font-size: 12px;
  color: #787777;
}

.shop{
  display: flex;
  justify-content:space-between;
}
.shop>div{
  width: 30%;
  height: 38px;
  line-height: 38px;
  text-align: center;
}
</style>

 

引用ui 后 不需添加样式，其实这个 就是封装好的！