小程式模板template的使用,以及傳遞集合資料
阿新 • • 發佈:2019-01-25
模板template的使用,
如下圖,我們經常做這樣的列表頁,課程搜尋結果頁和課程列表頁結構是完全一樣的,非常適合使用模板來完成頁面搭建。
這樣我們就不用寫那些重複的程式碼了,而且修改介面的時候也只需要改動模板一個地方
一、定義模板
1、新建一個template資料夾用來管理專案中所有的模板;
2、新建一個personCourseTmp.wxml檔案來定義模板;
3、使用name屬性,作為模板的名字。然後在<template/>內定義程式碼片段。
那我們開始實現吧,建模板2個檔案
personCourseTmp.wxml
<template name="personCourseItemTmp"> <view class="courses-list" style='background-image: url("{{cardImage}}")'> <view class="money-border"> ¥ <text class="money">{{cardMoney}}</text>/課時</view> <view class="name"> <text class="ename">GillMo</text> <text class="cname">.小川</text> </view> <view class="mark"> <view>{{cardMark}}</view> </view> </view> </template>
樣式檔案personCourseTmp.wxss
.courses-list { height: 342rpx; margin: 40rpx auto; border-top: 2rpx solid #f0f0f0; margin-top: 10rpx; flex-direction: column; align-items: flex-start; width: 670rpx; border-radius: 8px; } .money-border { font-family: PingFangSC-Semibold; font-size: 28rpx; color: #fff; letter-spacing: -0.41px; height: 56rpx; margin-top: 20rpx; margin-left: 20rpx; } .money { font-size: 40rpx; } .name { margin-top: 158rpx; margin-left: 20rpx; font-family: PingFangSC-Semibold; color: #fff; letter-spacing: -0.41px; } .ename { font-size: 40rpx; } .cname { font-size: 30rpx; } .mark { font-family: PingFangSC-Regular; font-size: 28rpx; color: #fff; margin-left: 20rpx; letter-spacing: -0.41px; margin-bottom: 18rpx; }
那我們如何在頁面上使用呢,引入樣式檔案和檢視檔案
比如我們要在Course.wxss上面引入樣式檔案
@import "../template/personCourseTmp.wxss";只需要在Course.wxss裡面加入上面的程式碼
我們要在Course.wxml上面引入檢視檔案
<import src="../template/personCourseTmp.wxml" />
<block wx:for="{{goodlist}}" wx:key="idx"> <template is="personCourseItemTmp" data="{{...item}}"></template> </navigator> </block>
傳資料時item前面加三個點... 模板裡面就不需要寫item了,
如果要傳多個數據到模板
<view class="tab-list" wx:for="{{list}}" wx:key="index">
<template is="day-tab" data="{{item,index:index,currentTarget:currentTarget}}" wx:key="index"></template>
</view>
用逗號分開,item 是物件,index是單個數據,要用鍵值對,template就介紹到這來