小程序城市索引

//html
<view class="wrap">
    <view class="header">
        <van-search value="{{ value }}" placeholder="请输入城市名称" use-action-slot bind:change="onChange" bind:search="onSearch">
            <view slot="action" bind:tap="onClick">搜索</view>
        </van-search>
    </view>
    <view class="qu" >选择县区</view>
    <view class="xian">
    <van-collapse accordion value="{{ activeName }}" bind:change="onChanges">
  <van-collapse-item title="您正在看：{{areaing}}" name="2">
    <view class="area" wx:for="{{xian}}" wx:for-item='item' >
            <view class="areas" bindtap="xianclick">{{item}}</view>
        </view>  
  </van-collapse-item>
</van-collapse></view>
    <view class="city" >
        <van-index-bar z-index='-1' >
    <!-- wx:for-index="innerindex" data-innerindex="{{innerindex}}"  -->
            <view  wx:for="{{city}}" data-index="{{index}}" wx:for-item='item' wx:key wx:for-index='keys'>
                <van-index-anchor index="{{item.title}}" />
        <view wx:for="{{item.lists}}"   wx:for-item="cell" wx:key wx:for-index='key'> 
          <van-cell  title="{{cell}}" bind:tap="contrcity" data-index='{{item}}' data-id="{{key}}" data-ddid="{{keys}}"  />
        </view>
            </view>
        </van-index-bar>
    </view>
</view>
//js
var app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    value: '',//inputvalue
    activeName: '1',//手风琴
    name:[],//赋值
    areaing:'北京市',//返回的城市名称
    xian:['西城区','朝阳区','丰台区','石景山区','海淀区','等等...'],//区县
    city: [{
        "title": "A","lists": ["阿坝", "阿拉善", "阿里", "安康", "安庆", "鞍山", "安顺", "安阳", "澳门"]
      },
      {
        "title": "B","lists": ["北京", "白银", "保定", "宝鸡", "保山", "包头", "巴中", "北海", "蚌埠", "本溪", "毕节", "滨州", "百色", "亳州"]
      },
      {
        "title": "C","lists": ["重庆", "成都", "长沙", "长春", "沧州", "常德", "昌都", "长治", "常州", "巢湖", "潮州", "承德", "郴州", "赤峰", "池州", "崇左", "楚雄", "滁州", "朝阳"]
      },
      {
        "title": "D","lists": ["大连", "东莞", "大理", "丹东", "大庆", "大同", "大兴安岭", "德宏", "德阳", "德州", "定西", "迪庆", "东营"]
      },
      {
        "title": "E","lists": ["鄂尔多斯", "恩施", "鄂州"]
      },
      {
        "title": "F","lists": ["福州", "防城港", "佛山", "抚顺", "抚州", "阜新", "阜阳"]

      },
      {
        "title": "G","lists": ["广州", "桂林", "贵阳", "甘南", "赣州", "甘孜", "广安", "广元", "贵港", "果洛"]

      },
      {
        "title": "H","lists": ["杭州", "哈尔滨", "合肥", "海口", "呼和浩特", "海北", "海东", "海南", "海西", "邯郸", "汉中", "鹤壁", "河池", "鹤岗", "黑河", "衡水", "衡阳", "河源", "贺州", "红河", "淮安", "淮北", "怀化", "淮南", "黄冈", "黄南", "黄山", "黄石", "惠州", "葫芦岛", "呼伦贝尔", "湖州", "菏泽"]
      },
      {
        "title": "J","lists": ["济南", "佳木斯", "吉安", "江门", "焦作", "嘉兴", "嘉峪关", "揭阳", "吉林", "金昌", "晋城", "景德镇", "荆门", "荆州", "金华", "济宁", "晋中", "锦州", "九江",
          "酒泉"
        ]

      },
      {
        "title": "K","lists": ["昆明", "开封"]

      },
      {
        "title": "L","lists": ["兰州", "拉萨", "来宾", "莱芜", "廊坊", "乐山", "凉山", "连云港", "聊城", "辽阳", "辽源", "丽江", "临沧", "临汾", "临夏", "临沂", "林芝", "丽水", "六安", "六盘水",
          "柳州", "陇南", "龙岩", "娄底", "漯河", "洛阳", "泸州", "吕梁"
        ]

      },
      {
        "title": "M","lists": ["马鞍山", "茂名", "眉山", "梅州", "绵阳", "牡丹江"]

      },
      {
        "title": "N","lists": ["南京", "南昌", "南宁", "宁波", "南充", "南平", "南通", "南阳", "那曲", "内江", "宁德", "怒江"]
      },
      {
        "title": "P","lists": ["盘锦", "攀枝花", "平顶山", "平凉", "萍乡", "莆田", "濮阳"]

      },
      {
        "title": "Q","lists": ["青岛", "黔东南", "黔南", "黔西南", "庆阳", "清远", "秦皇岛", "钦州", "齐齐哈尔", "泉州", "曲靖", "衢州"]

      },
      {
        "title": "R","lists": ["日喀则", "日照"]
      },
      {
        "title": "S","lists": ["上海", "深圳", "苏州", "沈阳", "石家庄", "三门峡", "三明", "三亚", "商洛", "商丘", "上饶", "山南", "汕头", "汕尾", "韶关", "绍兴", "邵阳", "十堰", "朔州", "四平", "绥化", "遂宁", "随州", "宿迁", "宿州"]

      },
      {
        "title": "T","lists": ["天津", "太原", "泰安", "泰州", "台州", "唐山", "天水", "铁岭", "铜川", "通化", "通辽", "铜陵", "铜仁", "台湾"]
      },
      {
        "title": "W","lists": ["武汉", "乌鲁木齐", "无锡", "威海", "潍坊", "文山", "温州", "乌海", "芜湖", "乌兰察布", "武威", "梧州"]
      },
      {
        "title": "X","lists": ["厦门", "西安", "西宁", "襄樊", "湘潭", "湘西", "咸宁", "咸阳", "孝感", "邢台", "新乡", "信阳", "新余", "忻州", "西双版纳", "宣城", "许昌", "徐州", "香港", "锡林郭勒", "兴安"]

      },
      {
        "title": "Y","lists": ["银川", "雅安", "延安", "延边", "盐城", "阳江", "阳泉", "扬州", "烟台", "宜宾", "宜昌", "宜春", "营口", "益阳", "永州", "岳阳", "榆林", "运城", "云浮", "玉树", "玉溪", "玉林"]

      },
      {
        "title": "Z","lists": ["杂多县", "赞皇县", "枣强县", "枣阳市", "枣庄", "泽库县", "增城市", "曾都区", "泽普县", "泽州县", "札达县", "扎赉特旗", "扎兰屯市", "扎鲁特旗", "扎囊县", "张北县", "张店区", "章贡区", "张家港", "张家界", "张家口", "漳平市", "漳浦县", "章丘市", "樟树市", "张湾区", "彰武县", "漳县", "张掖", "漳州", "长子县", "湛河区", "湛江", "站前区", "沾益县", "诏安县", "召陵区", "昭平县", "肇庆", "昭通", "赵县", "昭阳区", "招远市", "肇源县", "肇州县", "柞水县", "柘城县", "浙江", "镇安县", "振安区", "镇巴县", "正安县", "正定县", "正定新区", "正蓝旗", "正宁县", "蒸湘区", "正镶白旗", "正阳县", "郑州", "镇海区", "镇江", "浈江区", "镇康县", "镇赉县", "镇平县", "振兴区", "镇雄县", "镇原县", "志丹县", "治多县", "芝罘区", "枝江市", "芷江侗族自治县", "织金县", "中方县", "中江县", "钟楼区", "中牟县", "中宁县", "中山", "中山区", "钟山区", "钟山县", "中卫", "钟祥市", "中阳县", "中原区", "周村区", "周口", "周宁县", "舟曲县", "舟山", "周至县", "庄河市", "诸城市", "珠海", "珠晖区", "诸暨市", "驻马店", "准格尔旗", "涿鹿县", "卓尼", "涿州市", "卓资县", "珠山区", "竹山县", "竹溪县", "株洲", "株洲县", "淄博", "子长县", "淄川区", "自贡", "秭归县", "紫金县", "自流井区", "资溪县", "资兴市", "资阳"]
      }
    ]
  },
  onLoad: function (options) {
   
  },
  onShow: function () {
  },
  // inputchange
  onChange(e) {
    this.setData({
      value: e.detail,
    });
  },
  // 选择县区跳转
  xianclick(){
    wx.switchTab({
      url: '../index/index'
    })
  },
  //手风琴下拉
  onChanges(event) {
    this.setData({
      activeName: event.detail,
    });
  },
  contrcity(e){
  //  console.log(e.currentTarget.dataset.index)
  //  console.log(e.currentTarget.dataset)
   this.setData({
     name:this.data.city[e.currentTarget.dataset.ddid].lists[e.currentTarget.dataset.id]
   })
   console.log(this.data.name)
   var cityname=this.data.name
   app.citynames = cityname;
   wx.switchTab({
    url: '../index/index?cityname='+cityname
  })
  },
  onClick() {
    console.log('搜索' + this.data.value);
    if (this.data.value == '') {
      wx.showToast({
        title: '搜索为空',
        icon: 'none'
      })
    }
   
  }, 
})
//css
/* pages/city/city.wxss */
.wrap{
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.header{
  width: 100vw;
  height: 10vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;
}
.xian{
  width: 100vw;
  margin-top: 11vh;
  position: relative;
}
.city{
  margin-top: 1vh;
}
.area{
  width: 100vw;
}
.areas{
  width: 30vw;
  line-height: 77rpx;
}
.content-class{
  background: transparent;
}
.qu{
  position: absolute;
  color: rgb(139, 136, 136);
  top: 13.5vh;
  right: 11vw;
  z-index: 1;
  font-size: 31rpx;
}
//json
{
  "usingComponents": {
    "van-index-bar": "../../dist/index-bar/index",
    "van-index-anchor": "../../dist/index-anchor/index",
    "van-cell": "../../dist/cell/index",
  "van-cell-group": "../../dist/cell-group/index",
  "van-search": "../../dist/search/index",
  "van-collapse": "../../dist/collapse/index",
  "van-collapse-item": "../../dist/collapse-item/index"
  }
}