美文网首页
vue的无缝滚动插件vue-seamless-scroll的安装

vue的无缝滚动插件vue-seamless-scroll的安装

作者: 五四青年_4e7d | 来源:发表于2020-04-26 23:20 被阅读0次

    下载:

     cnpm install vue-seamless-scroll --save
    

    在vue的min.js中引入:

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

    html

    <template>
        <vue-seamless-scroll :data="listData"  :class-option="optionSetting" class="seamless-warp ">
            <ul class="item">
                <li v-for="(item,i) in listData" :key="i">
                    <!-- <span class="title" v-text="item.title">
                       
                  </span> -->
                    <el-tooltip class="item" effect="dark" :content="item.title" placement="top-start">
          <el-button class="dit">{{item.title}}</el-button>
        </el-tooltip>
                  
                  <span class="date" v-text="item.date">
    
                  </span>
                </li>
            </ul>
        </vue-seamless-scroll>
    </template>
    

    js

     //计算属性
        computed: {
       optionSetting () {
        return {
            step: 0.2, // 数值越大速度滚动越快
          }
        }
       },
    //数据
           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'
                     }],
    

    相关文章

      网友评论

          本文标题:vue的无缝滚动插件vue-seamless-scroll的安装

          本文链接:https://www.haomeiwen.com/subject/ignswhtx.html