微信小程序 选中目标 在后面显示一个对号_微信小程序点击哪个哪个打钩csdn

先看下效果图

这个实现有很多种 ,这里提供一种个人认为最简单的方法

wxml代码如下

   <view>
      <view class='list_item_maim' wx:for="{{city}}" wx:key="{{city}}" data-id="{{item.cityname}}" bindtap='click'>
        <view class='list_item_body'>
         <view class='open_city_txt'>{{item.cityname}}</view>
         <image src='../../../images/city_select.png' class='select_city_icon' wx:if="{{selectCity==item.cityname}}"></image>
        </view>
      </view>
    </view>

js代码如下

Page({
 
 
  /**
   * 页面的初始数据
   */
  data: {
    city:[
      { "cityname": "北京"},
      { "cityname": "上海"},
      { "cityname": "广州"},
      { "cityname": "河南"},
      { "cityname": "淮阳"},
      { "cityname": "太康"}, 
      { "cityname": "胡庄"}
    ],
    selectCity :""
  },
 
  click:function(e){
     console.log(e)
     console.log(e.currentTarget.dataset.id)
     this.setData({
       selectCity: e.currentTarget.dataset.id
     })
     
  },
 
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    wx.setNavigationBarTitle({
      title: '城市选择',
    })
  },
 
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },
 
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },
 
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },
 
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
  },
 
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
  },
 
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
  },
 
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  }
})

data-xx 是传入数据的 ,根据是否获取数据控制 image 是否显示 ,是不是很简单....