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

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> <!-- </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技巧

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