av五月天在线,男女激情无遮挡,成人久久久久久久久

導讀微信小程序，簡稱小程序，英文名Mini Program，是一種不需要下載安裝即可使用的應用，它實現了應用“觸手可及”的夢想，用戶掃一掃或搜一下即可打開應用。小程序是一種不用下載就能使用的應用，也是一...

微信小程序，簡稱小程序，英文名Mini Program，是一種不需要下載安裝即可使用的應用，它實現了應用“觸手可及”的夢想，用戶掃一掃或搜一下即可打開應用。小程序是一種不用下載就能使用的應用，也是一項門檻非常高的創新，經過將近兩年的發展，已經構造了新的小程序開發環境和開發者生態。

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

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

list-template.wxml：

<template name='listTmp'><view>
  <view>
    <image src='/images/avatar/0.png'></image>
    <text>may 9 2018</text>
  </view>
  <text>火影村</text>
  <image src='/images/detail/carousel/6.jpg'></image>
  <text>火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火</text>
  <view>
    <image src='/images/icon/view.png'></image>
    <text>88</text>
    <image src='/images/icon/star.png'></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='/pages/template/list-template.wxml'/>

然后在你想用模板的地方引用
還要在list.wxss中像以下樣子引入模板樣式

當前位置:雨林木風下載站 > 應用軟件教程 > 詳細頁面

微信小程序中template模塊的使用方法

本類教程下載

系統下載排行