vue裡面上下輪播圖(app,廣告提示,手機號滾動等)
阿新 • • 發佈:2018-11-22
vue-seamless-scroll 外掛
1.下載外掛
npm install vue-seamless-scroll --save
2. 在main.js裡面引入使用
import scroll from 'vue-seamless-scroll'
Vue.use(scroll)
3.頁面使用(根據需求 設定相對應的屬性) 樣式加上 不然的話會有一點bug 自己測試
<template> <vue-seamless-scroll :data="listData" :class-option="optionSingleHeight" class="seamless-warp"> <ul class="item"> <li v-for="item in listData"> <span class="title" v-text="item.title"></span><span class="date" v-text="item.date"></span> </li> </ul> </vue-seamless-scroll> </template> <style scoped> *{ margin:0;padding:0; } .seamless-warp { height: 40px; overflow: hidden; line-height:40px; background: red } </style> <script> export default { data () { return { listData: [{ 'title': '無縫滾動第一行無縫滾動第一行', 'date': '2017-12-16' }, { 'title': '無縫滾動第二行無縫滾動第二行', 'date': '2017-12-16' }, { 'title': '無縫滾動第三行無縫滾動第三行', 'date': '2017-12-16' }, { 'title': '無縫滾動第四行無縫滾動第四行', 'date': '2017-12-16' }, { 'title': '無縫滾動第五行無縫滾動第五行', 'date': '2017-12-16' }, { 'title': '無縫滾動第六行無縫滾動第六行', 'date': '2017-12-16' }, { 'title': '無縫滾動第七行無縫滾動第七行', 'date': '2017-12-16' }, { 'title': '無縫滾動第八行無縫滾動第八行', 'date': '2017-12-16' }, { 'title': '無縫滾動第九行無縫滾動第九行', 'date': '2017-12-16' }] } }, computed: { optionSingleHeight () { return { // (什麼都不設定預設的) // singleHeight: 40 (帶停頓的) // waitTime:2500 (停頓時間) // direction: 0 (從上往下的) // direction:2 (左右的) //step:1 (調整速度的)0 // hoverStop:false (滑鼠停留停止 離開繼續執行(反之則停止)) } } } } </script>