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

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

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 >
/* 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 
     three-col-grid /three-col-grid 
   /view 
.test{
  display: flex;
  justify-content: center;
  /* border: 1rpx #444 solid; */
}
相关推荐：
php实现Mongodb自定义方式生成自增ID的方法        

详解javascript实现自定义事件_javascript技巧
以上就是小程序自定义组件的实现方法（代码）的详细内容，更多请关注php中文网其它相关文章！
 
  
 最佳 Windows 性能的顶级免费优化软件
 
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。