微信小程式實訓 Day 03 實習日誌

2021-09-24 14:23:20 字數 2891 閱讀 6621

裡面的高寬屬性沒有用了

2)可以迴圈切輪播圖

2.框架裡的資料繫結

簡單繫結:

3.條件渲染

因為wx:if之中的模板也可能包含資料繫結,所以當wx:if的條件值切換時,框架有乙個區域性渲染的過程,因為它會確保條件塊在切換時銷毀或重新渲染。

同時wx:if也是惰性的,如果在初始渲染條件為false,框架什麼也不做,在條件第一次變成真的時候才開始區域性渲染。

相比之下,hidden就簡單的多,元件始終會被渲染,只是簡單的控制顯示與隱藏。

一般來說,wx:if有更高的切換消耗而hidden有更高的初始渲染消耗。因此,如果需要頻繁切換的情景下,用hidden更好,如果在執行時條件不大可能改變則wx:if較好。

4.列表渲染

item和index

wx:for也可以巢狀,下邊是乙個九九乘法表

如果列表中專案的位置會動態改變或者有新的專案新增到列表中,並且希望列表中的專案保持自己的特徵和狀態(如 input 中的輸入內容,switch 的選中狀態),需要使用wx:key來指定列表中專案的唯一的識別符號。

wx:key的值以兩種形式提供

字串,代表在 for 迴圈的 array 中 item 的某個 property,該 property 的值需要是列表中唯一的字串或數字,且不能動態改變。

保留關鍵字*this代表在 for 迴圈中的 item 本身,這種表示需要 item 本身是乙個唯一的字串或者數字,如:

當資料改變觸發渲染層重新渲染的時候,會校正帶有 key 的元件,框架會確保他們被重新排序,而不是重新建立,以確保使元件保持自身的狀態,並且提高列表渲染時的效率。

如不提供wx:key,會報乙個warning, 如果明確知道該列表是靜態,或者不必關注其順序,可以選擇忽略。

示例**:

在開發者工具中預覽效果

} 

switch

add to the front

} add to the front

page(,,,

,,,],

numberarray: [1, 2, 3, 4]

},switch: function(e)

this.setdata()

},addtofront: function(e) ].concat(this.data.objectarray)

this.setdata()

},addnumbertofront: function(e))

}})

5.模板template

6.獲取手機資訊

7.元件裡的地圖map

map.wxml

當前的經緯度:},}

map.wxss

/* pages/map/map.wxss */

page

map.wxjs

// pages/map/map.js

page(],

},onload: function () ,

onready: function () )}})

}})

微信小程式實訓day03

page 生命週期函式 監聽頁面載入 onload function options 生命週期函式 監聽頁面初次渲染完成 onready function var markers1 markers1.push markers markers1 然後是今天的第二個作業,通過使用者同意獲取使用者手機包括...

實訓day03 迴圈,記憶體,陣列

2018.06.06 1.switch用法 scanner sc new scanner system.in while true 注意 如果執行完後,沒有break.程式會繼續往下執行,直到結束。2.迴圈 for 初始化 條件 控制 for int i 0 i 5 i system.out.pri...

實訓第三天 微信小程式元件

2.資料繫結 page.js page 列表渲染 page.js page 條件渲染 webview mina page.js page 3.模板template 頁內模板,只能在本頁面內使用 定義模板 定義乙個名字為model的模板 obj解構後 使用模板 資料 為指令碼定義的obj 解構obj,...