概述
本篇文章给大家带来的内容是关于小程序自定义组件的实现方法（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
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技巧
以上就是小程序自定义组件的实现方法（代码）的详细内容，更多请关注靠谱客其它相关文章！
最后
以上就是大力小天鹅为你收集整理的小程序自定义组件的实现方法（代码）的全部内容，希望文章能够帮你解决小程序自定义组件的实现方法（代码）所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复