微信小程序wx:for的使用，動(dòng)態(tài)傳參
|
作者：萌神哆啦A夢(mèng)，來(lái)自原文地址 一：wx:for的使用在小程序的開(kāi)發(fā)過(guò)程中，經(jīng)常會(huì)用到在前端頁(yè)面循環(huán)打印一個(gè)數(shù)組或者對(duì)象的數(shù)據(jù)，這樣的話就需要用wx：for來(lái)實(shí)現(xiàn)。 一般情況下，小程序的utils這個(gè)文件夾下，我們可以把本地的數(shù)據(jù)寫(xiě)進(jìn)去，封裝成.js文件，提供對(duì)外暴露的接口，然后讀取本地?cái)?shù)據(jù)，這些在上一篇博客中有詳細(xì)介紹。我們最后說(shuō)到寫(xiě)好的本地?cái)?shù)據(jù)可以另一個(gè)頁(yè)面讀?。?/p>
在data{}中賦值后，showData就可以直接在wxml中顯示了。接下來(lái)說(shuō)下如何在wxml頁(yè)面用wx:for循環(huán)顯示數(shù)組，下面是示例：
wx：for = “”，“”中寫(xiě)當(dāng)前小程序js頁(yè)面中data的對(duì)象名。 實(shí)際效果圖（并非上述代碼實(shí)現(xiàn)）:
二：小程序的動(dòng)態(tài)傳參在微信小程序的開(kāi)發(fā)過(guò)程中經(jīng)常會(huì)用到動(dòng)態(tài)傳參，比如根據(jù)某一頁(yè)面?zhèn)鲄⒌牟煌?，加載不同的新的頁(yè)面。接下來(lái)介紹下如何實(shí)現(xiàn)。 上一篇博客中介紹了如何用wx：for循環(huán)顯示數(shù)組，一般情況下我們要實(shí)現(xiàn)的功能是點(diǎn)擊不同的元素進(jìn)入不同的頁(yè)面，比如在另一個(gè)頁(yè)面加載某個(gè)元素的詳細(xì)信息。 跳轉(zhuǎn)這里采用navigator跳轉(zhuǎn)，在navigator跳轉(zhuǎn)的鏈接上將參數(shù)加上去： index.wxml（根據(jù)點(diǎn)擊頁(yè)面的不同傳遞參數(shù)）
id是在本地?cái)?shù)據(jù)中已經(jīng)寫(xiě)好的，參見(jiàn)以前的博客，它也對(duì)應(yīng)了每一條數(shù)據(jù)其他詳細(xì)信息。由此可以想到，我們只要在下一級(jí)頁(yè)面根據(jù)傳遞參數(shù)id再在本地?cái)?shù)據(jù)中查詢，然后將查詢結(jié)果進(jìn)行顯示，就做到了加載詳細(xì)信息這個(gè)功能。 logs.js(接受index.wxml傳遞的參數(shù)并處理)
searchmtdata這個(gè)方法在之前的博客中已經(jīng)有說(shuō)明，就是根據(jù)id的值來(lái)查詢，返回一個(gè)list中具體的對(duì)象，即某個(gè)item的詳細(xì)信息。 onLoad:function這個(gè)函數(shù)在頁(yè)面加載時(shí)就會(huì)執(zhí)行一次，options就是接收的從index.wxml傳遞過(guò)來(lái)的參數(shù)。根據(jù)id查詢到具體的list對(duì)象后再進(jìn)行賦值，此時(shí)data_**中的數(shù)據(jù)就是某個(gè)item的詳細(xì)信息了。 logs.wxml（對(duì)item的詳細(xì)信息進(jìn)行顯示）
實(shí)現(xiàn)效果截圖：
點(diǎn)擊具體某個(gè)item
|
