微信小程序?qū)崙?zhàn)中位置鬧鈴如何利用條件渲染實(shí)現(xiàn)列表控件

微信小程序?qū)崙?zhàn)中位置鬧鈴如何利用條件渲染實(shí)現(xiàn)列表控件，針對(duì)這個(gè)問題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡單易行的方法。

需求

在視頻第32秒左右，有一個(gè)選擇編輯對(duì)象的畫面，它的功能是一個(gè)列表控件。用戶通過它選擇想要編輯的對(duì)象。今天說明這個(gè)畫面的實(shí)現(xiàn)。

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循環(huán)顯示所有的監(jiān)控點(diǎn)，如果index和current_alarm相等，顯示綠色背景文本，否則顯示白色背景文本。index是循環(huán)表示的索引，而current_alarm的值在linstpoint.js中被設(shè)定。

listpoint.xml（片段）

Page({

      data: {

        alarms: [{title:''}],

        current_alarm: 0

      },

      //事件處理函數(shù)

      alarmTaped:function(e){

           this.setData({current_alarm:e.target.id});

      },

}

data中定義了一個(gè)current_alarm，當(dāng)畫面中的文字被點(diǎn)擊時(shí)，alarmTaped就會(huì)被調(diào)用，這時(shí)參數(shù)的e會(huì)帶著被選中項(xiàng)目的索引信息。使用setData設(shè)定current_alarm，就會(huì)引起畫面的重新渲染。這樣新的選擇狀態(tài)就表示出來了。

關(guān)于微信小程序?qū)崙?zhàn)中位置鬧鈴如何利用條件渲染實(shí)現(xiàn)列表控件問題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識(shí)。