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

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

效果图

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

   
    
    {{title}}
    查看全部>  
   
    
      
        
          
          {{item.theme}}
          {{item.tag}}
        
      
    



   
    
    {{title}}
    查看全部>  
  
   
    
    {{title}}
    查看全部>  
  
   
    
    {{title}}
    查看全部>  
  

  
  
    
      
      
        {{item.theme}}
        {{item.state}}
      
     
  

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

json

{
  "usingComponents": {
    "rowBox": "/component/rowBox/rowBox"     
  }
}