注冊

微信小程序開發(fā)組件模版,微信小程序自定義組件

2017-12-15
導(dǎo)讀:類似于頁面,自定義組件擁有自己的 wxml 模版和 wxss 樣式。...

組件模版和樣式

類似于頁面,自定義組件擁有自己的 wxml 模版和 wxss 樣式。

組件模版

組件模版的寫法與頁面模板相同。組件模版與組件數(shù)據(jù)結(jié)合后生成的節(jié)點樹,將被插入到組件的引用位置上。

在組件模板中可以提供一個 <slot> 節(jié)點,用于承載組件引用時提供的子節(jié)點。

代碼示例:

<!-- 組件模板 -->
<view class="wrapper">
  <view>這里是組件的內(nèi)部節(jié)點</view>
  <slot></slot>
</view>
<!-- 引用組件的頁面模版 -->
<view>
  <component-tag-name>
    <!-- 這部分內(nèi)容將被放置在組件 <slot> 的位置上 -->
    <view>這里是插入到組件slot中的內(nèi)容</view>
  </component-tag-name>
</view>

組件wxml的slot

在組件的wxml中可以包含 slot 節(jié)點,用于承載組件使用者提供的wxml結(jié)構(gòu)。

默認情況下,一個組件的wxml中只能有一個slot。需要使用多slot時,可以在組件js中聲明啟用。

Component({
  options: {
    multipleSlots: true // 在組件定義時的選項中啟用多slot支持
  },
  properties: { /* ... */ },
  methods: { /* ... */ }
})

此時,可以在這個組件的wxml中使用多個slot,以不同的 name 來區(qū)分。

<!-- 組件模板 -->
<view class="wrapper">
  <slot name="before"></slot>
  <view>這里是組件的內(nèi)部細節(jié)</view>
  <slot name="after"></slot>
</view>

使用時,用 slot 屬性來將節(jié)點插入到不同的slot上。

<!-- 引用組件的頁面模版 -->
<view>
  <component-tag-name>
    <!-- 這部分內(nèi)容將被放置在組件 <slot name="before"> 的位置上 -->
    <view slot="before">這里是插入到組件slot name="before"中的內(nèi)容</view>
    <!-- 這部分內(nèi)容將被放置在組件 <slot name="after"> 的位置上 -->
    <view slot="after">這里是插入到組件slot name="after"中的內(nèi)容</view>
  </component-tag-name>
</view>
重磅推薦:小程序開店目錄

第一部分:小商店是什么

第二部分:如何開通一個小商店

第三部分:如何登錄小商店

第四部分:開店任務(wù)常見問題

第五部分:小商店可以賣什么

第六部分:HiShop小程序特色功能

第七部分:小程序直播

第八部分:小程序收貨/物流

第九部分:小程序怎么結(jié)算

第十部分:小程序客服

第十一部分:電商創(chuàng)業(yè)

第十二部分:小程序游戲開發(fā)