微信小程式之wxml的基本使用

2021-10-01 12:45:30 字數 1832 閱讀 1291

條件渲染(wx:if)

模板(template)

多模板選擇

我們一般用到的就是:頁面布局,引用資料

一般引用的資料是js中宣告的data塊的資料

引用方式是通過使用 「}」

比如:

一般的控制項渲染就不說了,這裡說列表渲染主要是在控制項中用到了for迴圈

一般的,wx:key是跟著wx:for的,值一般是item的唯一標識,一般這個屬性是item中唯一的且不會改變的字串或者數字

wx:key="*this"也就是在item自己就是字串和數字的時候使用,表示用自己來當這個唯一標識

使用wx:key和不使用wx:key的區別可以看下部落格,簡單來說,就是:

使用了wx:key的時候,當列表發生改變的時候,老的item不會重繪,保留老item的內容和狀態

不使用wx:key的時候,當列表發生改變的時候,所有列表重繪,老item的狀態不會保留

最明顯的表現應用就是在item中進行了狀態切換的時候

wx:for-index表示用idx命名當前角標

wx:for-item表示用itemname來命名當前的item

不宣告的話,預設item的引用就是item

只會展示符合條件的view,比如上面的例子中,只會展示第三個view

參考上面的

比如:

這個模板是針對元件的重用的

定義乙個wxml檔案,作為公用的wxml,內容標籤是template,特點是有乙個name屬性

在需要引用模板的頁面,也就是page.wxml引入模板檔案,引用方式是import

然後在填充模板的地方使用template標籤,使用is指定模板的名稱,data傳遞資料

舉例我們先看一下資料:

模板的宣告:

在頁面,也就是page.wxml中使用import引入模板檔案,然後在填充控制項的地方:

is指定了模板的名稱

data指定也傳遞的data中的資料,注意表示方式

比如:

微信小程式 框架wxml(六)wxml引用

wxml提供兩種引用方式,import和include 1.import和include的區別 1 import 可以在檔案中使用被import檔案中定義的template include可以在檔案中使用template及template外的內容。2 import有作用域的概念,只能引用直接impo...

微信小程式 四 wxml詳解

wxml中的動態資料均來自對應js檔案中page的data 在js中訪問page的data用this.data 改變data中某個屬性的值用setdata方法 資料繫結使用mustache語法 雙大括號 將變數包起來.可以作用於以下區域 1.作用於內容 page 2.作用於元件屬性 page 3.作...

微信小程式開發《三》 WXML

wxml weixin markup language 是框架設計的一套標籤語言,結合基礎元件 事件系統,可以構建出頁面的結構。使用模板 使用 is 屬性,宣告需要的使用的模板,然後將模板所需要的 data 傳入,如 view firstname lastname page.js page staf...