微信小程序實戰中位置鬧鈴如何利用條件渲染實現列表控件

微信小程序實戰中位置鬧鈴如何利用條件渲染實現列表控件，針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

需求

在視頻第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，就會引起畫面的重新渲染。這樣新的選擇狀態就表示出來了。

關于微信小程序實戰中位置鬧鈴如何利用條件渲染實現列表控件問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。