图片实现多选择

wxml

<view class="xuanze">
    <block wx:for="{
   {selectIndex}}" wx:key="id">
      <view class='item_container' bindtap='itemSelected' data-index='{
   {index}}' value="{
   {item.name}}" checked="{
   {item.checked}}">
        <image class='select_icon' src="{
   {item.isSelected?'../../image/y1.png':'../../image/y2.png'}}"></image>
        <text class="{
   {item.isSelected?'ccc':'aaa'}}">{
   {
   item.name}}</text>
      </view>
    </block>
  </view>

wxss

.xuanze .item_container {
   
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 19rpx 30rpx 10rpx 30rpx;
}
.xuanze{
   
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.select_icon {
   
  width: 30rpx;
  height: 30rpx;
}
 
.item_container text {
   
  margin-left: 10rpx;
  font-size: 28rpx;
}
/* 颜色字体 */
.ccc{
   
  color: #e82633;
}
.aaa{
   
  color: #adadad;
}

js

 itemSelected: function (e) {
   
    var index = e.currentTarget.dataset.index;
    var item = this.data.selectIndex[index];
    item.isSelected = !item.isSelected;
    console.log(item.isSelected)
    this.setData({
   
      selectIndex: this.data.selectIndex,
    });
  }

选择城市

wxml

<view class="bottoms">
   <view class='a-z'>
  <view wx:for="{
   {cityAZ}}" wx:key="unique">
    <view data-id='{
   {item.cityName}}' bindtap='bindAZ' class="{
   {bindAZ===1?'az':''}}">{
   {
   item.cityName}}</view>
  </view>
</view>
<view class='city-item-content'>
  <view wx:for="{
   {cityResults}}" wx:key="unique">
    <view wx:if="{
   {item.cityPinYin.length > 1}}" class='city-item' data-cityname='{
   {item.cityName}}' bindtap='citySelected'>{
   {
   item.cityName}}</view>
    <view wx:else class='city-item-A-Z' data-cityname='{
   {item.cityName}}'>{
   {
   item.cityName}}</view>
    <!-- <view data-cityname='{
   {item.cityName}}' bindtap='citySelected' >{
   {
   item.cityName}}</view> -->
  </view>
</view>


</view>

wxss

.a-z{
   
  width: 35rpx;
  position: fixed;
  /* top: 112rpx; */
  text-align: center;
  right: 5rpx;
  color: #333333;
  font-size: 25rpx;
  /* border: 1rpx solid #3399CC; */
}
.az{
   
  color: #e60012
}
 
.city-item-content {
   
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #FFFFFF;
}
 
.city-item {
   
  background: #fff;
  /* margin-top: 5rpx; */
  width: 90%;  
  /* padding-left: 5%; */
  margin-left: 5%;
  height: 90rpx;
  font-size: 25rpx;
  line-height: 100rpx;
  font-weight: bold;
  border-bottom: 1rpx solid #efefef;    
  /* border:1rpx solid red; */
}

.city-item-A-Z{
   
  /* width: 100%; */
  height: 40rpx;
  font-size: 30rpx;
  padding-left: 5%;
  background-color: #ffffff;
  /* border-top: 1rpx solid #CCCCCC;     */
  margin-top: -1rpx;
  color: #e60012;
}
 
 
.search-box {
   
  top: 0;
  position: fixed;
  width: 100%;
  /* left:5%; */
  background: #eee;
  height: 110rpx;
  font-size: 30rpx;
  border-bottom:1rpx solid #DDDDDD; 
     /* border: 1rpx solid red;   */
}
 

.search-input-placeholder {
   
  text-align: center;
}

js

// pages/city/city.js
Page({
   

  /**
   * 页面的初始数据
   */
  data: {
   
    scrollAZ: null,
    scrollNow: 0,
    cityType: 'begin',
    cityResults: null,
    // 所有数据
    cityAZ: [{
   
      cityName: 'A'
    }, {
   
      cityName: 'B'
    }, {
   
      cityName: 'C'
    }, {
   
      cityName: 'D'
    }, {
   
      cityName: 'E'
    }, {
   
      cityName: 'F'
    }, {
   
      cityName: 'G'
    }, {
   
      cityName: 'H'
    }, {
   
      cityName: 'J'
    }, {
   
      cityName: 'K'
    }, {
   
      cityName: 'L'
    }, {
   
      cityName: 'M'
    }, {
   
      cityName: 'N'
    }, {
   
      cityName: 'P'
    }, {
   
      cityName: 'Q'
    }, {
   
      cityName: 'R'
    }, {
   
      cityName: 'S'
    }, {
   
      cityName: 'T'
    }, {
   
      cityName: 'W'
    }, {
   
      cityName: 'X'
    }, {
   
      cityName: 'Y'
    }, {
   
      cityName: 'Z'
    },],
    citys: [ {
   
      cityName: 'A',
      cityPinYin: 'a',
      cityPY: 'a'
    }, {
   
      cityName: '阿克苏',
      cityPinYin: 'akesu',
      cityPY: 'aks'
    }, {
   
      cityName: '安康',
      cityPinYin: 'ankang',
      cityPY: 'ak'
    }, {
   
      cityName: '安陆',
      cityPinYin: 'anlu',
      cityPY: 'al'
    }, {
   
      cityName: '安庆',
      cityPinYin: 'anqing',
      cityPY: 'aq'
    }, {
   
      cityName: '鞍山',
      cityPinYin: 'anshan',
      cityPY: 'as'
    }, {
   
      cityName: '安顺',
      cityPinYin: 'anshun',
      cityPY: 'as'
    }, {
   
      cityName: '安阳',
      cityPinYin: 'anyang',
      cityPY: 'ay'
    }, {
   
      cityName: 'B',
      cityPinYin: 'b',
      cityPY: 'b'
    }, {
   
      cityName: '白城',
      cityPinYin: 'baicheng',
      cityPY: 'bc'
    }, {
   
      cityName: '蚌埠',
      cityPinYin: 'bangbu',
      cityPY: 'bb'
    }, {
   
      cityName: '保定',
      cityPinYin: 'baoding',
      cityPY: 'bd'
    }, {
   
      cityName: '宝鸡',
      cityPinYin: 'baoji',
      cityPY: 'bj'
    }, {
   
      cityName: '包头',
      cityPinYin: 'baotou',
      cityPY: 'bt'
    }, {
   
      cityName: '鲅鱼圈',
      cityPinYin: 'bayuquan',
      cityPY: 'byq'
    }, {
   
      cityName: '巴中',
      cityPinYin: 'bazhong',
      cityPY: 'bz'
    }, {
   
      cityName: '北戴河',
      cityPinYin: 'beidaihe',
      cityPY: 'bdh'
    }, {
   
      cityName: '北海',
      cityPinYin: 'beihai',
      cityPY: 'bh'
    }, {
   
      cityName: '北京',
      cityPinYin: 'beijing',
      cityPY: 'bj'
    }, {
   
      cityName: '博乐',
      cityPinYin: 'bole',
      cityPY: 'bl'
    }, {
   
      cityName: 'C',
      cityPinYin: 'c',
      cityPY: 'c'
    }, {
   
      cityName: '苍南',
      cityPinYin: 'cangnan',
      cityPY: 'cn'
    }, {
   
      cityName: '沧州',
      cityPinYin: 'cangzhou',
      cityPY: 'cz'
    }, {
   
      cityName: '常德',
      cityPinYin: 'changde',
      cityPY: 'cd'
    }, {
   
      cityName: '常州',
      cityPinYin: 'changzhou',
      cityPY: 'cz'
    }, {
   
      cityName: '巢湖',
      cityPinYin: 'chaohu',
      cityPY: 'ch'
    }, {
   
      cityName: '潮州',
      cityPinYin: 'chaozhou',
      cityPY: 'cz'
    }, {
   
      cityName: '承德',
      cityPinYin: 'chengde',
      cityPY: 'cd'
    }, {
   
      cityName: '成都',
      cityPinYin: 'chengdou',
      cityPY: 'cd'
    }, {
   
      cityName: '郴州',
      cityPinYin: 'chenzhou',
      cityPY: 'cz'
    }, {
   
      cityName: '赤壁',
      cityPinYin: 'chibi',
      cityPY: 'cb'
    }, {
   
      cityName: '赤峰',
      cityPinYin: 'chifeng',
      cityPY: 'cf'
    }, {
   
      cityName: '滁州',
      cityPinYin: 'chuzhou',
      cityPY: 'cz'
    }, {
   
      cityName: 'D',
      cityPinYin: 'd',
      cityPY: 'd'
    }, {
   
      cityName: '大理',
      cityPinYin: 'dali',
      cityPY: 'dl'
    }, {
   
      cityName: '大连',
      cityPinYin: 'dalian',
      cityPY: 'dl'
    }, {
   
      cityName: '丹东',
      cityPinYin: 'dandong',
      cityPY: 'dd'
    }, {
   
      cityName: '大庆',
      cityPinYin: 'daqing',
      cityPY: 'dq'
    }, {
   
      cityName: '大同',
      cityPinYin: 'datong',
      cityPY: 'dt'
    }, {
   
      cityName: '达州',
      cityPinYin: 'dazhou',
      cityPY: 'dz'
    }, {
   
      cityName: '德令哈',
      cityPinYin: 'delingha',
      cityPY: 'dlh'
    }, {
   
      cityName: '德清',
      cityPinYin: 'deqing',
      cityPY: 'dq'
    }, {
   
      cityName: '德阳',
      cityPinYin: 'deyang',
      cityPY: 'dy'
    }, {
   
      cityName: '德州',
      cityPinYin: 'dezhou',
      cityPY: 'dz'
    }, {
   
      cityName: '定远',
      cityPinYin: 'dingyuan',
      cityPY: 'dy'
    }, {
   
      cityName: '东莞',
      cityPinYin: 'dongguan',
      cityPY: 'dg'
    }, {
   
      cityName: '东海县',
      cityPinYin: 'donghaixian',
      cityPY: 'dhx'
    }, {
   
      cityName: '东胜',
      cityPinYin: 'dongsheng',
      cityPY: 'ds'
    }, {
   
      cityName: '东营',
      cityPinYin: 'dongying',
      cityPY: 'dy'
    }, {
   
      cityName: '都江堰',
      cityPinYin: 'doujiangyan',
      cityPY: 'djy'
    }, {
   
      cityName: '敦煌',
      cityPinYin: 'dunhuang',
      cityPY: 'dh'
    }, {
   
      cityName: 'E',
      cityPinYin: 'e',
      cityPY: 'e'
    }, {
   
      cityName: '额济纳',
      cityPinYin: 'ejina',
      cityPY: 'ejn'
    }, {
   
      cityName: '峨眉',
      cityPinYin: 'emei',
      cityPY: 'em'
    }, {
   
      cityName: '恩施',
      cityPinYin: 'enshi',
      cityPY: 'es'
    }, {
   
      cityName: '鄂州',
      cityPinYin: 'ezhou',
      cityPY: 'ez'
    }, {
   
      cityName: 'F',
      cityPinYin: 'f',
      cityPY: 'f'
    }, {
   
      cityName: '佛山',
      cityPinYin: 'foshan',
      cityPY: 'fs'
    }, {
   
      cityName: '福安',
      cityPinYin: 'fuan',
      cityPY: 'fa'
    }, {
   
      cityName: '福鼎',
      cityPinYin: 'fuding',
      cityPY: 'fd'
    }, {
   
      cityName: '涪陵',
      cityPinYin: 'fuling',
      cityPY: 'fl'
    }, {
   
      cityName: '福清',
      cityPinYin: 'fuqing',
      cityPY: 'fq'
    }, {
   
      cityName: '抚顺',
      cityPinYin: 'fushun',
      cityPY: 'fs'
    }, {
   
      cityName: '阜新',
      cityPinYin: 'fuxin',
      cityPY: 'fx'
    }, {
   
      cityName: '阜阳',
      cityPinYin: 'fuyang',
      cityPY: 'fy'
    }, {
   
      cityName: '抚州',
      cityPinYin: 'fuzhou',
      cityPY: 'fz'
    }, {
   
      cityName: '福州',
      cityPinYin: 'fuzhou',
      cityPY: 'fz'
    }, {
   
      cityName: 'G',
      cityPinYin: 'g',
      cityPY: 'g'
    }, {
   
      cityName: '赣州',
      cityPinYin: 'ganzhou',
      cityPY: 'gz'
    }, {
   
      cityName: '高密',
      cityPinYin: 'gaomi',
      cityPY: 'gm'
    }, {
   
      cityName: '格尔木',
      cityPinYin: 'geermu',
      cityPY: 'gem'
    }, {
   
      cityName: '广安',
      cityPinYin: 'guangan',
      cityPY: 'ga'
    }, {
   
      cityName: '广元',
      cityPinYin: 'guangyuan',
      cityPY: 'gy'
    }, {
   
      cityName: '广州',
      cityPinYin: 'guangzhou',
      cityPY: 'gz'
    }, {
   
      cityName: '桂林',
      cityPinYin: 'guilin',
      cityPY: 'gl'
    }, {
   
      cityName: '贵阳',
      cityPinYin: 'guiyang',
      cityPY: 'gy'
    }, {
   
      cityName: 'H',
      cityPinYin: 'h',
      cityPY: 'h'
    }, {
   
      cityName: '哈尔滨',
      cityPinYin: 'haerbin',
      cityPY: 'heb'
    }, {
   
      cityName: '海城',
      cityPinYin: 'haicheng',
      cityPY: 'hc'
    }, {
   
      cityName: '海口',
      cityPinYin: 'haikou',
      cityPY: 'hk'
    }, {
   
      cityName: '海拉尔',
      cityPinYin: 'hailaer',
      cityPY: 'hle'
    }, {
   
      cityName: '海宁',
      cityPinYin: 'haining',
      cityPY: 'hn'
    }, {
   
      cityName: '哈密',
      cityPinYin: 'hami',
      cityPY: 'hm'
    }, {
   
      cityName: '邯郸',
      cityPinYin: 'handan',
      cityPY: 'hd'
    }, {
   
      cityName: '杭州',
      cityPinYin: 'hangzhou',
      cityPY: 'hz'
    }, {
   
      cityName: '涵江',
      cityPinYin: 'hanjiang',
      cityPY: 'hj'
    }, {
   
      cityName: '汉中',
      cityPinYin: 'hanzhong',
      cityPY: 'hz'
    }, {
   
      cityName: '鹤壁',
      cityPinYin: 'hebi',
      cityPY: 'hb'
    }, {
   
      cityName: '合川',
      cityPinYin: 'hechuan',
      cityPY: 'hc'
    }, {
   
      cityName: '合肥',
      cityPinYin: 'hefei',
      cityPY: 'hf'
    }, {
   
      cityName: '鹤岗',
      cityPinYin: 'hegang',
      cityPY: 'hg'
    }, {
   
      cityName: '黑河',
      cityPinYin: 'heihe',
      cityPY: 'hh'
    }, {
   
      cityName: '衡山',
      cityPinYin: 'hengshan',
      cityPY: 'hs'
    }, {
   
      cityName: '衡水',
      cityPinYin: 'hengshui',
      cityPY: 'hs'
    }, {
   
      cityName: '衡阳',
      cityPinYin: 'hengyang',
      cityPY: 'hy'
    }, {
   
      cityName: '菏泽',
      cityPinYin: 'heze',
      cityPY: 'hz'
    }, {
   
      cityName: '淮安',
      cityPinYin: 'huaian',
      cityPY: 'ha'
    }, {
   
      cityName: '淮北',
      cityPinYin: 'huaibei',
      cityPY: 'hb'
    }, {
   
      cityName: '怀化',
      cityPinYin: 'huaihua',
      cityPY: 'hh'
    }, {
   
      cityName: '淮南',
      cityPinYin: 'huainan',
      cityPY: 'hn'
    }, {
   
      cityName: '黄山',
      cityPinYin: 'huangshan',
      cityPY: 'hs'
    }, {
   
      cityName: '黄石',
      cityPinYin: 'huangshi',
      cityPY: 'hs'
    }, {
   
      cityName: '呼和浩特',
      cityPinYin: 'huhehaote',
      cityPY: 'hhht'
    }, {
   
      cityName: '惠州',
      cityPinYin: 'huizhou',
      cityPY: 'hz'
    }, {
   
      cityName: '葫芦岛',
      cityPinYin: 'huludao',
      cityPY: 'hld'
    }, {
   
      cityName: '湖州',
      cityPinYin: 'huzhou',
      cityPY: 'hz'
    }, {
   
      cityName: 'J',
      cityPinYin: 'j'