微信小程式 四 wxss引用 wxml引用

• wxss引用

  可以看到這是一個清單，每一條可以看做是一個item,item自己會有自己的wxml和wxss,先看一下

item.wxss

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

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

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

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: %;  
    border-bottom: rpx solid #eeeeee;  
    text-align: center;  
    line-height: rpx;}  
.swiper-tab-item{  font-size: rpx;  
    display: inline-block;  
    width: %;  
    color: #666666;  
}  
.on{ color: #f10b2e;  
    border-bottom: rpx solid #f10b2e;}  

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

.circle{
    width: px;
    height: px;
    border:  solid #ffffff;
    border-radius: px;
    box-shadow: px px px #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>