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

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>