この記事では、セグメンター効果を実現するためのvue uniappの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。 これは、vueでスタイルを動的に変更する効果を記録するためだけのものです。 まずは効果を見せましょう テンプレート <view class="countTime"> <text class="title">割引と食事時間</text> <view class="wrap"> <view class="box" v-for="(item,index) in discountList" :key="index" @click="toggleItem(index)"> <view class="selBox" :style="[itemStyle(index)]"> <view class="countBox"> <text class="count">{{item.count}}</text> <text>折りたたむ</text> </ビュー> <text class="time">{{item.time}}</text> </ビュー> <text class="countPrice" :style="[priceStyle(index)]">割引後、1人あたりの平均価格は100円です</text> </ビュー> </ビュー> </ビュー> スクリプト部分 この部分の鍵となるのは、計算されたコードです エクスポートデフォルト{ データ() { 戻る { themColor:this.Enum.Them.base、 割引リスト:[{ 「カウント」:6.9, "時間":"12:00~13:00" },{ 「カウント」:6.7, "時間":"14:00~16:00" },{ "カウント":6.5, "時間":"20:00~22:00" }], 現在のインデックス:0 } }, 計算:{ アイテムスタイル(){ インデックスを返す => { スタイルを {} にします if(インデックス === this.currentIndex){ style.backgroundColor = this.themColor; style.border = `1px solid ${this.themColor}`; スタイルの色 = '#fff'; } //2番目が選択されると、最初の右の境界線と3番目の左の境界線はnoneに設定されます if(this.currentIndex === 1){ if(インデックス === this.currentIndex - 1){ style.borderRight = 'なし!重要' } if(インデックス === this.currentIndex + 1){ style.borderLeft = 'なし!重要' } } 戻りスタイル } }, 価格スタイル(){ インデックスを返す => { スタイルを {} にします if(インデックス === this.currentIndex){ style.color = this.themColor } 戻りスタイル } } }, メソッド: { トグルアイテム(idx){ this.currentIndex = idx } } } CSS スタイル ここで使用する SCSS についてはここでは詳しく説明しません。 .countTime{ ディスプレイ: フレックス; flex-direction: 列; 。タイトル{ フォントサイズ: $uni-font-size-bl; マージン: 20rpx 0; } 。包む{ ディスプレイ: フレックス; 。箱{ @include flex(列、中心、中心); 幅: 33%; &:n番目の子(2){ & > .selBox{ 左境界線: なし; 右境界線: なし; } } .selBox{ @include flex(列、中心、中心); 幅: 100%; 高さ: 150rpx; 境界線: 1px 実線 $uni-border-color; .countBox{ フォントサイズ: $uni-font-size-lg; フォントの太さ: 太字; 下部マージン: 10rpx; 。カウント{ フォントサイズ: $uni-font-size-bl; } } 。時間{ フォントサイズ: $uni-font-size-l; } } .count価格{ 上マージン: 10rpx; フォントサイズ: $uni-font-size-l; } } } } 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySql8 WITH RECURSIVE 再帰クエリ親子コレクションメソッド
1. スクロールの実装原理better-scroll のスクロール原理は、ブラウザのネイティブスクロ...
同僚からよく聞かれるのですが、ファイル/ディレクトリを削除すると「操作は許可されていません」というエ...
1. イジェクトが推奨されないのはなぜですか? 1. eject を実行した後、どのような変化があり...
目次1. JavaScriptはページ内のすべてのHTML要素を変更できる1. IDでHTML要素を...
現在、Web デザインではタブが広く使用されていますが、一般的に次の 2 つのタイプに分けられます。...
個人的にはインストール版よりも解凍版の方がインストールしやすいと思います。早速、解凍版のインストール...
最初のステップは、圧縮されたパッケージを対応するディスクに解凍することです。 2 番目の手順は、cm...
WeChatアプレットでタブバーを設定すると、重要なコンテンツがブロックされ、iPhoneXなどの異...
<br />原文: http://research.microsoft.com/~hel...
1. ユーザーにルーチン作成権限がある場合は、プロシージャ | 関数を作成できます。 2. ユーザー...
目次1. はじめに2. JDBCはストリーミングクエリを実装する3. パフォーマンステスト3.1. ...
CSS を使ってさまざまなグラフィックを実現できるのは素晴らしいことです。画像を切り取る必要はなく、...
MySQLは独立した書き込み分離を設定します。コードに次のものを書くと問題が発生する可能性があります...
1. はじめにコンテナはサンドボックス メカニズムを使用して相互に分離します。コンテナ内にデプロイさ...
シミュレーション環境を構築する:オペレーティングシステム: centos7メモリ: 1G 1.8.0...