当前位置：首页>后端>正文

微信小程序组件- 地址选择器

后端2024-10-19 21:27:05

鏁堟灉鍥?div class="image-package">

picker-address

杩欑瘒鐢ㄥ埌浜嗗垰鍒氬彂甯冪殑popup, 鏈夐渶瑕佸彲浠ュ幓閭ｉ噷鍏堢湅鐪?/p>

璁剧疆鍒濆鍊?鍙互涓虹┖, 濡傛灉涓嶄负绌? 闇€瑕佷笌鏂囦欢涓殑鍚嶇О涓€鑷?;
鐐瑰嚮纭畾鎻愪氦鎵€閫夊湴鍧€(鍚嶇О鍜宑ode閮藉彲浠?;
鏍峰紡闂鍙互鏌ョ湅鏂囨。
https://developers.weixin.qq.com/miniprogram/dev/component/picker-view.html
鍏ㄥ浗鍦板潃鎵€鐢ㄦ枃浠禷reaFile鏄垜浠庡摢閲屾悶鏉ョ殑鎴戝繕璁颁簡銆傘€傘€傘€傘€傝嚜宸卞幓缈荤炕锛宔lement-ui涓垨鑰卾ant涓兘鏈夊樋鍢?/li>

琛ュ厖锛?br> https://segmentfault.com/a/1190000041395245/
猬嗭笍杩欎釜缃戝潃閲屽彲浠ヨ嚜宸辫幏鍙栧埌鍦板潃鐨勬枃浠讹紝閫夋嫨闇€瑕佺殑淇℃伅鍗冲彲鐢熸垚JSON鏂囦欢馃槉

html 猬囷笍

<njx-popup show="{{show}}" titleText="璇烽€夋嫨鍦板潃" bindsubmit="submit">
  <!-- picker-view閲岀殑wx:if鏄负浜嗗鐞嗕竴涓猙ug, 澶翠竴娆℃墦寮€鏃剁渷鍒楃殑鏁版嵁鎵撳嵃鍑烘槸璧嬪€兼垚鍔熺殑, 鍙槸椤甸潰鏄剧ず鏈夐棶棰? 鍔犱笂wx:if濂戒簡......浣嗘垜涓嶇煡閬撴槸浠€涔堟満鍒娥煒?-->
  <picker-view wx:if="{{show}}" value="{{addressValue}}" bindchange="changeAddress" class="picker-view" indicator-class="picker-item-active">
    <picker-view-column>
      <view class="picker-item {{addressValue[0] === index 'active':''}}" wx:for="{{provinceList}}" wx:key="label">{{item.label}}</view>
    </picker-view-column>
    <picker-view-column>
      <view class="picker-item {{addressValue[1] === index 'active':''}}" wx:for="{{cityList}}" wx:key="label">{{item.label}}</view>
    </picker-view-column>
    <picker-view-column>
      <view class="picker-item {{addressValue[2] === index 'active':''}}" wx:for="{{regionList}}" wx:key="label">{{item.label}}</view>
    </picker-view-column>
  </picker-view>
</njx-popup>

css閮芥槸鍏叡鏍峰紡鎴戞噿寰楁斁浜嗗搱鍝堝搱鍝?br> js 猬囷笍

import list from "./areaFile";

Component({
  properties: {
    show: Boolean,
    value: String,
  },
  data: {
    list: null,
    addressValue: [0, 0, 0],

    provinceList: [],
    cityList: [],
    regionList: [],
  },
  methods: {
    initValue(value) {
      let addressValue = null;
      let cityList = [];
      let regionList = [];

      if (value === "") {
        cityList = list[0].children;
        regionList = list[0].children[0].children;
        addressValue = [0, 0, 0];
      } else {
        let addressArr = value.split(',');
        let provinceIndex = list.findIndex(item => item.label === addressArr[0]);
        let cityIndex = list[provinceIndex].children.findIndex(item => item.label === addressArr[1]);
        let regionIndex = list[provinceIndex].children[cityIndex].children.findIndex(item => item.label === addressArr[2]);
        cityList = list[provinceIndex].children;
        regionList = list[provinceIndex].children[cityIndex].children;
        addressValue = [provinceIndex, cityIndex, regionIndex];
      }

      this.setData({
        provinceList: list,
        cityList,
        regionList,
        addressValue
      })
    },
    changeAddress(e) {
      let value = e.detail.value;
      // 鍦板潃鍒楄〃璁剧疆
      this.setData({
        cityList: list[value[0]].children,
        regionList: list[value[0]].children[value[1]].children,
      })

      if (value[2] !== this.data.addressValue[2]) {
        // 婊戝姩鍖?
        this.setData({
          addressValue: value
        })
      } else if (value[1] !== this.data.addressValue[1]) {
        // 婊戝姩甯?
        this.setData({
          addressValue: [value[0], value[1], 0]
        })
      } else if (value[0] !== this.data.addressValue[0]) {
        // 婊戝姩鐪?
        this.setData({
          addressValue: [value[0], 0, 0]
        })
      }
    },

    submit() {
      const province = this.data.provinceList[this.data.addressValue[0]];
      const city = this.data.cityList[this.data.addressValue[1]];
      const region = this.data.regionList[this.data.addressValue[2]];

      const name = `${province.label},${city.label},${region.label}`;
      const code = `${province.value},${city.value},${region.value}`;

      this.triggerEvent('submit', {
        name,
        code,
      })
    },
  },
  observers: {
    show(show) {
      if (show) {
        this.initValue(this.data.value);
      }
    },
  }
})

浣跨敤椤甸潰html

<njx-picker-address show="{{addressPickerShow}}" value="{{address}}" bindsubmit="submitAddress"  />

浣跨敤椤甸潰js

Page({
  data: {
    list: [{
      label: "褰撳墠鍦板潃",
      value: "澶╂触,澶╂触甯?娌充笢鍖?,
      componentName: "address"
    }, {
      label: "鍦板潃CODE",
      value: "",
    }],
    address: "",
    addressCode: "",
    addressPickerShow: false,
  },
  openEach(e) {
    const {
      name
    } = e.currentTarget.dataset;
    const index = this.data.list.findIndex(item => item.componentName === name);
    if (index === -1) return;
    const value = this.data.list[index].value;

    this.setData({
      [name]: value,
      [`${name}PickerShow`]: true
    })
  },
  submitAddress(e) {
    const {
      name,
      code
    } = e.detail;
    const nameIndex = this.data.list.findIndex(item => item.componentName === 'address');
    this.setData({
      address: name,
      addressCode: code,
      [`list[${nameIndex}].value`]: name,
      [`list[1].value`]: code,
      addressPickerShow: false,
    })
  }
})

馃拑tada~~~_{涓€涓彲浠ラ€夋嫨鍚嶇О鍜孋ODE鐨刾ickerAddress灏卞畬鎴愬暒}~

相关文章：