Implementierungsmethode der benutzerdefinierten Komponente (Code) des Miniprogramms

Der Inhalt dieses Artikels befasst sich mit der Implementierungsmethode (Code) von benutzerdefinierten Komponenten von Miniprogrammen. Ich hoffe, dass er für Sie hilfreich ist.

Datei: 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;
}

Komponenten verwenden

  //事件处理函数
  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; */
}

Verwandte Empfehlungen:

php-Methode zur Implementierung der benutzerdefinierten Methode von Mongodb zur Generierung einer selbsterhöhenden ID 🎜>

Das obige ist der detaillierte Inhalt vonImplementierungsmethode der benutzerdefinierten Komponente (Code) des Miniprogramms. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!