温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

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

发布时间:2021-11-24 16:31:39 来源:亿速云 阅读:132 作者:柒染 栏目:大数据

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

需求

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

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

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI