ビューコンポーネントは、Webページのdivに似たビューコンテナコンポーネントです。
hover-class：押すスタイルクラスを指定します
hover-start-time：押し続けた後、クリック状態が表示される時間（ミリ秒単位）
<view hover-class="hover" hover-start-time="2000">组件view的hover-class属性</view>テキストテキストコンポーネント
user-select：この属性は、テキストが選択可能かどうか（テキストを長押し）を表します。デフォルトはfalseです。
デコード：この属性で表されるテキストコンテンツの特別な記号がデフォルトでデコードされるかどうかfalse
<text user-select="true" decode="true">>text组件，\n是否可选<</text>画像画像。JPG、PNG、SVG、WEBP、GIFおよびその他の形式をサポート
src属性画像のインポートアドレス属性
モードの一般的に使用される値
| scaleToFill | ズームモードでは、アスペクト比を維持せずに画像をズームします。これにより、画像の幅と高さが完全に引き伸ばされて画像要素が塗りつぶされます。 | |
|---|---|---|
| アスペクトフィット | ズームモードでは、アスペクト比を維持して画像をズームし、画像の長辺を完全に表示できるようにします。つまり、画像を完全に表示することができます。 | |
| アスペクトフィル | ズームモードでは、アスペクト比を維持して画像をズームし、画像の短辺のみを完全に表示できるようにします。言い換えれば、画像は通常、水平方向または垂直方向にのみ完成し、他の方向は傍受されます。 | |
| widthFix | ズームモード、幅は同じまま、高さは自動的に変更され、元の画像のアスペクト比は変更されません。 |
注意：
- 画像コンポーネントのデフォルトの画像サイズは、幅320ピクセル、高さ240ピクセルです。
- プログラムのリリースは2mを超えることはできません。画像のローカライズは推奨されておらず、ネットワークアドレスを使用する必要があります。地元の写真をインターネットにアップロードするには、写真ベッドのWebサイトhttps://imgurl.org/をお勧めします。
- ここでのaspectFitの長辺は、設定値のサイズ（大きい方の値が必ずしも長辺である必要はありません）、最初に設定値にズームされた長辺、および長辺によって決定されません。
- アスペクトフィルズームモードでは、アスペクト比を維持して画像をズームし、画像の短辺のみが完全に表示されるようにします。言い換えれば、画像は通常、水平方向または垂直方向にのみ完成し、他の方向は傍受されます。
ボタン
一般的な属性のリスト
| サイズ | ストリング | デフォルト | 番号 | ボタンのサイズ | 1.0.0 |
| タイプ | ストリング | デフォルト | 番号 | ボタンスタイルタイプ | 1.0.0 |
| 平野 | ブール値 | false | 番号 | ボタンがくり抜かれ、背景色が透明かどうか | 1.0.0 |
| 無効 | ブール値 | false | 番号 | 無効にするかどうか | 1.0.0 |
| 読み込み中 | ブール値 | false | 番号 | 名前の前に読み込みアイコンがあるかどうか | 1.0.0 |
| オープンタイプ | ストリング | 番号 | WeChatオープンアビリティ |
オープンタイプの共通属性値
| 連絡先 | カスタマーサービスセッションを開きます。ユーザーがセッション内のメッセージカードをクリックしてからアプレットに戻ると、bindcontactコールバックから特定の情報を取得し、詳細を指定できます。 | 1.1.0 |
|---|---|---|
| 共有 | ユーザー転送をトリガーします。使用する前に手順を読むことをお勧めします | 1.2.0 |
| getPhoneNumber | ユーザーの携帯電話番号を取得します。ユーザー情報はbindgetphonenumberコールバックから取得できます。 | 1.2.0 |
| getUserInfo | ユーザー情報を取得します。bindgetuserinfoコールバックからユーザー情報を取得できます。 | 1.3.0 |
| launchApp | APPを開くと、app-parameter属性を介してAPPに渡されるパラメーターを設定できます。 | 1.9.5 |
| openSetting | 認証設定ページを開きます | 2.0.7 |
| フィードバック | 「フィードバック」ページを開くと、ユーザーはフィードバックコンテンツを送信し、ログをアップロードできます。開発者は、ミニプログラム管理のバックグラウンドにログインし、左側のメニューの「カスタマーサービスフィードバック」ページにアクセスしてフィードバックコンテンツを取得できます。 |
注：共有は友達にのみ転送でき、グループチャットはモーメントに転送できません
注：openSettingの表示権限は、要求された権限のみを表示できます
例
<button
size="default"
type="primary"
plain=""
disabled=""
loading="true"
>加载按钮</button>
<button
type="warn"
open-type="contact"
bindcontact="handleContact"
>contact客服会话</button>
<button
type="primary"
open-type="share"
>share转发不能发朋友圈</button>
<button
type="primary"
size="mini"
open-type="getPhoneNumber"
bindgetphonenumber="getphonenumber"
>getPhoneNumber获取手机号</button>
<button
type="primary"
open-type="getUserInfo"
bindgetuserinfo = "getUserInfo"
>getUserInfo用户信息</button>
<button
type="primary"
open-type="openSetting"
>openSetting授权设置</button>
チェックボックス
注：チェックボックスは、チェックボックスグループコンポーネントと組み合わせて使用する必要があります
| 属性 | の種類 | デフォルト | 必須 | 説明 | 最小バージョン |
|---|---|---|---|---|---|
| 値 | ストリング | 番号 | チェックボックスの識別、選択されたときにチェックボックスグループの変更イベントをトリガーし、チェックボックスの値を伝達します | 1.0.0 | |
| 無効 | ブール値 | false | 番号 | 無効にするかどうか | 1.0.0 |
| チェック済み | ブール値 | false | 番号 | 現在選択されているかどうかを使用して、デフォルトの選択を設定できます | 1.0.0 |
| 色 | ストリング | ＃09BB07 | 番号 | チェックボックスの色、cssの色と同じ | 1.0.0 |
<checkbox-group bindchange="changeCheckbox">
<checkbox value="bj" color="#784515">北京</checkbox>
<checkbox value="sh">上海</checkbox>
<checkbox value="sz">深圳</checkbox>
</checkbox-group>
changeCheckbox:function(e){
console.log(e)
}
無線
注：無線コンポーネントは、無線グループコンポーネントと組み合わせて使用する必要があります
| 属性 | の種類 | デフォルト | 必須 | 説明 | 最小バージョン |
|---|---|---|---|---|---|
| 値 | ストリング | 番号 | ラジオのロゴ。場合ラジオをれる選択の変更イベント無線グループは、運ぶの値ラジオ | 1.0.0 | |
| チェック済み | ブール値 | false | 番号 | 現在選択されています | 1.0.0 |
| 無効 | ブール値 | false | 番号 | 無効にするかどうか | 1.0.0 |
| 色 | ストリング | ＃09BB07 | 番号 | ラジオの色、cssの色と同じ | 1.0.0 |
<radio-group bindchange="radioChange">
<radio value="nan">男</radio>
<radio value="nv">女</radio>
</radio-group>
radioChange:function(res){
console.log(res)
}
スワイパー
注：スライダービューコンテナー。スワイパーアイテムコンポーネントのみを配置できます。そうしないと、未定義の動作が発生します。
| 属性 | の種類 | デフォルト | 必須 | 説明 | 最小バージョン |
|---|---|---|---|---|---|
| インジケータードット | ブール値 | false | 番号 | パネル表示点を表示するかどうか | 1.0.0 |
| インジケーターカラー | 色 | rgba（0、0、0、.3） | 番号 | ポイントカラー | 1.1.0 |
| インジケーター-アクティブカラー | 色 | ＃000000 | 番号 | 現在選択されているインジケーターポイントの色 | 1.1.0 |
| 自動再生 | ブール値 | false | 番号 | 自動的に切り替えるかどうか | 1.0.0 |
| 電流 | 数 | 0 | 番号 | 現在のスライダーのインデックス | 1.0.0 |
| 間隔 | 数 | 5000 | 番号 | 自動切り替え時間間隔 | 1.0.0 |
| デュレーション | 数 | 500 | 番号 | スライドアニメーションの長さ | 1.0.0 |
| 円形 | ブール値 | false | 番号 | 収束スライディングを使用するかどうか | 1.0.0 |
| 垂直 | ブール値 | false | 番号 | スライド方向が垂直かどうか | 1.0.0 |
| 前マージン | ストリング | 「0px」 | 番号 | フロントマージンは、前のアイテムのごく一部を公開するために使用でき、pxおよびrpx値を受け入れます | 1.9.0 |
| 次のマージン | ストリング | 「0px」 | 番号 | バックマージンは、後者のアイテムのごく一部を公開するために使用でき、pxおよびrpx値を受け入れます | 1.9.0 |
| スナップツーエッジ | ブール値 | 「偽」 | 番号 | スワイパーアイテムの数が2以上の場合、循環がオフになり、前マージンまたは次マージンがオンになります。このマージンを最初と最後の要素に適用するかどうかを指定できます。 | 2.12.1 |
| display-multiple-items | number | 1 | 否 | 同时显示的滑块数量 | 1.9.0 |
| easing-function | string | "default" | 否 | 指定 swiper 切换缓动动画类型 | 2.6.5 |
| bindchange | eventhandle | 否 | current 改变时会触发 change 事件，event.detail = {current, source} | 1.0.0 | |
| bindtransition | eventhandle | 否 | swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy} |
<swiper
indicator-dots="true"
indicator-color="orange"
indicator-active-color="white"
autoplay="false"
current="2"
interval="3000"
duration="500"
circular="true"
previous-margin="20px"
next-margin="20px"
snap-to-edge="true"
display-multiple-items="1"
bindchange="swiperChange"
bindtransition='bindtransition'
>
<swiper-item>
<image src="https://ftp.bmp.ovh/imgs/2021/03/89e52ad717008760.jpg" alt=""></image>
</swiper-item>
<swiper-item>
<image src="https://ftp.bmp.ovh/imgs/2021/03/b09da3334f650bed.jpg" alt=""></image>
</swiper-item>
<swiper-item>
<image src="https://ftp.bmp.ovh/imgs/2021/03/f2b5f2af5c824216.jpg" alt=""></image>
</swiper-item>
<swiper-item>
<image src="https://ftp.bmp.ovh/imgs/2021/03/14e10e003886bac1.jpg" alt=""></image>
</swiper-item>
</swiper>