線上服務(wù)咨詢
Article/文章
記錄成長點滴 分享您我感悟
小程序自定義組件的實現(xiàn)方法（代碼）
本篇文章給大家?guī)淼膬?nèi)容是關(guān)于小程序自定義組件的實現(xiàn)方法（代碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。
File：threecolgrid.js
// components/threeColumnGrid/threecolgrid.jsComponent({ /** * 組件的屬性列表 */ properties: { // 傳入的數(shù)據(jù) booksData:{ type: Array, value:[] }, // grid的外邊距 mainMargin:{ type: Number, value: 5 }, // grid的內(nèi)邊距 mainPadding:{ type:Number, value:10 }, // 行間距 rowSpace:{ type:Number, value:20 }, // 列間距 colSpace:{ type:Number, value:7 } }, /** * 組件的初始數(shù)據(jù) */ data: { }, /** * 組件的方法列表 */ methods: { checkIn:function(e){ console.log(e.currentTarget.dataset) // 觸發(fā)action事件，triggerEvent函數(shù)接受三個值：事件名稱、數(shù)據(jù)、選項值 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; /* 調(diào)節(jié)圖書列 */ /* 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; /* 調(diào)節(jié)圖書列 */ /* 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-c軟件開發(fā)
olor: #727171;}.bookbox .bookinfo .actionBar .icon{ font-size: 15pt; color: #facea7;}.bookinfo-empty{ display: flex; flex-direction: column; align-items: center; padding: 5rpx; width:230rpx;}使用組件
//事件處理函數(shù) getCheckValues: function(e){ console.log('checkbox發(fā)生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>
html5
