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コンテナの内容を変更する方法

推薦する

配列をフィルタリングするJavaScript

この記事では、配列フィルタリングを実装するためのJavaScriptの具体的なコードを参考までに紹介...

MySQL の group by と order by を一緒に使用する方法

テーブル:reward(報酬テーブル)があるとします。テーブル構造は次のようになります。 テーブルt...

jQueryは要素を追加した後に元のイベントが実行されない問題を解決します

まずエラーコードを見てみましょう。 html: <テーブルボーダー="1"...

HTML テーブル マークアップ チュートリアル (39): ヘッダーの明るい境界線の色属性 BORDERCOLORLIGHT

テーブル ヘッダーでは、明るい境界線の色を個別に定義できます。基本的な構文<TH ボーダーカラ...

現在のブラウザが JavaScript でヘッドレス ブラウザであるかどうかを検出する方法

目次ヘッドレスブラウザとは何ですか?なぜ「ヘッドレス」ブラウザと呼ばれるのでしょうか?ヘッドレスブラ...

JavaScriptはスクロールバーの位置を取得し、ページをアンカーポイントまでスライドします。

序文この記事は、私が最近仕事で遭遇した問題を記録したものです。アプリネイティブとフロントエンドのh5...

純粋なCSSでは、子要素が親要素の幅制限を突破できる。

文章のスタイルでは、このような状況がよく見られます コードは次のとおりです <div styl...

自動検索提案機能のスタイルファイルを入力します: suggestion.css

コードをコピーコードは次のとおりです。 .sugLayerDiv{位置:相対; overflow:h...

「いいね!」文がインデックスに登録されないのはなぜですか?

序文この記事は、最も人気のある言語で最も退屈な基礎知識を説明することを目的としていますこのトピックは...

HTML に埋め込まれた Flash HTML ウェブページ コードに Flash ファイルを埋め込むソリューション (パート 1)

中国の習慣では、旧暦の1月15日より前に新年を祝います。ここで、庭にいる友人たちに新年の幸せを祈りた...

MySQLテーブル構造を変更するコマンドを表示する

簡単な説明エディターはデータベースのエンコードが間違っているために問題に遭遇することが多く、これは頭...

フレックスレイアウトのスペース間の最後の行の左揃えの問題を解決する方法

まずはコードと効果を見てみましょう↓ <スタイル> 。主要 { アウトライン: 1px ...

ウェブサイトはグレー表示されています。画像を含む互換コードはすべてのブラウザをサポートしています

通常、国喪の日、大地震の日、清明節には、ウェブサイト全体を灰色にして、故人への哀悼の意を表します。そ...

MySQL で UTF-8 エンコーディングを使用しないのはなぜですか?

MySQL UTF-8 エンコーディングMySQL は 2003 年のバージョン 4.1 から U...

MySQL 8.0 の統計が不正確である理由

序文Oracle であれ MySQL であれ、新バージョンで導入された新機能は、一方では製品の機能性...