ホームページ  >  記事  >  ウェブフロントエンド  >  Vue は画像のマーキー スクロールを実装します

Vue は画像のマーキー スクロールを実装します

php中世界最好的语言
php中世界最好的语言オリジナル
2018-04-12 13:33:154932ブラウズ

今回は、Vue で画像マーキー スクロールを実装する方法について説明します。Vue で画像マーキー スクロールを実装する際の 注意事項 は何ですか。実際のケースを見てみましょう。

父:りー

サブコンポーネント:

<template>
 <p id="app">
  <er-carousel-index :typeNumber=2 :pageNumber=3 :timeSpace=2 :duration=2 :isOrNotCircle="true" url="/src/js/index.json" :isOrNotButton=false>
   <template scope="props">-----使用子组件传过来的值,封装slot
    <p class="articleList-box-photo ">
     <p class="tu imageEffectsAnimate imageEffects_Magnifier">
      <a>
       <img class="minMax" :src="props.item.img">
      </a>
     </p>
    </p>
    <p class="articleList-box-title">
     <p class="title">
      <a class="textleft">{{props.item.title}}</a>
     </p>
    </p>
   </template>
  </er-carousel-index>
 </p>
</template>
<script>
 import ErCarouselIndex from './components/carouselIndex/src/carouselIndex.vue'
 export default {
  name: 'app',
  data() {
   }
    },
  components: {
   ErCarouselIndex//一定要进行组件声明,不然不能引用子组件
  }
 }
</script>
このコンポーネントの機能は比較的完成されており、ユーザーは現在のページに表示する必要がある画像の数、画像のスクロール時間間隔、左クリックと右クリックのボタンを表示するかどうかなどを制御するパラメータを渡すことができます。詳細なパラメータについては、以下を参照してください。小道具にはすべて

注釈が付いています。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

お勧めの読書:

Vue コンポーネント開発のヒントは何ですか?

axios はパラメーターを受け入れることができません。

以上がVue は画像のマーキー スクロールを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。