微信小程序之模板的使用


在一個項目中需要在多處頁面使用類似的模塊,就需要創建模板—-減少代碼量,同時代碼高度復用;

一、定義模板
1、新建一個template文件夾用來管理項目中所有的模板;
2、新建一個courseList.wxml文件來定義模板;
3、使用name屬性,作為模板的名字。然后在<template/>內定義代碼片段。

一個.wxml文件中可以定義多個模板,只需要通過name來區分;
模板中的數據都是展開之后的屬性。

<template name="courseLeft">
   這里面寫你要放入的模塊的代碼!
</template>

  

二、使用模板
1、使用 is 屬性,聲明需要的使用的模板

2、將模板所需要的 data 傳入,一般我們都會使用列表渲染。

<template is="" data=""></template>

<template wx:if=" is="courseLeft" data=""></template>
<template wx:else is="courseRight" data="{{...item}}"></template>

data 是要模板渲染的數據,data="{{...item}}" 寫法是ES6的寫法,item是wx:for當前項,... 是展開運算符,在模板中不需要再{{item.courseName}} 而是直接{{courseName}} 。

三、模板樣式
1、在新建模板的時候同時新建一個courseList.wxss 的文件,與CSS同樣的寫法控制樣式。
2、在需要使用模板的頁面 .wxss文件中import進來;或者直接在app.wxss中引入,這樣只需要一次引入,其他文件就不用引入了。

@import "../template/courseList.wxss";


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM