258资源分享网

前言

最近10几天都在学习小程序的开发，遇到了一些问题和笔记有趣的东西，今天总结了一下，和大家分享

 

1.小程序中的template模块使用

在一个月黑风高的夜晚，我突然发现一个很有意思的东西，那就是template模块，它可以将你定义的一个HTML5模块包住，然后利用template，在你的小程序任意一个页面使用，这样极大的减少了程序中的复制-粘贴，复制-粘贴(一般用于需要循环使用的界面)。下面就用我自己的一个template模块来讲解下。

 

第一步：创建页面

在pages里面创建存储你template模块的页面，便于其他页面对其的引用

 

"pages/index/index",

"pages/find/find",

"pages/gift/gift",

"pages/activity/activity",

"pages/common/list",//存储template模块的页面

"pages/white/white"

 

第二步：创建template模块

template模块实例

 

<template name="job_list">

<view class="br"></view>

<navigator url="../white/white" class="page_appmsg"> //点击跳转

<view class="page">

<view class="page__hd ">

<image class="page__thumb" src=http://www.yiyongtong.com/archives/"{{image}}" mode="aspectFill"/>

<view class="page__hd_title">

<view class="page__hd_title title">{{title}}</view>

<view class="page__hd_title school">{{school}}</view>

<view class="page__hd_title request">

<text class="page__hd_title pink">{{pink}}</text>

<text class="page__hd_title time">{{time}}</text>

<view class="page__hd_title cool"><i class="iconfont icon-zan1 active"></i>{{cool}}</view>

</view>

</view>

</view>

<view class='page__ft'>

<i class="iconfont icon-jian-copy active"></i>{{page__ft}}}

</view>

</view>

</navigator>

</template>

在你需要重复使用的html用一个标签包起来，并给它取个名字 。  （当然了，还有WXSS的编写，这里因为不是很重要我就不放出来了）  完成了这步，你就可以尽情的在你需要这个模板的页面引用这个模块了。

第三步：在各个页面引用template模块

①在你想要引用的界面的WXSS和WXML上引用template的wxml和wxss，

 

@import '../common/list.wxss';

<import src=http://www.yiyongtong.com/archives/"../common/list.wxml" />

②在你需要的盒子里面添加template标签，你想要引用那个template模块，就在is里面填哪个模块的名字

 

<template is="job_list" data="{{jobs}}"/>

如果你是在一个循环里面引用的template就需要改为data="{{...item}}"如：

 

<block wx:for="{{jobs}}" wx:key="{{index}}">

<template is="job_list" data="{{...item}}"/>

</block>

代码：

 

<import src=http://www.yiyongtong.com/archives/"../common/list.wxml" />

<view class="swiper-tab">

<view class="swiper-tab-item {{activeIndex==0?'active':''}}" data-current="0" bindtap="clickTab">活动</view>

<view class="swiper-tab-item {{activeIndex==1?'active':''}}" data-current="1" bindtap="clickTab">视频</view>

<view class="swiper-tab-item {{activeIndex==2?'active':''}}" data-current="2" bindtap="clickTab">直播</view>

</view>

<swiper current='{{activeIndex}}' bindchange="swiperTab">

<swiper-item>

<view class="swiper-item__content">

<block wx:for="{{jobs}}" wx:key="{{index}}">

<template is="job_list" data="{{...item}}"/>

</block>

</view>

</swiper-item>

<swiper-item>

<view class="swiper-item__content">

<block wx:for="{{jobs}}" wx:key="{{index}}">

<template is="job_list" data="{{...item}}"/>

</block>

</view>

</swiper-item>

<swiper-item>

<view class="swiper-item__content">

<block wx:for="{{jobs}}" wx:key="{{index}}">

<template is="job_list" data="{{...item}}"/>

</block>

</view>

</swiper-item>

</swiper>

效果图：