本篇文章给大家带来的内容是关于小程序自定义组件的实现方法（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
file：threecolgrid.js
// components/threecolumngrid/threecolgrid.jscomponent({ /** * 组件的属性列表 */ 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技巧
以上就是小程序自定义组件的实现方法（代码）的详细内容。