ミニプログラムカスタムコンポーネント(コード)の実装方法
この記事の内容はミニプログラムのカスタムコンポーネントの実装方法(コード)についてです。必要な方は参考にしていただければ幸いです。
#ファイル: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> <block> <view> <image></image> <view>{{item.title}}</view> <view> <block> <view>暂缺货</view> <view></view> </block> <block> <view>可借阅</view> <view></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> <three-col-grid></three-col-grid> </view>
.test{ display: flex; justify-content: center; /* border: 1rpx #444 solid; */ }
php は自己増加 ID を生成する Mongodb カスタム メソッドを実装します
カスタム イベントを実装する JavaScript の詳細な説明_javascript スキル
#以上がミニプログラムカスタムコンポーネント(コード)の実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











HTML の表の境界線に関するガイド。ここでは、HTML でのテーブルの境界線の例を示しながら、テーブル境界線を定義する複数の方法について説明します。

これは、HTML でのネストされたテーブルのガイドです。ここでは、テーブル内にテーブルを作成する方法をそれぞれの例とともに説明します。

HTML マージン左のガイド。ここでは、HTML margin-left の概要とその例、およびそのコード実装について説明します。

HTML テーブル レイアウトのガイド。ここでは、HTML テーブル レイアウトの値と例および出力について詳しく説明します。

HTML でのテキストの移動に関するガイド。ここでは、概要、マーキー タグが構文でどのように機能するか、および実装例について説明します。

HTML オンクリック ボタンのガイド。ここでは、それらの紹介、動作、例、およびさまざまなイベントでの onclick イベントについてそれぞれ説明します。

HTML 入力プレースホルダーのガイド。ここでは、コードと出力とともに HTML 入力プレースホルダーの例について説明します。
