vue上下轮播图（app，广告提示，手机号滚动等）

vue-seamless-scroll 插件

• 下载插件

  #### ​        npm install vue-seamless-scroll --save
  

• 在main.js里面引入使用

  ####         import scroll from 'vue-seamless-scroll'
  
  ####         Vue.use(scroll)
  

• 页面使用
  html

<template>
    <vue-seamless-scroll :data="listData" :class-option="optionSingleHeight" class="seamless-warp">
        <ul class="item">
            <li v-for="item in listData" @click="getData(item)">
                <span class="title" v-text="item.title"></span><span class="date" v-text="item.date"></span>
            </li>
        </ul>
    </vue-seamless-scroll>
</template>

js

export default {
    name: "lianxi",
    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'
            }]
        }
    },
  methods:{
            getData:function (item) {
                console.log(item.title);
            }
        },
    computed: {
        optionSingleHeight () {
            return {
                //                       （什么都不设置默认的）
                //  singleHeight: 40     （带停顿的）
                // waitTime:2500         （停顿时间）
                // direction: 0          （从上往下的）
                // direction:2           （左右的）
                //step:1                 （调整速度的）0
                // hoverStop:false        (鼠标停留停止 离开继续运行（反之则停止）)
            }
        }
    }
}

css

<style scoped>
    *{
        margin:0;padding:0;
    }
    .seamless-warp {
        width: 100%;
        height: 0.40rem;
        overflow: hidden;
        line-height:0.40rem;
        background: red;
        font-size: 0.32rem;
    }
</style>