Implementation method of mini program custom component (code)

The content of this article is about the implementation method (code) of custom components of mini programs. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

File：threecolgrid.js

// 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, {}) 
    }
  }
})

<!--components/threeColumnGrid/threecolgrid.wxml-->
<!-- <view class=&#39;main-content&#39;> -->
  <view>
    <block>
      <view>
        <image></image>
        <view>{{item.title}}</view>
        <view>
          <block>
            <view>暂缺货</view>
            <view></view>
          </block>
          <block>
            <view>可借阅</view>
            <view></view>
          </block>          
        </view>
      </view>
    </block>
  </view>
<!-- </view> -->

/* 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;
}

Use components

  //事件处理函数
  getCheckValues: function(e){
    console.log('checkbox发生change事件，携带value值为：', e.detail)
  },

{

  "usingComponents": {
    "three-col-grid":"/components/threeColumnGrid/threecolgrid"
  },

}

  <view>
    <three-col-grid></three-col-grid>
  </view>

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

Related recommendations:

php implements Mongodb custom method to generate self-increasing ID

Detailed explanation of javascript to implement custom events_javascript skills

The above is the detailed content of Implementation method of mini program custom component (code). For more information, please follow other related articles on the PHP Chinese website!