微信小程序学习：（四）模板

清疚 2021-11-27 06:36 336阅读 0赞

# 微信小程序学习：（四）模板 #

项目地址：[https://github.com/leoricding/-][https_github.com_leoricding_-]

## （一）新建模板目录 ##

![在这里插入图片描述][20190724140935395.PNG]

## （二）模板结构，这是一个课堂信息。其中template的name属性，就是为了标识模板。 ##

都很简单，没什么可说的。

<template name="lession1-template">
      <view class='less-tmp-container'>
        <view class='less-img-container'>
          <image class='less-img' src="{ {carousel}}"></image>
        </view>
        <view class='less-content-container'>
          <view class='less-content-name'>
            <text>{
       {lessionName}}</text>
          </view>
          <view class='less-online-animate'>
            <view class='less-online-animate-0'></view>
            <view class='less-online-animate-1'></view>
            <view class='less-online-animate-2'></view>
            <view class='less-online-animate-3'></view>
            <view class='less-online-animate-4'>
              <text>直播中</text>
            </view>
          </view>
          <view class='less-content-person'>
            <text>{
       {persionOnline}}人在上课</text>
          </view>  
        </view>
      </view>
    </template>

样式

/* pages/template/lession1-template.wxss */
    
    .less-tmp-container{ 
      margin-top: 20rpx;
      margin-right: 20rpx;
      display: flex;
      flex-direction:row;
      /* flex-wrap: nowrap; */
      /* justify-content: left; */
    }
    /* 图片样式 */
    .less-img-container{ 
      margin-left: 20rpx;
      margin-right: 20rpx;
      width: 350rpx;
      height: 200rpx;
      /* display: inline-block; */
    }
    .less-img{ 
      width: 100%;
      height: 100%;
    }
    .less-content-name{ 
      font-size: 0.8rem;
    }
    
    /* 动画样式 */
    .less-online-animate{ 
      display: flex;
      flex-direction: row;
      align-items: flex-end;
      margin-bottom: 20rpx;
      height: 26rpx;
    }
    .less-online-animate-0{ 
      width: 8rpx;
      height: 8rpx;
      background-color: rgb(0, 217, 255);
      margin-right: 4rpx;
      animation: animate-0 800ms infinite alternate;
    }
    .less-online-animate-1{ 
      width: 8rpx;
      height: 16rpx;
      background-color: rgb(0, 217, 255);
      margin-right: 4rpx;
      animation: animate-1 800ms infinite alternate;
    }
    .less-online-animate-2{ 
      width: 8rpx;
      height: 24rpx;
      background-color: rgb(0, 217, 255);
      margin-right: 4rpx;
      animation: animate-2 800ms infinite alternate;
    }
    .less-online-animate-3{ 
      width: 8rpx;
      height: 8rpx;
      background-color: rgb(0, 217, 255);
      margin-right: 4rpx;
      animation: animate-3 800ms infinite alternate;
    }
    .less-online-animate-4{ 
      font-size: 0.4rem;
      color:rgb(0, 217, 255);
      margin-right: 4rpx;
      margin-bottom: -4rpx;
    }
    @keyframes animate-0
    { 
    from { height:8rpx;}
    to { height:16rpx;}
    }
    @keyframes animate-1
    { 
    from { height:16rpx;}
    to { height:8rpx;}
    }
    @keyframes animate-2
    { 
    from { height:24rpx;}
    to { height:8rpx;}
    }
    @keyframes animate-3
    { 
    from { height:8rpx;}
    to { height:20rpx;}
    }
    
    /* 底部文字样式 */
    .less-content-container{ 
      width: 50%;
      display: flex;
      flex-direction: column;
    }
    .less-content-name{ 
      margin-bottom: 20rpx;
    }
    .less-content-person{ 
      font-size: 0.6rem;
      color:grey;
    }

## （三）引用模板 ##

我打算在lession.xml中引用模板,通过标签引用。而template的is属性要对应template创建的name属性。而data属性就是传值。

<import src="/pages/template/lession1-template.wxml" />
    <view>
      <swiper class='swiper' indicator-dots='true' autoplay='true' indicator-color='#00a00f' indicator-active-color='#FFE4C4'>
        <block wx:for="{ {listData}}" wx:key="{ {index}}">
          <swiper-item class='swiper-item'>
            <image class='swiper-img' src='{ {item.carousel}}'></image>
          </swiper-item>
        </block>
      </swiper> 
      
      <view>
        <block wx:for="{ {listData}}" wx:key="{ {index}}">
          <template is="lession1-template" data="{ {...item}}" />
        </block>
      </view>
    </view>

在样式中引用模板样式。使用@import引用模板样式。

/* pages/lession/lession.wxss */
    @import "/pages/template/lession1-template.wxss" .swiper{ 
      width: 100%;
      height: 400rpx;
    }
    .swiper-img{ 
      width: 100%;
      height: 100%;
    }

（四）效果图

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTQ1OTc2OA_size_16_color_FFFFFF_t_70]

[https_github.com_leoricding_-]: https://github.com/leoricding/-
[20190724140935395.PNG]: /images/20211126/9ce2d7eb425849fdb3b30aaae7aa31f6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTQ1OTc2OA_size_16_color_FFFFFF_t_70]: /images/20211126/5cdedec649274c86a1ddc82c159099bc.png