vue实现鼠标拖拽div滚动效果-vue-dragscroll(整理)

简介: vue实现鼠标拖拽div滚动效果-vue-dragscroll(整理)

效果图:

1、 打开终端,输入npm install vue-dragscroll 回车运行完即可。

npm install vue-dragscroll

2、下面代码放入你的vue项目的main.js中。

import VueDragscroll from 'vue-dragscroll'
Vue.use(VueDragscroll)

3、然后,在你需要放置触摸滑动的内容,标签里加入指令v-dragscroll

<div class="slipTitList">
  <div v-dragscroll class="list">
    <div v-for=" index in 50" :key="index" class="list-item">
      item{{ index }}
    </div>
  </div>
</div>
相关文章
|
1天前
|
JavaScript 前端开发
vue(1),小白看完都会了
vue(1),小白看完都会了
|
1天前
|
JavaScript
Vue中避免滥用this去读取data中数据
Vue中避免滥用this去读取data中数据
|
1天前
|
JavaScript
vue中使用pinia及持久化
vue中使用pinia及持久化
5 0
|
1天前
|
JavaScript 前端开发 UED
Vue class和style绑定:动态美化你的组件
Vue class和style绑定:动态美化你的组件
|
1天前
|
JavaScript 前端开发 API
Vue 监听器:让你的应用实时响应变化
Vue 监听器:让你的应用实时响应变化
|
1天前
|
JavaScript
vue封装svg
vue封装svg
7 0
|
1天前
|
JavaScript
vue封装面包屑组件
vue封装面包屑组件
7 0
|
1天前
|
JavaScript
Vue 编写(preventReClick)防暴点 +防抖(debounce)和节流(throttle)函数
Vue 编写(preventReClick)防暴点 +防抖(debounce)和节流(throttle)函数
|
1天前
|
JavaScript 数据库
ant design vue日期组件怎么清空 取消默认当天日期
ant design vue日期组件怎么清空 取消默认当天日期
|
1天前
|
JavaScript C++
vue高亮显示组件--转载
vue高亮显示组件--转载
8 0