미니프로그램 커스텀 컴포넌트(코드) 구현방법

이 기사의 내용은 미니 프로그램의 사용자 정의 구성 요소 구현 방법(코드)에 대한 것입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

파일: 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;
}

구성 요소 사용

  //事件处理函数
  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 구현에 대한 자세한 설명_ 자바스크립트 실력

위 내용은 미니프로그램 커스텀 컴포넌트(코드) 구현방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!