プロンプトメッセージまでシームレススクロール（VUE）

<DIV クラス = " 注文tips__message項目" 
        ：クラス = " はgetClass（インデックス）" 
        V - のため = " ヒントに（orderTip、インデックス）" 
        ：キー = " インデックス" > 
        {{orderTip [ 3 ]}}
 </ DIV>

 

<スクリプト> 
エクスポートデフォルト{ 
  小道具：[ ' lbxxzsList '、' orderNum ' ]、
  データ（）{ 
    リターン{ 
      インデックス：0 、
　　　 ヒント：[ '提示1'、 '提示2'、 '提示3'] 
    }。
  }、
  計算：{ 
    maxIndexは（）{ 
      戻り 、この .tips.length - 1 。
    }、
  }、
  メソッド：{ 
    はgetClass（インデックス）{ 
      場合（この .maxIndex === 0 ）{
         リターン{}。
      }
      リターン{
         ' 注文tips__message項目- slidein '：インデックス=== 本.INDEX、
         ' 注文tips__message項目- slideout '：インデックス===（この .INDEX - 1）|| （この .INDEX === 0 &&インデックス=== 本.maxIndex）
      }。
    }、
  }、
  搭載（）{ 
    たsetInterval（（） => {
       CONST {インデックス、maxIndex} = この;
       この .INDEX =指数<maxIndex指数+？1：0。
    }、5000 ）。
  }、
}。
</ SCRIPT>

 

.order- tips__message { 
  位置：相対。
} 
.ORDER -tips__message- アイテム{ 
  位置：絶対。
  トップ：17px; 
  不透明度：0 ; 
} 
.ORDER -tips__message-item-- slidein { 
  トップ：0 。
  不透明度：1 ; 
  トランジション：トップ1S、不透明1S; 
} 
.ORDER -tips__message-item-- slideout { 
  トップ： - に16px。
  不透明度：0 ; 
  トランジション：トップ1S、不透明1S; 
}