### [小程序自定义组件的实现方法（代码）](https://www.prosaas.cn/article/17040)

**Published:** 2018-09-14T07:06:40

**Author:** 5201314

**Excerpt:** 本篇文章给大家带来的内容是关于小程序自定义组件的实现方法（代码），有一定的参考价值，有需要的朋友可以参考一下，…

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

![](https://img.php.cn//upload/image/961/439/203/1536908548457195.png)  
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='main-content'> -->
  <view class='bookbox' style='padding:{{mainPadding}}rpx;margin:{{mainMargin}}rpx;'>
    <block wx:for="{{booksData}}" wx:key="{{item.id}}">
      <view class='bookinfo' style='margin-bottom: {{rowSpace}}rpx;'>
        <image src='{{item.url}}' mode="widthFix" style='width:{{(740 - 2\*mainPadding - 2\*mainMargin)/3 - colSpace\*3}}rpx;'></image>
        <view class="title" style='width:{{(740 - 2\*mainPadding - 2\*mainMargin)/3 - colSpace\*3}}rpx;'>{{item.title}}</view>
        <view class='actionBar' style='width:{{(740 - 2\*mainPadding - 2\*mainMargin)/3 - colSpace\*3}}rpx;'>
          <block wx:if="{{item.status == 0}}">
            <view class='bookstatus disable'>暂缺货</view>
            <view bindtap='checkIn' data-bookid='{{item.id}}' data-status='{{item.status}}' class='iconfont icon-219-heart icon'></view>
          </block>
          <block wx:else>
            <view class='bookstatus enable'>可借阅</view>
            <view bindtap='checkIn' data-bookid='{{item.id}}' data-status='{{item.status}}' class='iconfont icon-059-cart icon'></view>
          </block>          
        </view>
      </view>
    </block>
  </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;
}

使用组件

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

{

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

}

  <view class='test'>
    <three-col-grid booksData="{{BookList}}" bind:action="getCheckValues"></three-col-grid>
  </view>

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

相关推荐：

php实现Mongodb自定义方式生成自增ID的方法       

详解javascript实现自定义事件\_javascript技巧

以上就是小程序自定义组件的实现方法（代码）的详细内容，更多请关注知企PROSAAS其它相关文章！

**Categories:** 后端开发

---