微信小程序開發之--"template模板“的應用
阿新 • • 發佈:2018-03-24
bottom lis code ddl 定義 hot 模板 src con
第一步:定義模板
①:新建一個template文件夾用來管理項目中所有的模板(本文案例定義文件夾名為:temp);
②、新建一個wxml文件來定義模板(本文案例定義文件夾名為:temp.wxml);
③、使用name屬性,作為模板的名字。然後在<template name=‘模板名稱‘>
代碼片段<template/>
內定義代碼片段。
1 <!--pages/temp/temp.wxml--> 2 <template name=‘list‘> 3 4 <view class=‘expertStyle‘> 5 6 <image class=‘expertPhoto‘ src=‘{{img}}‘></image> 7 8 <view class=‘expertInfo‘> 9 <view class=‘infoTop‘> 10 <view class=‘topName‘>{{name}}</view> 11 <view class=‘topType‘ wx:for="{{expertTitle}}" wx:key="*this">{{item.title}}</view> 12 </view> 13 14 <view class=‘infoMiddle‘>{{info}}</view>< 15 <view class=‘infoBottom‘>所在科室: {{keshi}} </view> 16 <view class=‘infoBottom‘>坐診時間: {{time}} </view> 17 </view> 18 </view> 1920 <view class="class_item class_item_end"> 21 {{title}} 22 </view> 23 24 </template> 25 26 27 <template name=‘small-title‘> 28 <view class=‘tips-info‘> 29 <image class=‘tip-pic‘ src=‘../../../../../../images/red.png‘></image> 30 <view class=‘tip-word‘>{{title}}</view> 31 <view class=‘more‘><navigator url=‘{{url}}‘>更多 ></navigator></view> 32 </view> 33 </template>
註意:一個.wxml
文件中可以定義多個模板,但是需要通過name
來區分(此處定義了list和small-title兩個模板);
另外.wxss文件照常寫再temp.wxss中即可。之後可直接引用。
第二步:使用模板
註意:data
是要模板渲染的數據,data="{{...item}}"
寫法是ES6的寫法,item
是wx:for
當前項,...
是展開運算符,在模板中不需要再{{item.courseName}}
而是直接{{courseName}}
。
wxss頁面只需直接引用模板裏寫好的樣式即可,js文件此處不予講述,畢竟模板相同,但每個頁面的數據不同,故此處不引用。
@import "../../../../../temp/temp.wxss"
此處附上本文案例所引用的js數據的大體結構
1 data: { 2 jianjie: "文本信息", 3 expertList: [ 4 { 5 "doctorInfo": "url地址", "img": "圖片地址", "name": "文本", "keshi": "文本", "time": "文本", "info": "文本", "expertTitle": [ 6 { "title": "文本1" }, 7 { "title": "文本2" }, 8 { "title": "文本3" } 9 ] 10 }, 11 { 12 "doctorInfo": "url地址", "img": "圖片地址", "name": "文本", "keshi": "文本", "time": "文本", "info": "文本", "expertTitle": [ 13 { "title": "文本1" }, 14 { "title": "文本2" }, 15 { "title": "文本3" } 16 ] 17 }, 18 { 19 "doctorInfo": "url地址", "img": "圖片地址", "name": "文本", "keshi": "文本", "time": "文本", "info": "文本", "expertTitle": [ 20 { "title": "文本1" }, 21 { "title": "文本2" }, 22 { "title": "文本3" } 23 ] 24 }, 25 ], 26 smallTitle: [ 27 { "title": ‘文本‘, "url": ‘url地址‘ }, 28 { "title": ‘文本‘, "url": ‘url地址‘ } 29 ], 30 },
此處js數據中在expertList數組中嵌套了第二個數組expertTitle,“..."展開符只能展開一層,故expertTitle中的子屬性title用item.title來引用。
<view class=‘topType‘ wx:for="{{expertTitle}}" wx:key="*this">{{item.title}}</view>
另一處區別的是
<template is=‘small-title‘ data=‘{{ ...smallTitle[0] }}‘/>
此處引用模板給予數組下標來應用對應信息。
<navigator wx:for="{{expertList}}" wx:key="*this" url=‘{{item.doctorInfo}}‘> <template is="list" data=‘{{...item}}‘/> </navigator>
此處item
是wx:for
當前項,故無需給予下標。
以上為筆者全部內容,若有不對之處,歡迎指正。
版權聲明:本文為博主原創文章,歡迎轉載和發表評論,轉載請註明出處:http://www.cnblogs.com/leijue/p/8638442.html
微信小程序開發之--"template模板“的應用