大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
小编给大家分享一下小程序自定义组件怎么弄,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
10年品牌的成都网站建设公司,数千家企业网站设计经验.价格合理,可准确把握网页设计诉求.提供定制网站建设、商城网站定制开发、小程序设计、响应式网站建设等服务,我们设计的作品屡获殊荣,是您值得信赖的专业网站建设公司。
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, {}) } } })
{{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; */ }
以上是“小程序自定义组件怎么弄”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!