1、安装vue-seamless-scroll npm install vue-seamless-scroll --save 1. 2、引入组件 <vue-seamless-scroll></vue-seamless-scroll> importvueSeamlessScrollfrom'vue-seamless-scroll' components: { vueSeamlessScroll }, 1. 2. 3. 4. 5. 6. 7. 3、配置参数 // 监听属性 类似于data概念 computed: { ...
vueSeamlessScroll } data(){return{ defaultOption: { step:1,//数值越大速度滚动越快limitMoveNum: 0,//开始无缝滚动的数据量 this.dataList.lengthhoverStop:true,//是否开启鼠标悬停stopdirection: 1,//0向下 1向上 2向左 3向右openWatch:true,//开启数据实时监控刷新domsingleHeight: 0,//单步运动停止...
} toDetail方法写在vue-seamless-scroll中的div中可以获取到整个item对象,但是有一个bug就是第一个item点击没有反应,网上说是因为vue-seamless-scroll中间包裹的dom复制渲染,没有带上dom的事件导致,使用事件委托方法解决,所以方法加在了外边,通过e.target获取。publicNotificationOption中还有很多属性可以设置滚动样式,可...
1、安装vue-seamless-scroll npm install vue-seamless-scroll --save 2、引入组件 <vue-seamless-scroll></vue-seamless-scroll>importvueSeamlessScrollfrom'vue-seamless-scroll'components:{vueSeamlessScroll}, 3、配置参数 // 监听属性 类似于data概念computed:{defaultOption(){return{step:0.2,// 数值越大速度...
importvueSeamlessScrollfrom'vue-seamless-scroll' exportdefault{ data(){ return{ optionCustomer: { step:0,// 大于0的情况下会自动滚动 ,为0的情况下只可手指滑动不可滚动 limitMoveNum:1,// 数组长度大于等于1的时候触发滚动 openTouch:true,// true 为可以手指滑动 ...
</vue-seamless-scroll> 下面是计算属性 computed: { defaultOption () { return { step: 1, // 数值越大速度滚动越快 limitMoveNum: 12, // 开始无缝滚动的数据量 this.dataList.length hoverStop: true, // 是否开启鼠标悬停stop direction: 1, ...
// 或者你可以自己设置全局注册的组件名 默认注册的组件名是 vue-seamless-scrollVue.use(scroll,{componentName: 'scroll-seamless'})// 2.单个.vue文件局部注册 import vueSeamlessScroll from 'vue-seamless-scroll' export default { components: { vueSeamlessScroll } } 使用组件 <template>...
{seamlessScrollOption() {return {step: 0.2, // 数值越大速度滚动越快limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.lengthhoverStop: true, // 是否开启鼠标悬停stopdirection: 1, // 0向下 1向上 2向左 3向右openWatch: true, // 开启数据实时监控刷新domsingleHeight: 0, // 单步运动...
import vueSeamless from 'vue-seamless-scroll' export default { components: { vueSeamless}} 3.简单使用 <vue-seamless-scroll></vue-seamless-scroll> 3,参数配置 // 监听属性 类似于data概念 computed: { defaultOption () { return { step: 0.2, //...
实现效果:鼠标滑入静止实现步骤: 一、下载插件 cnpm i --s vue-seamless-scroll 二、在main.js文件里引用 import scroll from 'vue-seamless-scroll' Vue.use(scroll) 按需引入也是可以的 三、封装scroll.vue 注意:1、这里有三张图片,是背景图左右两边的颜色, ...