Vue uniapp はセグメンター効果を実現します

Vue uniapp はセグメンター効果を実現します

この記事では、セグメンター効果を実現するための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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • uniapp エントリーレベル nvue クライミングピット記録の分析
  • vue+uniappライブ放送プロジェクトに基づいて、uni-appはDouyin / Momoライブ放送ルーム機能を模倣します
  • uniappとvueの違いの詳細な説明

<<:  MySql8 WITH RECURSIVE 再帰クエリ親子コレクションメソッド

>>:  既存のDockerコンテナの内容を変更する方法

推薦する

Vue は better-scroll を使用して水平スクロール方法の例を実現します

1. スクロールの実装原理better-scroll のスクロール原理は、ブラウザのネイティブスクロ...

Linux でファイルを削除するときに「操作は許可されていません」というプロンプトが表示される場合の対処方法

同僚からよく聞かれるのですが、ファイル/ディレクトリを削除すると「操作は許可されていません」というエ...

eject を使用せずに create-react-app の設定を変更する方法

1. イジェクトが推奨されないのはなぜですか? 1. eject を実行した後、どのような変化があり...

JavaScript ドキュメント オブジェクト モデル DOM

目次1. JavaScriptはページ内のすべてのHTML要素を変更できる1. IDでHTML要素を...

ウェブデザインにおける2種類のタブアプリケーション

現在、Web デザインではタブが広く使用されていますが、一般的に次の 2 つのタイプに分けられます。...

MySQL最新バージョン8.0.17解凍版インストールチュートリアル

個人的にはインストール版よりも解凍版の方がインストールしやすいと思います。早速、解凍版のインストール...

インストールされていないバージョンの MySQL を使用する手順とパスワードを忘れた場合の解決策

最初のステップは、圧縮されたパッケージを対応するディスクに解凍することです。 2 番目の手順は、cm...

WeChatアプレットの下部にあるタブバーがコンテンツをブロックする問題に対処する簡単な方法

WeChatアプレットでタブバーを設定すると、重要なコンテンツがブロックされ、iPhoneXなどの異...

Window.nameはクロスドメインデータ転送の問題を解決します

<br />原文: http://research.microsoft.com/~hel...

MySQL 作成ルーチン権限に関する注意事項

1. ユーザーにルーチン作成権限がある場合は、プロシージャ | 関数を作成できます。 2. ユーザー...

MySQL でストリーミングクエリを使用してデータ OOM を回避する

目次1. はじめに2. JDBCはストリーミングクエリを実装する3. パフォーマンステスト3.1. ...

CSS3は小さな矢印のさまざまなグラフィック効果を実現します

CSS を使ってさまざまなグラフィックを実現できるのは素晴らしいことです。画像を切り取る必要はなく、...

MySQLの読み書き分離により挿入後にデータが選択されなくなる問題を解決

MySQLは独立した書き込み分離を設定します。コードに次のものを書くと問題が発生する可能性があります...

Docker実践: Pythonアプリケーションのコンテナ化

1. はじめにコンテナはサンドボックス メカニズムを使用して相互に分離します。コンテナ内にデプロイさ...

Tomcat 経由で JMX 監視を有効にする方法

シミュレーション環境を構築する:オペレーティングシステム: centos7メモリ: 1G 1.8.0...