この記事では、セグメンター効果を実現するための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 再帰クエリ親子コレクションメソッド
この記事では、配列フィルタリングを実装するためのJavaScriptの具体的なコードを参考までに紹介...
テーブル:reward(報酬テーブル)があるとします。テーブル構造は次のようになります。 テーブルt...
まずエラーコードを見てみましょう。 html: <テーブルボーダー="1"...
テーブル ヘッダーでは、明るい境界線の色を個別に定義できます。基本的な構文<TH ボーダーカラ...
目次ヘッドレスブラウザとは何ですか?なぜ「ヘッドレス」ブラウザと呼ばれるのでしょうか?ヘッドレスブラ...
序文この記事は、私が最近仕事で遭遇した問題を記録したものです。アプリネイティブとフロントエンドのh5...
文章のスタイルでは、このような状況がよく見られます コードは次のとおりです <div styl...
コードをコピーコードは次のとおりです。 .sugLayerDiv{位置:相対; overflow:h...
序文この記事は、最も人気のある言語で最も退屈な基礎知識を説明することを目的としていますこのトピックは...
中国の習慣では、旧暦の1月15日より前に新年を祝います。ここで、庭にいる友人たちに新年の幸せを祈りた...
簡単な説明エディターはデータベースのエンコードが間違っているために問題に遭遇することが多く、これは頭...
まずはコードと効果を見てみましょう↓ <スタイル> 。主要 { アウトライン: 1px ...
通常、国喪の日、大地震の日、清明節には、ウェブサイト全体を灰色にして、故人への哀悼の意を表します。そ...
MySQL UTF-8 エンコーディングMySQL は 2003 年のバージョン 4.1 から U...
序文Oracle であれ MySQL であれ、新バージョンで導入された新機能は、一方では製品の機能性...