vue-seamless-scroll 无线列表滚动卡顿问题

出现卡顿问题,相关配置没有问题的情况下,要给vue-seamless-scroll设置高度

<div style="height: 160px; overflow: hidden">
	<vue-seamless-scroll
			:data="list"
			:class-option="optionSetting">
				<ul>
					<li v-for="(item, index) in list"
						:key="index">
							<span>{{ index }}</span>
					</li>
				</ul>
	</vue-seamless-scroll>
</div>

data循环数据

class-option相关配置写在computed里

 computed: {
    optionSetting () {
      return {
        step: 0.3, // 数值越大速度滚动越快
        limitMoveNum: 4, // 开始无缝滚动的数据量 
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: false, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 2000, // 单步运动停止的时间(默认值1000ms)

      };
    },
  },

  • 10
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue-seamless-scroll 是一个基于 Vue.js 的插件,用于实现无缝滚动效果。它可以在水平或垂直方向上实现内容的连续滚动,给用户带来流畅的滚动体验。 要实现有缝滚动,你可以按照以下步骤进行操作: 1. 安装 vue-seamless-scroll 插件: 你可以通过 npm 或 yarn 来安装 vue-seamless-scroll 插件,具体命令如下: ``` npm install vue-seamless-scroll ``` 或 ``` yarn add vue-seamless-scroll ``` 2. 在你的 Vue 组件中引入并注册 vue-seamless-scroll 插件: 在需要使用有缝滚动效果的组件中,引入 vue-seamless-scroll 插件,并将其注册为 Vue 的全局或局部组件。 3. 在模板中使用 vue-seamless-scroll 组件: 在模板中使用 vue-seamless-scroll 组件,并设置相应的属性来控制滚动效果。你可以设置滚动方向、滚动速度滚动内容等属性。 4. 编写滚动内容: 在 vue-seamless-scroll 组件中,你可以编写需要滚动的内容。可以是文本、图片、列表等。 下面是一个简单的示例代码,演示了如何使用 vue-seamless-scroll 实现有缝滚动效果: ```vue <template> <div> <vue-seamless-scroll :speed="30" :direction="'horizontal'"> <ul> <li v-for="item in items" :key="item.id">{{ item.text }}</li> </ul> </vue-seamless-scroll> </div> </template> <script> import VueSeamlessScroll from 'vue-seamless-scroll'; export default { components: { VueSeamlessScroll }, data() { return { items: [ { id: 1, text: 'Item 1' }, { id: 2, text: 'Item 2' }, { id: 3, text: 'Item 3' }, // ... ] }; } }; </script> ``` 在上面的示例中,我们使用了 `vue-seamless-scroll` 组件来实现水平方向的有缝滚动效果。通过设置 `speed` 属性来控制滚动速度,设置 `direction` 属性来指定滚动方向。在 `ul` 元素中,使用 `v-for` 指令来循环渲染滚动内容。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值