小編給大家分享一下微信小程序如何實(shí)現(xiàn)給嵌套template模板傳遞數(shù)據(jù)的方式有哪些,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
我們提供的服務(wù)有:成都做網(wǎng)站、成都網(wǎng)站建設(shè)、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、伊美ssl等。為上1000+企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù),是有科學(xué)管理、有技術(shù)的伊美網(wǎng)站制作公司
一、template模板調(diào)用的數(shù)據(jù)是單一形態(tài)時:
indexTemplate模板:
<import src="../lookAndCollect-template/lookAndCollect-template.wxml" /> <template name="indexTemplate"> <view class="user-info"> <image class="avatar" src="{{avatar}}"></image> <text class="name">{{name}}</text> <text class="date">{{date}}</text> </view> <view class="news"> <text class="news-title">{{title}}</text> <image class="news-img" src="{{newsImg}}"></image> <text class="news-content">{{content}}</text> </view> <template is="reviewAndCollect" data="{{review,look}}"></template> </template>
lookAndCollect模板:
<template name="lookAndCollect-template"> <view class="lookAndCollect-template"> <view class="lookAndCollect-template-review"> <image src="/smallApp/images/icon/view.png"></image> <text>{{look}}</text> </view> <view class="lookAndCollect-template-look"> <image src="/smallApp/images/icon/chat.png"></image> <text>{{collect}}</text> </view> </view> </template>
indexTemplate模板在index.wxml中的引用:
<block wx:for="{{newsData}}" wx:for-item="newsItem"> <view class="item"> <template is="indexTemplate" data="{{...newsItem}}" /> </view> </block>
index.wxml對應(yīng)的index.js寫法:
var newsDataList = require("../index-data.js"); Page({ data: { }, onLoad: function (option) { this.setData({ newsData: newsDataList.dataList }); } })
模板中使用單一形式的數(shù)據(jù):
var news_data = [ { listId: "0", avatar: "/smallApp/images/avatar/1.png", name: "我是大貓貓", date: "16分鐘前", title: "搞事情?法國招聘新特工 會漢語成必備條件", newsImg: "/smallApp/images/post/crab.png", content: "是的,你沒看錯,據(jù)法國《費(fèi)加羅報》報道,法國境外安全總局(DGSE)欲在2019年前招募600名新特工,而且新的特工必須年輕、有高等文憑,會多國語言,并且熟悉電腦與互聯(lián)網(wǎng)。", review: "0", look: "30" }, { listId: "1", avatar: "/smallApp/images/avatar/2.png", name: "風(fēng)口上的豬", date: "1天前", title: "順豐控股上市次日盤中漲停 離首富差4個漲停", newsImg: "/smallApp/images/post/bl.png", content: "根據(jù)之前借殼方鼎泰新材發(fā)布的公告,該公司定增完成后,第一大股東將變更為深圳明德控股發(fā)展有限公司(簡稱“明德控股”),持股比例為64.58%,后4名分別為寧波順達(dá)豐潤投資管理合伙企業(yè)(有限合伙)…", review: "100", look: "380" } ]; module.exports = { dataList: news_data }
如果需要在嵌套的模板中傳入多個數(shù)據(jù),可以將每個數(shù)據(jù)用逗號隔開。
二、嵌套模板調(diào)用包括object對象時的調(diào)用方法:
模板中使用的數(shù)據(jù)review和look以對象的形式呈現(xiàn)時:
var news_data = [ { listId: "0", avatar: "/smallApp/images/avatar/1.png", name: "我是大貓貓", date: "16分鐘前", title: "搞事情?法國招聘新特工 會漢語成必備條件", newsImg: "/smallApp/images/post/crab.png", content: "是的,你沒看錯,據(jù)法國《費(fèi)加羅報》報道,法國境外安全總局(DGSE)欲在2019年前招募600名新特工,而且新的特工必須年輕、有高等文憑,會多國語言,并且熟悉電腦與互聯(lián)網(wǎng)。", reviewAndCollect { review: "0", look: "30" } }, { listId: "1", avatar: "/smallApp/images/avatar/2.png", name: "風(fēng)口上的豬", date: "1天前", title: "順豐控股上市次日盤中漲停 離首富差4個漲停", newsImg: "/smallApp/images/post/bl.png", content: "根據(jù)之前借殼方鼎泰新材發(fā)布的公告,該公司定增完成后,第一大股東將變更為深圳明德控股發(fā)展有限公司(簡稱“明德控股”),持股比例為64.58%,后4名分別為寧波順達(dá)豐潤投資管理合伙企業(yè)(有限合伙)…", reviewAndCollect { review: "120", look: "300" } } ]; module.exports = { dataList: news_data }
indexTemplate模板
<import src="../lookAndCollect-template/lookAndCollect-template.wxml" /> <template name="indexTemplate"> <view class="user-info"> <image class="avatar" src="{{avatar}}"></image> <text class="name">{{name}}</text> <text class="date">{{date}}</text> </view> <view class="news"> <text class="news-title">{{title}}</text> <image class="news-img" src="{{newsImg}}"></image> <text class="news-content">{{content}}</text> </view> <template is="reviewAndCollect" data="{{reviewAndCollect}}"></template> </template>
lookAndCollect模板:
<template name="lookAndCollect-template"> <view class="lookAndCollect-template"> <view class="lookAndCollect-template-review"> <image src="/smallApp/images/icon/view.png"></image> <text>{{reviewAndCollect.look}}</text> </view> <view class="lookAndCollect-template-look"> <image src="/smallApp/images/icon/chat.png"></image> <text>{{reviewAndCollect.collect}}</text> </view> </view> </template>
ps: indexTemplate模板在index.wxml中的引用,以及index.wxml對應(yīng)的index.js的寫法,同第一種。
以上是“微信小程序如何實(shí)現(xiàn)給嵌套template模板傳遞數(shù)據(jù)的方式有哪些”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
當(dāng)前名稱:微信小程序如何實(shí)現(xiàn)給嵌套template模板傳遞數(shù)據(jù)的方式有哪些
當(dāng)前地址:http://bm7419.com/article4/jcspoe.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站策劃、外貿(mào)建站、商城網(wǎng)站、面包屑導(dǎo)航、全網(wǎng)營銷推廣、網(wǎng)站內(nèi)鏈
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)