EA&UML日拱一卒-微信小程序实战：位置闹铃 (9)-利用条件渲染实现列表控件
先看一小段视频，这是小程序目前的最新状态。到今天为止，小程序已经基本上实现了创建监控点和编辑监控点的功能。
需求
在视频第32秒左右，有一个选择编辑对象的画面，它的功能是一个列表控件。用户通过它选择想要编辑的对象。今天说明这个画面的实现。
listpoint.wxml（片段）
<!--listpoint.wxml-->
<scroll-view scroll-y style="height:90vh;display:flex;flex-direction:column">
<view bindtap="alarmTaped" wx:for="{{alarms}}" wx:for-item="alarm" wx:key="index"style="display:flex;flex-direction:column">
<text wx:if="{{current_alarm==index}}" id="{{index}}" style = "background-color:lightgreen;" class="log-item">{{index + 1}}.{{alarm.title}} </text>
<text wx:else id="{{index}}" style = "background-color:white;" class="log-item">{{index + 1}}.{{alarm.title}}</text>
</view>
</scroll-view>
首先使用wx:for循环显示所有的监控点，如果index和current_alarm相等，显示绿色背景文本，否则显示白色背景文本。index是循环表示的索引，而current_alarm的值在linstpoint.js中被设定。
listpoint.xml（片段）
Page({
data: {
alarms: [{title:''}],
current_alarm: 0
},
//事件处理函数
alarmTaped:function(e){
this.setData({current_alarm:e.target.id});
},
}
data中定义了一个current_alarm，当画面中的文字被点击时，alarmTaped就会被调用，这时参数的e会带着被选中项目的索引信息。使用setData设定current_alarm，就会引起画面的重新渲染。这样新的选择状态就表示出来了。
小程序代码
最新代码已经将代码上传到GitHub。
工程全体：
https://github.com/xueweiguo/alarmmap
list.wxml
https://raw.githubusercontent.com/xueweiguo/alarmmap/master/pages/listpoint/listpoint.wxml
list.js
https://raw.githubusercontent.com/xueweiguo/alarmmap/master/pages/listpoint/listpoint.js
写在文章的最后