先看下效果图
这个实现有很多种 ,这里提供一种个人认为最简单的方法
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 是否显示 ,是不是很简单....