先看一小段视频，这是小程序目前的最新状态。到今天为止，小程序已经基本上实现了创建监控点和编辑监控点的功能。


视频1M，请酌情观看。

​​ http://v.youku.com/v_show/id_XMzQzMDA5MzIyMA==.html ​​


需求


在视频第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:});
  },
}

data中定义了一个current_alarm，当画面中的文字被点击时，alarmTaped就会被调用，这时参数的e会带着被选中项目的索引信息。使用setData设定current_alarm，就会引起画面的重新渲染。这样新的选择状态就表示出来了。


小程序代码


最新代码已经将代码上传到GitHub。


工程全体：

​​https:///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​​


写在文章的最后


既然已经读到这里了，拜托大家再用一分钟时间，将文章转发到各位的朋友圈，微信群中。本公众号的成长需要您的支持！

以上就是今天的文章，欢迎点赞并推荐给您的朋友！

阅读更多更新文章，请扫描下面二维码，关注微信公众号【面向对象思考】


EA&UML日拱一卒-微信小程序实战：位置闹铃 (9)-利用条件渲染实现列表控件_闹