微信小程序实战中位置闹铃如何利用条件渲染实现列表控件

微信小程序实战中位置闹铃如何利用条件渲染实现列表控件，针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

需求

在视频第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，就会引起画面的重新渲染。这样新的选择状态就表示出来了。

关于微信小程序实战中位置闹铃如何利用条件渲染实现列表控件问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注编程网精选频道了解更多相关知识。