微信小程序頁面渲染實現(xiàn)方法
這篇文章主要介紹了微信小程序頁面渲染實現(xiàn)方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
條件渲染:wx:if, wx:elif, wx:else
<view wx:if="{{list.length > 5}}" >1</view> <view wx:elif="{{list.length > 2}}">2</view> <view wx:else>3</view>
由于wx:if是一個控制屬性,需要將它添加到一個標簽上,如果要一次性判斷多個組件標簽,可以使用<block></block>標簽將多個組件包裝起來,并在上邊使用wx:if 控制屬性,
<block> <view wx:if="{{list.length > 5}}" >1</view> <view wx:elif="{{list.length > 2}}">2</view> <view wx:else>3</view> </block>
blcok 是一個包裝元素,不會在頁面做任何渲染。
hidhen:
在小程序中,hidden = "{{condition}}" 也能控制元素的顯示和隱藏。為true隱藏,為false顯示
<view hidden = "{{condition}}" >123</view>
列表渲染: wx:for
如果沒有指定參數(shù), 默認索引是index, 值是item
<view wx:for="{{userList}}" wx:key="index">索引是: {{index}}, 值是: {{item}}</view> data: { userList :['zhangsan', "lisi", 'wnagwu'] }
手動指定索引和當前項的變量名:
<view wx:for="{{userList}}" wx:key="index" wx:for-index="i" wx:for-item="it"> 索引是: {{i}}, 值是: {{it}} </view> data: { userList :['zhangsan', "lisi", 'wnagwu'] }
block wx:for 列表渲染
<block wx:for="{{userList}}" wx:key="index" wx:for-index="i" wx:for-item="it"> <view>索引是: {{i}}, 值是: {{it}}</view> </block>
key 在列表循環(huán)中的作用:
如果列表中項目的位置會動態(tài)改變或者有新的項目添加到列表中,并且希望列表中的項目保持自己的特征和狀態(tài)(如<input />)中輸入內(nèi)容,<checkbox/>的選中狀態(tài),徐奧使用 wx:key來指定列表中項目的唯一標識符。
當數(shù)據(jù)改變觸發(fā)渲染層重新渲染的時候,會校正帶有key的組件,框架會確保他們被重新排序,而不是重新創(chuàng)建,以確保使組件保持自身狀態(tài),并且提高列表渲染時的效率。
key值的注意點:
key值必須具有唯一行,且不能動態(tài)改變。
key的值必須是數(shù)字或字符串
保留關鍵子*this代表在for循環(huán)中的item本身,它也可以充當key值,但是有以下限制,需要item本身是一個唯一的字符串或數(shù)字。
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
layui動態(tài)渲染生成select的option值方法
今天小編就為大家分享一篇layui動態(tài)渲染生成select的option值方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09JS中for,for...in,for...of和forEach的區(qū)別和用法實例
JS遍歷數(shù)組(循環(huán)數(shù)組)的方式有多種,可以使用傳統(tǒng)的for循環(huán),也可以使用升級版的for in循環(huán),還可以使用Array類型的forEach() 方法,這篇文章主要給大家介紹了關于JS中for、for...in、for...of和forEach的區(qū)別和用法的相關資料,需要的朋友可以參考下2021-11-11微信小程序?qū)崿F(xiàn)發(fā)送模板消息功能示例【通過openid推送消息給用戶】
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)發(fā)送模板消息功能,結合實例形式分析了微信小程序?qū)崿F(xiàn)通過openid推送消息給用戶相關操作技巧,需要的朋友可以參考下2019-05-05js刪除數(shù)組元素、清空數(shù)組的簡單方法(必看)
下面小編就為大家?guī)硪黄猨s刪除數(shù)組元素、清空數(shù)組的簡單方法(必看)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-07-07寫了一個layout,拖動條連貫,內(nèi)容區(qū)可為iframe
寫了一個layout,拖動條連貫,內(nèi)容區(qū)可為iframe...2007-08-08