一開始看官網(wǎng)，看的一臉茫然，后來看了下別人的，才終于知道微信小程序的組件怎么開發(fā)了
效果圖
blue.jpg
red.jpg
新建一個component文件夾遭笋，在文件夾下創(chuàng)建rowBox文件夾，再分別創(chuàng)建wxml徒探，wxss瓦呼，json，js四個文件测暗。
目錄
rowBox
wxss
.bg_red{
background: #ff5d68;
}
.bg_blue{
background: #cbd1f5;
}
.bg_purple{
background: #cfb3e3;
}
.bg_pink{
background: #fcd6c6;
}
/* 頭部 start*/
.row-box .headline_box{
font-size: 36rpx;
width:94%;
height:90rpx;
line-height: 100rpx;
border-radius: 5rpx;
margin: 30rpx 3% 0;
color: #ffffff;
box-shadow: 0 4rpx 10rpx 0 rgba(0, 0, 0, 0.2), 0 6rpx 15rpx 0 rgba(0, 0, 0, 0.19);
animation:headline_box 1s 0.5s linear 1;
-webkit-animation:headline_box 1s 0.5s linear 1;
}
@keyframes headline_box{
from{transform:rotateX(180)}
to{transform:rotateX(360deg)}
}
@-webkit-keyframes headline_box{
from{transform:rotateX(180)}
to{transform:rotateX(360deg)}
}
.row-box .headline_box .headline_img{
width:100rpx;
height:90rpx;
margin:0 20rpx;
}
.row-box .headline_box .tilte{
font-weight: 600;
}
.row-box .morebtn{
float: right;
margin-right: 3%;
height: 90rpx;
line-height: 115rpx;
font-size:26rpx;
}
/* 頭部 end*/
/* 列表1 start */
.row-box .flex_row1{
width:97%;
padding-right: 4%;
background: #ffffff;
overflow-y: auto;
padding-bottom: 20rpx;
}
.row-box .flex_row1 .flex-item{
float: left;
width: 42.2%;
height: 330rpx;
margin: 20rpx 2% 10rpx 5%;
border-radius:10rpx;
background: #ffffff;
border: 1rpx solid #dcdcdc;
animation:flex-item 0.5s linear 1;
-webkit-animation:flex-item 0.5s linear 1;
}
@keyframes flex-item{
from{opacity: 0; transform:scale(0)}
to{opacity: 0.8;transform:scale(1)}
}
@-webkit-keyframes flex-item{
from{opacity: 0; transform:scale(0)}
to{opacity: 0.8;transform:scale(1)}
}
.row-box .flex_row1 .flex-item image{
width: 100%;
height: 200rpx;
border-radius: 10rpx 10rpx 0 0;
}
.row-box .flex_row1 .theme{
width: 92%;
height: 70rpx;
font-size: 28rpx;
margin: 5rpx 4%;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.row-box .flex_row1 .tag{
color: #888;
font-size: 22rpx;
padding: 0 5%;
}
/* 列表1 end */
/* 列表2 start*/
.row-box .flex_row2{
width:100%;
background: #ffffff;
overflow-y: auto;
padding-bottom:20rpx;
}
.row-box .flex_row2 .flex-item{
width: 90%;
height: 150rpx;
margin: 20rpx 5% 10rpx;
background: #ffffff;
border-radius: 10rpx 10rpx 0 0;
animation:flex-item 0.5s linear 1;
-webkit-animation:flex-item 0.5s linear 1;
}
@keyframes flex-item{
from{opacity: 0; transform:scaleX(0)}
to{opacity: 0.8;transform:scaleX(1)}
}
@-webkit-keyframes flex-item{
from{opacity: 0; transform:scaleX(0)}
to{opacity: 0.8;transform:scaleX(1)}
}
.row-box .flex_row2 .flex-item image{
width: 45%;
height: 150rpx;
border-radius:10rpx;
}
.row-box .flex_row2 .item-right{
float: right;
width: 49%;
padding:0 2% 0 3%;
}
.row-box .flex_row2 .theme{
width: 100%;
height: 55rpx;
font-size: 30rpx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.row-box .flex_row2 .state{
color: #888;
font-size: 22rpx;
padding: 0 2%;
height: 86rpx;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
/* 列表2 end*/
wxml
<view class='row-box'>
<block wx:if="{{type == 'red'}}">
<view class='headline_box bg_red'>
<image src='../../img/red.jpg' class='headline_img' bindtap='addCityEvent'></image>
<text class='tilte'>{{title}}</text>
<navigator class="morebtn" url="{{url}}">查看全部></navigator>
</view>
<view class="flex_row1">
<view class="flex-item" wx:for="{{items}}" wx:key="index" >
<navigator url="{{item.url}}">
<image src='{{item.img}}'></image>
<view class='theme'>{{item.theme}}</view>
<text class='tag'>{{item.tag}}</text>
</navigator>
</view>
</view>
</block>
<block wx:else>
<view class='headline_box bg_blue' wx:if="{{type == 'blue'}}">
<image src='../../img/blue.jpg' class='headline_img'></image>
<text class='tilte'>{{title}}</text>
<navigator class="morebtn" url="{{url}}">查看全部></navigator>
</view>
<view class='headline_box bg_purple' wx:if="{{type == 'purple'}}">
<image src='../../img/purple.jpg' class='headline_img'></image>
<text class='tilte'>{{title}}</text>
<navigator class="morebtn" url="{{url}}">查看全部></navigator>
</view>
<view class='headline_box bg_pink' wx:if="{{type == 'pink'}}">
<image src='../../img/pink.jpg' class='headline_img'></image>
<text class='tilte'>{{title}}</text>
<navigator class="morebtn" url="{{url}}">查看全部></navigator>
</view>
<!-- 列表 -->
<view class="flex_row2">
<view class="flex-item" wx:for="{{items}}" wx:key="index">
<image src='{{item.img}}'></image>
<view class='item-right'>
<view class='theme'>{{item.theme}}</view>
<view class='state'>{{item.state}}</view>
</view>
</view>
</view>
</block>
</view>
js
Component({
options:{
multipleSlots: true
},
properties:{
type: {
type: String,
value: '類型',
},
title: {
type: String,
value: '標題',
},
url: {
type: String,
value: '地址',
},
items: {
type: Array,
value: '標題',
},
},
data: {
},
methods: {
}
})
index (注：要引用組件的文件)
wxml
<rowBox id="rowBox" title='推薦' type='red' url='#' items='{{recommends}}'></rowBox>
<rowBox id="rowBox" title='游戲' type='blue' url='#' items='{{games}}'></rowBox>
json
{
"usingComponents": {
"rowBox": "/component/rowBox/rowBox"
}
}
