小程序自定义组件的实现方法（代码）

本篇文章给大家带来的内容是关于小程序自定义组件的实现方法（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

// components/threeColumnGrid/threecolgrid.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    // 传入的数据
    booksData:{
      type: Array,value:[]
    },// grid的外边距
    mainMargin:{
      type: Number,value: 5
    },// grid的内边距
    mainPadding:{
      type:Number,value:10
    },// 行间距
    rowSpace:{
      type:Number,value:20
    },// 列间距
    colSpace:{
      type:Number,value:7
    }
  },/**
   * 组件的初始数据
   */
  data: {
},/**

组件的方法列表

*/

methods: {

checkIn:function(e){

console.log(e.currentTarget.dataset)

// 触发action事件，triggerEvent函数接受三个值：事件名称、数据、选项值

this.triggerEvent('action',e.currentTarget.dataset,{})

}

}

})

 
   
   {{item.title}}
   
     
       暂缺货
       
     
     
       可借阅
       
               
   
 

/* components/threeColumnGrid/threecolgrid.wxss */
@import "../../iconfont.wxss";
/* .main-content{
background: #FFF;
margin-top: 155rpx;
padding:10rpx;
} */


.bookbox{

display: flex;

flex-direction: row;

justify-content: space-between;

flex-wrap:wrap;

background: #FFF;

}

.bookbox .bookinfo{

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

/ border: 1rpx solid #f5a32d; /

}

.bookbox .bookinfo image{

display: flex;

/ 调节图书列 /

/ width:220rpx;  /

border-top-left-radius: 10rpx;

border-top-right-radius: 10rpx

}

.bookbox .bookinfo .title{

display: flex;

flex-wrap: wrap;

font-size: small;

margin-bottom: 5rpx;

/ 调节图书列 /

/ width:300rpx; /

/ width:220rpx; /

height: 70rpx;

}

.bookbox .bookinfo .actionBar{

display: flex;

justify-content: space-between;

align-items: center;

padding: 0rpx 5rpx 5rpx 5rpx;

font-size: smaller;

/ width:200rpx; /

}
.bookbox .bookinfo .actionBar .bookstatus{

display: flex;

border-radius: 10rpx;

padding:0rpx 5rpx;

}
.bookbox .bookinfo .actionBar .enable{

color: #FFF;

background-color: #f5a32d;

}
.bookbox .bookinfo .actionBar .disable{

color: #FFF;

background-color: #727171;

}
.bookbox .bookinfo .actionBar .icon{

font-size: 15pt;

color: #facea7;

}
.bookinfo-empty{

display: flex;

flex-direction: column;

align-items: center;

padding: 5rpx;

width:230rpx;

}

使用组件

  //事件处理函数

getCheckValues: function(e){

console.log('checkbox发生change事件，携带value值为：',e.detail)

},

{

"usingComponents": {

"three-col-grid":"/components/threeColumnGrid/threecolgrid"

},}

.test{
  display: flex;
  justify-content: center;
  /* border: 1rpx #444 solid; */
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!