微信小程序:省市区三级联动(升级版)

之前搞了一个 传送门,缺点明显,思索一番,An idea flitted through my mind.

// test.wxml
<view class="container">
    <view class="item">
        <text class="item-name">地址</text>
        <text class="item-content">{{province}} {{city}} {{area}}</text>
        <image class="arrow_left" src="../../images/play.png"></image>
    </view>
    <view style="display:flex;">
        <picker-view indicator-style="height: 50px;" style="width: 100%;height: 150px;text-align: center" value="{{pIndex}}" bindchange="changeProvince2">
            <picker-view-column>
                <view wx:for="{{placeArray}}" wx:key="name" style="line-height: 50px">{{item.name}}</view>
            </picker-view-column>
        </picker-view>
        <picker-view indicator-style="height: 50px;" style="width: 100%;height: 150px;text-align: center" value="{{cIndex}}" bindchange="changeCity2">
            <picker-view-column>
                <view wx:for="{{placeArray[pIndex].city}}" wx:key="name" style="line-height: 50px">{{item.name}}</view>
            </picker-view-column>
        </picker-view>
        <picker-view indicator-style="height: 50px;" style="width: 100%;height: 150px;text-align: center" value="{{aIndex}}" bindchange="changeArea2">
            <picker-view-column>
                <view wx:for="{{placeArray[pIndex].city[cIndex].area}}" wx:key="*this" style="line-height: 50px">{{item}}</view>
            </picker-view-column>
        </picker-view>
    </view>
</view>
//test.js  截取了部分省市区数据
  const placeArray = [
    {
      "name": "北京",
      "city": [{
        "name": "北京",
        "area": ["东城区", "西城区", "崇文区", "宣武区", "朝阳区", "丰台区", "石景山区", "海淀区", "门头沟区", "房山区", "通州区", "顺义区", "昌平区", "大兴区", "平谷区", "怀柔区", "密云县", "延庆县"]
      }]
    },

    {
      "name": "天津",
      "city": [{
        "name": "天津",
        "area": ["和平区", "河东区", "河西区", "南开区", "河北区", "红桥区", "塘沽区", "汉沽区", "大港区", "东丽区", "西青区", "津南区", "北辰区", "武清区", "宝坻区", "宁河县", "静海县", "蓟  县"]
      }]
    },

    {
      "name": "河北",
      "city": [

        {
          "name": "石家庄",
          "area": ["长安区", "桥东区", "桥西区", "新华区", "郊  区", "井陉矿区", "井陉县", "正定县", "栾城县", "行唐县", "灵寿县", "高邑县", "深泽县", "赞皇县", "无极县", "平山县", "元氏县", "赵  县", "辛集市", "藁", "晋州市", "新乐市", "鹿泉市"]
        },

        {
          "name": "唐山",
          "area": ["路南区", "路北区", "古冶区", "开平区", "新  区", "丰润县", "滦  县", "滦南县", "乐亭县", "迁西县", "玉田县", "唐海县", "遵化市", "丰南市", "迁安市"]
        },

        {
          "name": "秦皇岛",
          "area": ["海港区", "山海关区", "北戴河区", "青龙满族自治县", "昌黎县", "抚宁县", "卢龙县"]
        },

        {
          "name": "邯郸",
          "area": ["邯山区", "丛台区", "复兴区", "峰峰矿区", "邯郸县", "临漳县", "成安县", "大名县", "涉  县", "磁  县", "肥乡县", "永年县", "邱  县", "鸡泽县", "广平县", "馆陶县", "魏  县", "曲周县", "武安市"]
        },

        {
          "name": "邢台",
          "area": ["桥东区", "桥西区", "邢台县", "临城县", "内丘县", "柏乡县", "隆尧县", "任  县", "南和县", "宁晋县", "巨鹿县", "新河县", "广宗县", "平乡县", "威  县", "清河县", "临西县", "南宫市", "沙河市"]
        },

        {
          "name": "保定",
          "area": ["新市区", "北市区", "南市区", "满城县", "清苑县", "涞水县", "阜平县", "徐水县", "定兴县", "唐  县", "高阳县", "容城县", "涞源县", "望都县", "安新县", "易  县", "曲阳县", "蠡  县", "顺平县", "博野", "雄县", "涿州市", "定州市", "安国市", "高碑店市"]
        },

        {
          "name": "张家口",
          "area": ["桥东区", "桥西区", "宣化区", "下花园区", "宣化县", "张北县", "康保县", "沽源县", "尚义县", "蔚  县", "阳原县", "怀安县", "万全县", "怀来县", "涿鹿县", "赤城县", "崇礼县"]
        },

        {
          "name": "承德",
          "area": ["双桥区", "双滦区", "鹰手营子矿区", "承德县", "兴隆县", "平泉县", "滦平县", "隆化县", "丰宁满族自治县", "宽城满族自治县", "围场满族蒙古族自治县"]
        },

        {
          "name": "沧州",
          "area": ["新华区", "运河区", "沧  县", "青  县", "东光县", "海兴县", "盐山县", "肃宁县", "南皮县", "吴桥县", "献  县", "孟村回族自治县", "泊头市", "任丘市", "黄骅市", "河间市"]
        },

        {
          "name": "廊坊",
          "area": ["安次区", "固安县", "永清县", "香河县", "大城县", "文安县", "大厂回族自治县", "霸州市", "三河市"]
        },

        {
          "name": "衡水",
          "area": ["桃城区", "枣强县", "武邑县", "武强县", "饶阳县", "安平县", "故城县", "景  县", "阜城县", "冀州市", "深州市"]
        }

      ]
    }];

Page({
  data:{
    placeArray: placeArray,
    province: placeArray[0].name,
    pIndex: 0,
    city: placeArray[0].city[0].name,
    cIndex: 0,
    area: placeArray[0].city[0].area[0],
    aIndex: 0
  },
   changeProvince2: function(e){
    const val = e.detail.value
    this.setData({
      pIndex: val,
      cIndex: 0,
      aIndex: 0,
      province: placeArray[val].name,
      city: placeArray[val].city[0].name,
      area: placeArray[val].city[0].area[0]
    })
  },
  changeCity2: function(e){
    const val = e.detail.value
    this.setData({
      cIndex: val,
      aIndex: 0,
      city: placeArray[this.data.pIndex].city[val].name,
      area: placeArray[this.data.pIndex].city[val].area[0]
    })
  },
  changeArea2: function(e){
    const val = e.detail.value
    this.setData({
      aIndex: val,
      area: placeArray[this.data.pIndex].city[this.data.cIndex].area[val]
    })
  },
})

之前的问题省市改变后,后面的不滚动到最顶端。既然更改数据无法实现,那干脆重新渲染。
效果如下:

省市区三级联动.gif

代码量减少了,效果也完美实现,nice!
欢迎拍砖,有更好的方法还请留言,共同进步,转载请注明出处!_

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,332评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,508评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,812评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,607评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,728评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,919评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,071评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,802评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,256评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,576评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,712评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,389评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,032评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,798评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,026评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,473评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,606评论 2 350

推荐阅读更多精彩内容