微信小程式中template模組的使用方法

不言
發布: 2018-09-06 11:22:33
原創
3168 人瀏覽過

這篇文章帶給大家的內容是關於微信小程式中template模組的使用方法,有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。

WXML提供模板(template),可以在模板中定義程式碼片段,然後在不同的地方呼叫。
首先在pages目錄下新建一個template目錄用來存放模板
模板怎麼建呢?
模板只需要新建xxx.wxss和xxx.wxml這兩個文件就可以了,其他兩個. js和.json不需要
在template目錄中新list-template.wxml和list-template.wxss

list-template.wxml:

<template name=&#39;listTmp&#39;><view>
  <view>
    <image src=&#39;/images/avatar/0.png&#39;></image>
    <text>may 9 2018</text>
  </view>
  <text>火影村</text>
  <image src=&#39;/images/detail/carousel/6.jpg&#39;></image>
  <text>火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火</text>
  <view>
    <image src=&#39;/images/icon/view.png&#39;></image>
    <text>88</text>
    <image src=&#39;/images/icon/star.png&#39;></image>
    <text>88</text>
  </view></view></template>
登入後複製

#list-template .wxss:

.tmpContainer{
  display: flex;  
  flex-direction: column;
  }
.avatar_date image{
  width: 60rpx;  
  height: 60rpx;  
/* 把此元素放置在父元素的中部。就可以让图片与文字都在中间了 */
  vertical-align: middle;  
  margin-right: 10rpx;
  }
.avatar_date {
  padding: 10rpx;
  }
.avatar_date text{
  font-size: 32rpx;
  }
.company{
  margin-left: 10rpx;  
  font-size: 36rpx;  
  font-weight: 700;  
  margin: 10rpx;
  }
.contentImg{
  width: 100%;  
  height: 460rpx;
  }
.content{
  font-size: 32rpx;  
  /* 段落首字母缩进两个字 */
  text-indent: 64rpx;
  }
.collection_love image{
  width: 32rpx;  
  height: 32rpx;  
  vertical-align: middle;  
  margin-right: 10rpx;
  }
.collection_love text{
  font-size: 28rpx;  
  margin-right: 10rpx;
  }
登入後複製

list.wxml中引入模板:

<!-- 在头部引入,注意结尾别忘了/ -->
<import src=&#39;/pages/template/list-template.wxml&#39;/>
登入後複製

然後在你想用模板的地方引用
微信小程式中template模組的使用方法還要在list.wxss中像以下樣子引入模板樣式

微信小程式中template模組的使用方法

相關推薦:

php設計模式 Template Method (模板方法模式)

微信企業號開發之微信考勤Cookies的使用_javascript技巧

使用pdb模組偵錯Python程式實例

以上是微信小程式中template模組的使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板