Vue&uni-app swiper 轮播支持鼠标滚轮翻页实现
最近使用 uni-app 开发的一个 H5 项目，其中有一个 用 uni-app 原生 swiper 组件写的轮播。
今天领导在用的时候提出一个问题：你这个不支持鼠标滚轮啊？我就比较疑惑 uni-app 是移动端场景啊，谁用手机还外接个鼠标啊。
没办法，该改还得改，下面教程开始：
1、在 methods 内添加方法：
methods: {
handleScroll (e) {
// 鼠标滚轮滚动 swiper
if (this.curDot < 2) { // 如果index小于2: swiper-item 的数量 curDot: 当前显示的index
this.swiper.curDot++
} else {
this.swiper.curDot--
}
}
}2、在 Mounted () 方法里监听鼠滚轮（mousewheel）。
mounted () {
// 监听鼠标滚轮
window.addEventListener('mousewheel', this.handleScroll, false)
}现在，滚动鼠标滑轮试一下，发现 swiper 可以翻页了。
不过有个问题，不管鼠标滚轮上滑还是下滑， swiper 都是往下翻的。
还需要再改造一下：
鼠标滑轮滚动的时候会有一个 deltaY 属性，正直（100）为往下滑动，负值（-100）为向上滑动。
3、修改一下 methods 内的方法：
methods: {
handleScroll (e) {
console.log('mouse scroll:', e.deltaY + 'px')
// 鼠标滚轮滚动 swiper
if (e.deltaY > 0 && this.curDot < 2) {
this.swiper.curDot++
} else if (e.deltaY < 0 && this.curDot > 0) {
this.swiper.curDot--
}
}
}这里要注意，给 swiper 增加一个 change 事件：
<swiper
...
:current="curDot"
@change="swiperChange"
>实时修改 swiper 的 index ：
swiperChange (e) {
this.curDot = e.detail.current
}这样就可以实现鼠标滚轮控制 swiper 翻页了，大家可以根据自己的需求做进一步的优化。
未经允许不得转载：w3h5 » Vue&uni-app swiper 轮播支持鼠标滚轮翻页实现
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读