使用mpvue写微信小程序省市区

最新推荐文章于 2020-07-05 10:35:31 发布

春风姐姐

最新推荐文章于 2020-07-05 10:35:31 发布

阅读量160

点赞数

文章标签：微信小程序省市区 mpvue

本文链接：https://blog.csdn.net/sumimg/article/details/103205171

版权

在这里插入图片描述

html (template)

<div class="variety">
        <div class="name">所属城市</div>
        <div class="input_box">
          <div  class="inputClass inputTwo">
            <div class="inputTwoText flex flex-cross-center flex-main-justify">
              <div>
                <span  v-if="region==''">请选择所属城市</span>
                <span class="inputCity" v-else>{{region[0]}} | {{region[1]}} | {{region[2]}}</span>
              </div>
              <div class="downImg">
                <img src="./images/down.png" alt="">
              </div>
            </div>
            <picker mode="region" @change="bindRegionChange" :value="region" :custom-item="customItem" class="inputTwoPosition">
              <div class="picker">
                请选择：{{region[0]}}，{{region[1]}}，{{region[2]}}
              </div>
            </picker>
          </div>
        </div>
      </div>

js (script)

export default {
  components: {
  },
  data() {
    return {
      region:''
    }
  },
  onShow() {
  },
  methods: {
    bindRegionChange(e){
      this.region=e.mp.detail.value
    }
  },
}

scss

.variety{
          margin-top: 30rpx;
          .name{
            font-size:24rpx;
            font-weight:400;
            color:rgba(153,153,153,1);
          }
          .input_box{
            
            .inputClass{
              height: 64rpx;
              line-height: 64rpx;
              border-bottom: 1rpx solid #F6F6F6;
              margin-top: 10rpx;
              font-size:32rpx;
              font-weight:400;
              color:rgba(51,51,51,1);
              .placeholderStyle{
                font-size:32rpx;
                font-weight:400;
                color:rgba(153,153,153,1);
              }
              .color333{
                color:rgba(153,153,153,1);
              }
            }
            .inputTwo{
              position: relative;
              color:rgba(153,153,153,1);
              .inputTwoText{
                width: 100%;
                height: 100%;
                .downImg{
                  img{
                    width:34rpx;
                    height:18rpx;
                  }
                }
              }
              .inputCity{
                color:rgba(51,51,51,1);
              }
              .inputTwoPosition{
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                color:rgba(51,51,51,1);
                opacity: 0;
              }
            }
            
          }

      }