项目中经常遇到区域超出部分会出现滚动条,滚动条在pc端可以通过鼠标滚轮控制上下,在移动端可以通过鼠标拖动页面进行滚动,这两种场景都是符合用户习惯,然而这种滚动条一般都是竖【vertical】项滚动条,如果pc端出现横向滚动条【horizontal】,在不做处理的情况下,你只能用鼠标拖动横向滚动条按钮【scrollerbar】展示滚动区域,而且为了美观,一般滚动条会进行样式编写或者隐藏,那么横向区域默认情况下就没法滚动。
二、描述
现为了解决pc端滚动区域能像移动端一样,能够通过鼠标拖动滚动区域直接进行滚动,如图所示
pc端滚动示例图
滚动实例用到知识点如下:
- 采用vue-cli3+iscroll.js组合的方式;
- 使用 vue 自定义指令实现 iscroll 实例化和参数配置;
- 实现横向滚动区域和竖向滚动区域之间的联动;
- 实现横向滚动条居中显示和使用scrollIntoView()方法的差别
三、自定义指令 v-iscroll
1、新建指令文件
这里使用 vue 自定义指令初始化 iscroll 实例,在 vue-cli3 项目目录下新建vIscroll.js,文件代码如下:
const IScroll = require('iscroll') const VIScroll = { install: function (Vue, options) { Vue.directive('iscroll', { inserted: function (el, binding, vnode) { let callBack let iscrollOptions = options const option = binding.value && binding.value.option const func = binding.value && binding.value.instance // 判断输入参数 const optionType = option ? [].toString.call(option) : undefined const funcType = func ? [].toString.call(func) : undefined // 兼容 google 浏览器拖动 el.addEventListener('touchmove', function (e) { e.preventDefault() }) // 将参数配置到new IScroll(el, iscrollOptions)中 if (optionType === '[object Object]') { iscrollOptions = option } if (funcType === '[object Function]') { callBack = func } // 使用vnode绑定iscroll是为了让iscroll对象能够夸状态传递,避免iscroll重复建立 // 这里面跟官方网站 const myScroll = new IScroll('#wrapper',option) 初始化一样 vnode.scroll = new IScroll(el, iscrollOptions) // 如果指令传递函数进来,把iscroll实例传递出去 if (callBack) callBack(vnode.scroll) }, componentUpdated: function (el, binding, vnode, oldVnode) { // 将scroll绑定到新的vnode上,避免多次绑定 vnode.scroll = oldVnode.scroll // 使用 settimeout 让refresh跳到事件流结尾,保证refresh时数据已经更新完毕 setTimeout(() => { vnode.scroll.refresh() }, 0) }, unbind: function (el, binding, vnode, oldVnode) { // 解除绑定时要把iscroll销毁 vnode.scroll = oldVnode.scroll vnode.scroll.destroy() vnode.scroll = null } }) } } module.exports = VIScroll
这里附上 iscroll.js 5 官方文档地址, iscroll npm 包地址,相关属性和方法自行查看。
2、加载引用指令
首先在 main.js 中加载指令:
import Vue from 'vue' import App from './App.vue' import "./assets/reset.css" // 加载scroll指令 import VIscroll from './directive/vIscroll' Vue.use(VIscroll) Vue.config.productionTip = false new Vue({ render: h => h(App), }).$mount('#app')
使用指令,摘自 tabList.vue 组件部分代码如下:
{{item.num}}<>
上述代码中 v-iscroll 指令传入两个字段参数:
option:配置iscroll参数,这里面注意scrollX,scrollY两个属性,代表的是横向还是竖向滚动;
instance:回调方法的调用, vIscroll.js 中执行回调方法,通过该组件方法 getIscroll() 获取到 iscroll 的实例。
3、上下滚动区域联动
上面的代码可以解决开篇场景中的问题,现在实现上下区域联动,通过点击横向滚动条某个按钮,使其变成选中状态,然后竖向滚动条对应的项跳到首位,如图所以:
联动示例图
3-1、联动实现方法
点击按钮的方法:
tabEvent (item, currentIndex) { this.currentId = item.id this.currentIndex = currentIndex ... this.$emit("switchTab", this.currentId, this.currentIndex) },
竖向滚动区域组件【App.vue】代码部分如下,并对 switchTab() 方法进行详细注释:
{{item.value}}
这里面用到的都是 iscroll 插件自带的属性和方法进行滚动边界的判断和滚动,比用 JavaScript 方法方便的多,而且用了iscroll作为滚动容器,已经在vIscroll.js禁用了相关浏览器默认事件。
3-2、居中显示
这里 JavaScript 有个 scrollIntoView() 方法, 官方文档链接 ,这个方法让当前的元素滚动到浏览器窗口的可视区域内。关键缺点是,如果横向滚动和竖向滚动都同时用到这个方法,只能保证一个滚动区域有效,另一个会不滚动。
使用 scrollIntoView() 方法配置如下:
this.$refs.tabItem[this.currentIndex].scrollIntoView({ behavior: "smooth", inline: "center", block: 'nearest' })
这里在横向滚动区域添加了一对左右按钮,实现切换功能,如图所示:
切换按钮示例图
切换按钮事件方法就是通过改变上一个、下一个按钮下标,调用方法,实现切换功能,切换事件方法逻辑如下:
tabBtnEvent (direction) { const max = this.$refs.tabItem.length if (direction === 'left' && this.currentIndex > 0) { this.currentIndex-- } if (direction === 'right' && this.currentIndex < max - 1) { this.currentIndex++ } this.tabEvent(this.$refs.tabItem[this.currentIndex], this.currentIndex) },
下面对 单击按钮事件 添加居中逻辑,详细代码和解析图如下,可以对比查看:
居中计算图
tabEvent (item, currentIndex) { this.currentId = item.id this.currentIndex = currentIndex // 获取滚动容器的长度的一半,即中间点 const scrollContainerHalfWidth = this.$refs.scrollContainer.offsetWidth / 2 // 获取单个item的一半长度 const tabItemHalfWidth = this.$refs.tabItem[currentIndex].offsetWidth / 2 // 求取插值,就是开始到中间开始位置的距离 const halfDistance = scrollContainerHalfWidth - tabItemHalfWidth // 求取当前item的相对总长度的偏移量 const currentItemOffsetLeft = this.$refs.tabItem[currentIndex].offsetLeft // scroll 移动到中间的值 const x = halfDistance - currentItemOffsetLeft this.myScroll.scrollTo(x, 0) this.$emit("switchTab", this.currentId, this.currentIndex) },
4、总结
1、整个实例用的都是iscroll插件相关属性实现的滚动,避免同时使用JavaScript方法造成的代码混乱;
2、利用自定义指令的方式有效的避免了传统实例化iscroll带来的代码冗余,使其方便简洁;
3、本实例滚动选项都是字符串,如果出现图片的情况,合理使用iscroll.refresh() 方法,在正确的时期重新计算滚动区域,避免滚动边界受限;
总结
以上所述是小编给大家介绍的vue中利用iscroll.js解决pc端滚动问题,希望对大家有所帮助!