说明

一个页面需要多个界面进行组合
模板1：courses-isbuy

image.png

代码：

<!--pages/template/courses-isbuy/courses-isbuy.wxml-->

<template name="msgItem">

<import src="../../../components/index-classify/index-classify.wxml"></import>
<view class="index">
 <!-- {{classSortList,currentTabId,scrollToId,isHiddenMenuShow}}是模板1我需要传递的参数 -->
  <template is="index-classify" data="{{classSortList,currentTabId,scrollToId,isHiddenMenuShow}}"></template>
</view>
<text>pages/template/courses-isbuy/courses-isbuy.wxml</text>
  <view>
  <!-- {{index}}: {{msg}} {{time}}是模板2需要传递的参数 -->
  <text> {{index}}: {{msg}} </text>
  <text> Time: {{time}} </text>
 </view>
</template>

模板2：分类模板

image.png

<template name="index-classify">
    <view class="classify">
        <scroll-view scrollWithAnimation scrollX class="swiper-container" scrollIntoView="{{scrollToId}}">
            <view bindtap="changeTab" class="swiper-slide {{item.id===currentTabId?'swiper-slide--checked':''}}" data-id="{{item.id}}" id="tab{{item.id}}" wx:for="{{classSortList}}" wx:key="{{ index }}">
                <text>{{item.title}}</text>
                <view class="swiper-slide-line" wx:if="{{item.id===currentTabId}}"></view>
            </view>
            <view class="swiper-slide"></view>
        </scroll-view>
        <view bindtap="toggleHiddenMenu" class="classify-spread">
            <text class="classify-spread-icon iconfont icon-jiantou-copy"></text>
        </view>
    </view>
    <view bindtap="toggleHiddenMenu" class="mask" wx:if="{{isHiddenMenuShow}}">
        <view catchtap="stopPropogation" class="menu">
            <view class="menu-title">
                <text class="menu-title-word">课程分类</text>
                <view bindtap="toggleHiddenMenu" class="menu-icon-box">
                    <text class="iconfont icon-jiantou menu-title-icon"></text>
                </view>
            </view>
            <view class="menu-list">
                <view bindtap="changeTab" class="menu-tab {{index%3===1?'menu-tab--margin':''}} {{item.id===currentTabId?'menu-tab--checked':''}}" data-id="{{item.id}}" wx:for="{{classSortList}}" wx:key="{{ index }}">{{item.title}}</view>
            </view>
        </view>
    </view>
</template>

嵌套组合模板（模板1包含有模板2）

<!--pages/template/courses-isbuy/courses-isbuy.wxml-->

<template name="msgItem">

<import src="../../../components/index-classify/index-classify.wxml"></import>
<view class="index">
 <!-- {{classSortList,currentTabId,scrollToId,isHiddenMenuShow}}是模板1我需要传递的参数 -->
  <template is="index-classify" data="{{classSortList,currentTabId,scrollToId,isHiddenMenuShow}}"></template>
</view>
<text>pages/template/courses-isbuy/courses-isbuy.wxml</text>
  <view>
  <!-- {{index}}: {{msg}} {{time}}是模板2需要传递的参数 -->
  <text> {{index}}: {{msg}} </text>
  <text> Time: {{time}} </text>
 </view>
</template>

在调用模板的地方：
图示：

image.png

    <import src="../template/courses-isbuy/courses-isbuy.wxml"></import>
    <template is="msgItem" data="{{index:233,msg:'你是谁啊',time:'啊我还是',classSortList:classSortList,currentTabId:currentTabId,scrollToId:scrollToId,isHiddenMenuShow:isHiddenMenuShow}}"></template>
</view>

最终效果：

image.png image.png