如何在小程序中使用template模板

最新推荐文章于 2025-02-19 09:02:01 发布

墨咎

最新推荐文章于 2025-02-19 09:02:01 发布

阅读量488

点赞数

分类专栏：小程序

本文链接：https://blog.youkuaiyun.com/mo_jiu/article/details/80838222

版权

小程序专栏收录该内容

2 篇文章

订阅专栏

一、我之前写着玩的一个小程序，里面有一个轮播的内容，内容里分了三个部分就使用的template模板；

 <swiper class='articles-swiper' duration="{{duration}}">
    <block wx:for="{{articles.essay}}" wx:for-index="idx" wx:key="{{content_id}}">
      <swiper-item class="articles-swiper-item">
        <scroll-view class='articles' scroll-y="true">
          <view class='box'>
            <import src="templates/essayItem.wxml"/>
            <template is="essay-item" data="{{item: articles['essay'][idx]}}"/>

            <import src="templates/questionItem.wxml"/>
            <template is="question-item" data="{{item: articles['question'][idx]}}"/>

            <import src="templates/serialitem.wxml"/>
            <template is="serial-item" data="{{item: articles['serial'][idx]}}"/> 
          </view>
        </scroll-view>
      </swiper-item>
    </block>
  </swiper>

二、三个模板对应三个文件夹代码如下；

<template name="essay-item">
  <view class="article-item" data-id="{{item.content_id}}" bindtap="tapEssay">
    <view class="article-header">
      <text class="article-title">{{item.hp_title}}</text>
      <text class="article-type">短篇</text>
      <view class="article-author">
        <text>{{item.author_list[0].user_name}}</text>
      </view>
    </view>
    <view class="article-content">
      <text>{{item.guide_word}}</text>
    </view>
  </view>
</template>

<template name="question-item">
  <view class="article-item" data-id="{{item.question_id}}" bindtap="tapQuestion">
    <view class="article-header">
      <text class="article-title">{{item.question_title}}</text>
      <text class="article-type">问答</text>
      <view class="article-author">
        <text>{{item.author_list[0].user_name}}</text>
      </view>
    </view>
    <view class="article-content">
      <text>{{item.answer_content}}</text>
    </view>
  </view>
</template>

<template name="serial-item">
  <view class="article-item" data-id="{{item.id}}" bindtap="tapSerial">
    <view class="article-header">
      <text class="article-title">{{item.title}}</text>
      <text class="article-type">连载</text>
      <view class="article-author">
        <text>{{item.author_list[0].user_name}}</text>
      </view>
    </view>
    <view class="article-content">
      <text>{{item.excerpt}}</text>
    </view>
  </view>
</template>

如下面效果，三个模板分别对应渲染的：短篇、问答、连载；