vue-seamless-scroll 竖向滚动使用实例(nuxt.js)
Posted chenyongTao
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue-seamless-scroll 竖向滚动使用实例(nuxt.js)相关的知识,希望对你有一定的参考价值。
安装 npm install vue-seamless-scroll --save
创建
import Vue from \'vue\'
import scroll from \'vue-seamless-scroll\'
Vue.config.devtools = process.env.NODE_ENV === \'DEV\'
Vue.use(scroll);
<div class="r-body"> <span class="title">人气店铺</span> <vue-seamless-scroll :data="renQiShop" class="seamless-warp" :class-option="classOption"> <el-col :span="24" class="rot-shop" v-for="(item,index) in renQiShop" :key="index" v-if="item.shopTitle!=\'\'&&item.shopTitle!=undefined"> <nuxt-link :to="\'/shop/\'+ item.userId"> {{item.shopTitle}} </nuxt-link> </el-col> </vue-seamless-scroll> </div> computed: { classOption () { return { direction: 1, // 0 向下 step:0.5, // 滚动速度控制 limitMoveNum: 1 // 从几条数据开始滚动 } } }
以上是关于vue-seamless-scroll 竖向滚动使用实例(nuxt.js)的主要内容,如果未能解决你的问题,请参考以下文章
vue基于vue-seamless-scroll实现无缝滚动效果
vue实现列表自动滚动向上滚动的效果(vue-seamless-scroll)
vue 无缝滚动插件vue-seamless-scroll的安装与使用
vue 无缝滚动插件vue-seamless-scroll的安装与使用