天天看點

微信小程式開發架構——清單渲染 ——條件渲染

每個商品對應許多品牌,需要把每個品牌對應商品資訊展現給使用者、當商品資訊比較少,可以一行一行寫wxml标簽。

    當商品資訊比較多,又不固定的時候、就推薦使用小程式渲染屬性了。

    通過wx:for綁定數組,使用wxml清單渲染屬性、在data對象裡定義了items數組、裡面是各個商品名稱,在wxml檔案内block标簽裡通過wxfor屬性傳入數組。

    index變量:index變量指的是目前元素在數組的下标,也可以通過wx:for="{{index}}"屬性,設定變量名。

    item變量:item變量指的是數組中的目前元素,也可以通過wx:for="{{item}}"屬性,指定想要的一個變量名。

    wx:key屬性:key代表項目中唯一的标志符、能保持清單項目中自身的一個狀态,在頁面重新渲染的時候確定帶有key元件重新的排序,而不是重新的渲染、進而提高頁面渲染的效率。

    如圖:

微信小程式開發架構——清單渲染 ——條件渲染

block不是元件、隻是包裝元素,在頁面渲染的時候、block不會被渲染出來的。

微信小程式開發架構——清單渲染 ——條件渲染

每天吃什麼?用小程式條件渲染屬性。

    index.wxml中語句的含義:綁定了condition變量、當傳入的condition變量值是1的時候、今天就吃餃子,當傳入的condition變量值是2的時候、今天就吃米飯,

    當傳入的condition變量值是3的時候,今天就吃面食。

    條件渲染是通過3種屬性控制的,是 wx:if、wx:elif、wx:else 這3種屬性共同來控制的條件渲染。

    index.js檔案,在data對象定義了condition變量,變量值的意思生成1到3随機整數。

    Mate.random 函數,它是生成‘0’到‘1’的浮點随機數。

    Mate.floor 函數,它是對一個浮點數進行處理,來傳回一個下區整數。

    傳給vs檔案的condition變量值是3,小程式頁面幫我們找到 面食。

    wx:if 和 hidden的差別:他們都給控制元素的顯示,wx:if在切換是架構有一個局部渲染的過程,會多次進行重複渲染,有更高的切換消耗的。    

    hidden會有更多的初始化渲染消耗,如果元素平凡切換顯示,用hidden更适合!

繼續閱讀