【微信小程序】自定义组件

一开始看官网，看的一脸茫然，后来看了下别人的，才终于知道微信小程序的组件怎么开发了

效果图

blue.jpg red.jpg

新建一个component文件夹，在文件夹下创建rowBox文件夹，再分别创建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"     
  }
}