微信小程式之wx:for迴圈輸出及require引入外部資料
迴圈輸出很有用滴
格式:
<view wx:for="{{array}}" wx:for-item="item" wx:for-index="idx">
{{index}}: {{item.message}}
</view>
wx:for-item 指定陣列當前元素的變數名;
wx:for-index 指定陣列當前下標的變數名;
名稱都可以自定義,預設為iten和idx;
for可巢狀使用;
當被迴圈的值為字串時,自動將字串拆分為字串陣列;
花括號和引號件有空格出現時,比如:wx:for=“{{[‘a’,‘b’,‘c’]}} ”,將等同於wx:for=“{{[‘a’,‘b’,‘c’] + ' '}} ”;
如果列表中專案的位置會動態改變或者有新的專案新增到列表中,並且希望列表中的專案保持自己的特徵和狀態(如 <input/> 中的輸入內容,<switch/> 的選中狀態),需要使用wx:key來指定列表中專案的唯一的識別符號。
wx:key 的值以兩種形式提供
1、字串,代表在 for 迴圈的 array 中 item 的某個 property,該 property 的值需要是列表中唯一的字串或數字,且不能動態改變。
<switch wx:for="{{objectArray}}" wx:key="unique" style="display: block;"> {{item.id}} </switch>
2、保留關鍵字 *this 代表在 for 迴圈中的 item 本身,這種表示需要 item 本身是一個唯一的字串或者數字,如:
當資料改變觸發渲染層重新渲染的時候,會校正帶有 key 的元件,框架會確保他們被重新排序,而不是重新建立,以確保使元件保持自身的狀態,並且提高列表渲染時的效率。
<switch wx:for="{{numberArray}}" wx:key="*this" style="display: block;"> {{item}} </switch>
如不提供 wx:key,會報一個 warning,
如果明確知道該列表是靜態,或者不必關注其順序,可以選擇忽略。例項:
相關推薦
微信小程式之wx:for迴圈輸出及require引入外部資料
迴圈輸出很有用滴 格式: <view wx:for="{{array}}" wx:for-item="item" wx:for-index="idx"> {{index}}: {{item.message}} </view> wx:for-ite
微信小程式(4)wx:for迴圈
wx:for 在元件上使用 wx:for 控制屬性繫結一個數組,即可使用陣列中各項的資料重複渲染該元件。 預設陣列的當前項的下標變數名預設為 index,陣列當前項的變數名預設為 item <view wx:for="{{array}}
微信小程式-wx:for 迴圈列表引數
獲取了 N 條資訊(具體有多少條不確定),如何在介面中動態呈現出來呢?.wxml 程式碼<view wx:for="{{items}}" wx:for-index="idx" wx:for-ite
微信小程式之攜帶for迴圈角標引數的點選事件
wx:for預設的列表下的角標是index ,data-index="{{index}}" 這個屬性為標記列表角標,有了它我們就能在事件中獲取列表 item的角標<view bindtap='click' style="line-height:40px;" wx:key
微信小程式之swiper限制迴圈滑動
最近接的一個單子是使用swiper來達到頁面之間完美滑動的效果的。也就三個頁面首頁、內容頁、尾頁。 但是客戶要求首頁不能滑到尾頁,尾頁不能滑到首頁。 在官方文件中沒有找到方法,因此只能繞彎路了。 wxml頁面程式碼:重點在於 current='{{show_index}}'
微信小程式裡 wx:for和wx:for-item區別(補充下wx:key)
wx:for 一維陣列情況: 在頁面上 view wx:for ="{{list}}" {{item.id}} view 是迴圈list item是List的別名 多維陣列情況: view wx:fo
微信小程式之wx.showActionSheet(OBJECT)彈出的後續處理
這是官方的文件這個api是用來顯示操作選單,彈出一個選單框,用來顯示一些操作,如下圖檢視文件OBJECT引數說明:引數 型別 必填 說明 itemList String Array 是 按鈕的文字陣列,陣列長度最大為6個 itemColor HexColor
微信小程式之 wx.request統一呼叫
起因 在小程式裡發起網路請求的時候需要寫很多的引數,當頻繁呼叫時,每次都寫真心覺得累,那就封個方法統一呼叫吧 官方文件 官方文件 官方示例 wx.request({ url: '
微信小程式之wx.request:fail錯誤,真機預覽請求無效問題解決,安卓,ios網路預覽異常
問題描述:域名已經備案,我全部都有,也在後臺配置了,但是手機預覽,還是請求失敗, PC端是可以請求資料出來的 新版開發者工具增加了https檢查功能;可使用此功能直接檢查排查ssl協議版本問題:可能原因:0:後臺域名沒有配置0.1:域名不支援https1:沒有重啟工具;2:
微信小程式之地理位置授權 wx.getLocation
1. 授權地理位置 點選按鈕,彈出授權彈窗,點選允許後,在以後的操作中可以隨時獲取到使用者地理位置 點選拒絕後,將無法獲取到地理位置,也無法再次點選彈出彈窗。 <button bindtap='onAuthLocation' >授權位置</button> onAut
微信小程式之使用者資訊授權 wx.getUserInfo
使用者授權 <button open-type="getUserInfo" bindgetuserinfo='getUser'>授權使用者資訊</button> getUser(e) { console.log(e); wx.getUserInfo({
微信小程式之條件渲染 wx:if與hidden比較
wx:if 1、在框架中,使用wx:if="{{condition}}" 來判斷是否需要渲染該程式碼: 如果條件成立就渲染 <view wx:if="{{condition}}">123</view> 2、在花括號中也可以寫條件判斷 <view>
微信小程式之音訊播放-wx.createInnerAudioContext()小坑
咱們先看看官方示例地址:https://mp.weixin.qq.com/debug/wxadoc/dev/api/createInnerAudioContext.html建立innerAudioCon
微信小程式判斷wx:if wx:for template
view是元件類wx:if <view wx:if="{{condition}}"><p>true</p></view> <view wx:if=
重寫微信小程式的wx.request,使之實現cookie的全部功能
微信小程式的wx.request不支援cookie功能,所以無法實現儲存登入會話等需要cookie支援的功能。 我重寫了這個功能,使微信小程式環境完全模擬了瀏覽器的cookie功能。 有了它,就相當於wx.request支援了cookie功能,可以盡情的使用cookie跟
微信小程序-wx:for 循環列表
page style gin script ack div post 代碼 bsp 獲取了 N 條信息(具體有多少條不確定),如何在界面中動態呈現出來呢? .wxml 代碼 <view wx:for="{{items}}" wx:for-index="index
微信小程序之wx.showmodal
res 城市 pre data 綁定 log mod cancel http 1. . wx.showModal({ title: "2222步", content: currentCache ? "確定為自己城市添加步數嗎" : "確定取消為
微信小程式之物流狀態時間軸
一個月左右沒更新部落格了,最近有點懶了哈(工作上真的忙),很多工作上學習到的東西都沒有及時分享出來,有點愧疚,不過自己最近一直在收集資料和學習一些新技術,最主要是想要構建自己的前端技術體系和自定義一個前端規範文件,哈哈哈。說重點啦,微信小程式裡面開發的商城模組還挺多的,剛好寫了一個物流狀態的時間軸,簡單分享一
微信小程式之微信登陸 —— 微信小程式教程系列(20)
簡介: 微信登陸,在新建一個微信小程式Hello World專案的時候,就可以看到專案中出現了我們的微信頭像,其實這個Hello World專案,就有一個簡化版的微信登陸。只不過是,還沒有寫入到咱們自家的後臺中而已。 新建一個Hello World專案,找到a
11.微信小程式之canvas生成圖片並儲存到手機
在小程式中,會有這樣一種需求,儲存某一個頁面並將其分享到朋友圈。一般的做法是:將這個頁面用canvas繪製出來,通過wx.canvasToTempFilePath,把當前畫布指定區域的內容匯出生成指定大小的圖片。然後再通過wx.saveImageToPhotosAlbum,儲存圖片到系統相簿。由