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

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

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

// 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, {}) } }})-

{{item.title}} 暂缺货 可借阅 -

/* 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" },}-

-

.test{ display: flex; justify-content: center; /* border: 1rpx #444 solid; */}-

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。