• wxss引用
  可以看到這是一個列表，每一條可以看做是一個item,item自己會有自己的wxml和wxss,先看一下

item.wxss

.item_class{
  width: 100%;
  height: 150rpx;
  background-color: #ffffff;
}
.profile_holder{
  width: 100%;
  height: 100rpx;
  flex-direction: row;
  display: inline-flex;
  /*background-color: #cccccc;*/
  margin: 10rpx;
  align-items
 
: center;
}

.margin-left-10{
  margin-left: 10rpx;
  vertical-align: center;
  align-items: center;
  font-size: 28rpx;
}

.margin-left-30{
  margin-left: 30rpx;
  font-size: 32rpx;
}

item.wxml

<!-- item.wxml -->
<template name="home_item" >

<view class="item_class">

<view class
 
="profile_holder" style="display: flex;flex-direction: row;">

<image src="/res/imageholder_tangwei.jpg" class="profile"></image>

  <text class="margin-left-30">王國洋</text>
  <text class="margin-left-10">男</text>
  <text class="margin-left-10">18歲</text>

</view
 
>

</view>

</template>

在home.wxss中引用item.wxss

@import "item.wxss";
//就是這一行了
.swiper-tab{  
    width: 100%;  
    border-bottom: 2rpx solid #eeeeee;  
    text-align: center;  
    line-height: 80rpx;}  
.swiper-tab-item{  font-size: 30rpx;  
    display: inline-block;  
    width: 33.33%;  
    color: #666666;  
}  
.on{ color: #f10b2e;  
    border-bottom: 5rpx solid #f10b2e;}  

.swiper-box{ display: block; height: 100%; width: 100%; overflow: hidden; }  
.swiper-box view{  
    /*text-align: center;  */
}  
.profile{
  width: 90rpx;
  height: 90rpx;
  border: 0 solid #ff0000;
  border-radius: 80rpx;
}

.circle{
    width: 100px;
    height: 100px;
    border: 0 solid #ffffff;
    border-radius: 500px;
    box-shadow: 4px 1px 1px #cccccc;
}

在home.wxml中引用item.wxml 為 “template is=”home_item”

<!--pages/home/home.wxml-->
<import src="item.wxml"/>
<view class="swiper-tab">  
    <view class="swiper-tab-item {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">熱門</view>  
    <view class="swiper-tab-item {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">關注</view>  
    <view class="swiper-tab-item {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">好友</view>  
</view>  

<swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 80}}px" bindchange="bindChange">  
    <swiper-item> 

    <view    wx:for="{{hotlist}}">
    <template is="home_item" />       //在這裡引用模板
</view> 
      <!--<view wx:for="{{hotlist}}" >
      {{index}}:{{item}}</view>  -->
    </swiper-item>  
    <swiper-item>  
      <view>關注</view>  
    </swiper-item>  
    <swiper-item>  
      <view>好友</view>  
    </swiper-item>  
</swiper>