支付宝/钉钉小程序地区级联选择组件分享

示例图：

---

正文部分

一、组件的注册

二、组件使用

1.在需要使用组件的josn文件中注册

2.在js文件中引入相关地址的js文件

3.js主要代码

4.html部分

5.cityData.js文件（部分）

---

一、组件的注册

在文件目录下components里创建select小程序组件

代码示例：

.acss

.picker-popup {
  font-family: PingFangSC-Regular;
}
.btn-action{
  display: flex;
  align-items: center;
  padding: 30rpx;
  box-sizing: border-box;
  background: #FFFFFF
}
.pipick-view-tab .am-tabs-bar {
  height: 80rpx;
  box-sizing: border-box;
  border-bottom: 1rpx solid #DDDDDD;
  padding:0 10rpx;
}

.pipick-view-tab .am-tabs-bar-content {
  height: 79rpx;
  box-sizing: border-box;
}

.pipick-view-tab .am-tabs-scroll-right, .pipick-view-tab .am-tabs-scroll-left {
  width: 0;
  display: none;
}

.pick-view-tab-header {
  height: 79rpx;
  line-height: 79rpx;
  box-sizing: border-box;
  font-size: 26rpx;
  color: #333333;
}

.pick-view-tab-header .am-tabs-bar-title {
  max-width: 180rpx;
  height: 79rpx;
  line-height: 79rpx;
  border-bottom: 4rpx solid transparent;
  box-sizing: border-box;
  padding: 0 20rpx;
}

.pick-view-tab-header .am-tabs-bar-title text {
  max-width: 180rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}

.pipick-view-tab .am-tabs-content-wrap {
  margin-top: 0;
}

.pick-view-content {
  height: 480rpx;
  padding: 20rpx 0;
  box-sizing: border-box;
}

.pick-view-content-item {
  height: 60rpx;
  line-height: 60rpx;
  padding: 0 30rpx;
  color: #333333;
  width: 100%;
  box-sizing: border-box;
  font-size: 26rpx;
}

.confirm-btn {
  text-align: right;
  flex: 1;
}
.cancel-btn{
  flex:1;
}

.disable {
  color: #CCCCCC;
}

.active {
  color: #108ee9;
}

.curret {
  color: #FFFFFF;
  background: #108ee9;
}

 

.axml

<view>
  <popup show="{{selectShow}}" position="bottom" onClose="onPopupClose" className="picker-popup" disableScroll="{{false}}">
    <view class="btn-action">
      <view class="cancel-btn" data-click="{{isConfirm}}" onTap="onCancel">取消                                                            
      </view>
      <view class="confirm-btn {{isConfirm?'active':'disable'}}" data-click="{{isConfirm}}" onTap="onConfirm">确定                                                            
      </view>
    </view>
    <tabs className="pipick-view-tab" tabBarCls="pick-view-tab-header" activeCls="activeTab" tabBarActiveTextColor="#333333" tabBarBackgroundColor="transparent" tabs="{{selectList}}" swipeable="{{false}}" onTabClick="handleTabClick" activeTab="{{activeTab}}">
      <block a:for="{{selectList}}" a:for-index="idx" a:for-item="itemName">
        <tab-content key="{{idx}}">
          <scroll-view class="pick-view-content" scroll-y="{{true}}" trap-scroll="{{true}}">
            <block a:for="{{itemName.sub}}">
              <view data-key="{{idx}}" data-name="{{item.name}}" data-code="{{item.code}}" data-sub="{{item.sub?item.sub:''}}" class="pick-view-content-item {{selectList[idx].title===item.name?'curret':''}}" onTap="itemSelect">{{item.name}}                                                        
              </view>
            </block>
          </scroll-view>
        </tab-content>
      </block>
    </tabs>
  </popup>
</view>

.js

Component({
  data: {
    isConfirm: false, // 确认是否可点击
    selectList: [
      {
        title: '请选择',
        sub: []
      }
    ], // list数据
    activeTab: 0 // 当前tab项
  },
  props: {
    selectShow: false // 选择面板是否展示
  },
  didMount() {
    const { list } = this.props;
    this.setData({
      selectList: [
        {
          title: '请选择',
          sub: list
        }
      ]
    });
  },
  didUpdate(prevProps, prevData) {
    const { selectValue, list } = this.props;
    // 面板状态改变的时候数据的重新渲染
    if (!prevProps.selectShow && this.props.selectShow && selectValue) {
      const selectArray = selectValue.split(' ');
      let selectList = [];
      selectArray.map((item, k) => {
        if (k === 0) {
          const provinces = {
            title: item,
            sub: list
          };
          selectList.push(provinces);
        }
        if (k === 1) {
          list.map((data, index) => {
            if (data.name === selectArray[k - 1]) {
              const city = {
                title: item,
                sub: data.sub
              };
              selectList.push(city);
            }
          });
        }
        if (k === 2) {
          list.map((data, index) => {
            if (data.name === selectArray[k - 2]) {
              data.sub.map((areaData, i) => {
                if (areaData.name === selectArray[k - 1]) {
                  const area = {
                    title: item,
                    sub: areaData.sub
                  };
                  selectList.push(area);
                }
              });
            }
          });
        }
      });
      this.setData({
        selectList,
        activeTab: selectArray.length - 1
      });
    }
  },
  didUnmount() { },
  methods: {
    /**
     * 关闭popup
     * @method onPopupClose
     */
    onPopupClose() {
      const { selectValue, list } = this.props;
      if (!selectValue) {
        this.setData({
          isConfirm: false,
          selectList: [
            {
              title: '请选择',
              sub: list
            }
          ],
          activeTab: 0
        });
      }
      this.props.onClose();
    },
    /**
     * 确认
     * @method onConfirm
     * @param {*} e
     */
    onConfirm(e) {
      if (e.target.dataset.click) {
        // 点击确定
        const { selectList } = this.data;
        let result = [];
        selectList.map((item) => {
          const singleSelect = {
            name: item.title,
            code: item.code
          };
          result.push(singleSelect);
        });
        this.props.onSelectSuccess(result);
        this.props.onClose();
      }
    },
    /**
     * 取消
     * @method onCancel
     */
    onCancel() {
      this.props.onClose();
    },
    /**
     * tab切换
     * @method handleTabClick
     * @param {*} index
     */
    handleTabClick({ index }) {
      this.setData({
        activeTab: index
      });
    },
    /**
     * 省市区选择事件
     * @method itemSelect
     * @param {*} e
     */
    itemSelect(e) {
      const { key, name, code, sub } = e.target.dataset;
      const { list } = this.props;
      if (key === 0) { // 第一级数据处理
        if (sub) {
          this.setData({
            selectList: [
              {
                title: name,
                code,
                sub: list
              },
              {
                title: '城市',
                sub: sub
              }
            ],
            activeTab: 1,
            isConfirm: false
          });
        } else {
          this.setData({
            selectList: [
              {
                title: name,
                code,
                sub: list
              }
            ],
            isConfirm: true
          });
        }
      }
      if (key === 1) { // 第二级数据处理
        if (sub) {
          this.setData({
            selectList: [
              {
                title: this.data.selectList[0].title,
                code: this.data.selectList[0].code,
                sub: list
              },
              {
                title: name,
                code,
                sub: this.data.selectList[1].sub
              },
              {
                title: '区县',
                sub: sub
              }
            ],
            activeTab: 2,
            isConfirm: false
          });
        } else {
          this.setData({
            selectList: [
              {
                title: this.data.selectList[0].title,
                code: this.data.selectList[0].code,
                sub: list
              },
              {
                title: name,
                code,
                sub: this.data.selectList[1].sub
              }
            ],
            activeTab: 1,
            isConfirm: true
          });
        }
      }
      if (key === 2) { // 第三级数据处理
        this.setData({
          selectList: [
            {
              title: this.data.selectList[0].title,
              code: this.data.selectList[0].code,
              sub: list
            },
            {
              title: this.data.selectList[1].title,
              code: this.data.selectList[1].code,
              sub: this.data.selectList[1].sub
            },
            {
              title: name,
              code,
              sub: this.data.selectList[2].sub
            }
          ],
          activeTab: 2,
          isConfirm: true
        });
      }
    }
  }
});

.json

// 注意: 使用前请在package.json中引入 mini-ali-ui
{
  "component": true,
  "usingComponents": {
    "popup": "mini-ali-ui/es/popup/index",
    "tabs": "mini-ali-ui/es/tabs/index",
    "tab-content": "mini-ali-ui/es/tabs/tab-content/index"
  }
}

二、组件使用

1.在需要使用组件的josn文件中注册

代码如下：

  "multi-select": "/components/select/select",

2.在js文件中引入相关地址的js文件

代码如下：

import { rawCitiesData } from './cityData'; （示例路径）

3.js主要代码

代码如下：

import { rawCitiesData } from './cityData'; // 导入城市数据

Page({
  data: {
    selectValue: '', // 选择的值
    selectShow: false, // 是否显示级联组件
    rawCitiesData, // mock的级联数据
  },
  /**
   * 点击输入框显示级联组件
   * @method openSelect
   */
  openSelect() {
    this.setData({ selectShow: true });
  },
  /**
   * 关闭级联组件
   * @method closeSelect
   */
  closeSelect() {
    this.setData({ selectShow: false });
  },
  /**
   * 点击确认触发的事件
   * @method onSelectSuccess
   * @param {*} result
   */
  onSelectSuccess(result) {
   console.log(result)
  },
});

4.html部分

代码如下：

      <multi-select selectShow="{{selectShow}}" selectValue="{{selectValue}}" list="{{rawCitiesData}}" onSelectSuccess="onSelectSuccess" onClose="closeSelect"/>

5.cityData.js文件（部分）

代码如下：

const rawCitiesData = [
{
    "name": "北京市",
    "code": "110000",
    "sub": [
      {
        "name": "北京市",
        "code": "110100",
        "subb": [
          {
            "name": "东城区",
            "code": "110101"
          },

          {
            "name": "西城区",
            "code": "110102"
          },

          {
            "name": "朝阳区",
            "code": "110105"
          },

          {
            "name": "丰台区",
            "code": "110106"
          },

          {
            "name": "石景山区",
            "code": "110107"
          },

          {
            "name": "海淀区",
            "code": "110108"
          },

          {
            "name": "门头沟区",
            "code": "110109"
          },

          {
            "name": "房山区",
            "code": "110111"
          },

          {
            "name": "通州区",
            "code": "110112"
          },

          {
            "name": "顺义区",
            "code": "110113"
          },

          {
            "name": "昌平区",
            "code": "110114"
          },

          {
            "name": "大兴区",
            "code": "110115"
          },

          {
            "name": "怀柔区",
            "code": "110116"
          },

          {
            "name": "平谷区",
            "code": "110117"
          },

          {
            "name": "密云区",
            "code": "110118"
          },

          {
            "name": "延庆区",
            "code": "110119"
          }
        ]
      }
    ]
  },
];
module.exports = {
  rawCitiesData
}