扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
小编给大家分享一下vue中怎么利用iscroll.js解决pc端滚动问题，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
创新互联长期为近千家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为昌乐企业提供专业的成都网站建设、网站制作，昌乐网站改版等技术服务。拥有10多年丰富建站经验和众多成功案例,为您定制开发。
Vue是一套用于构建用户界面的渐进式JavaScript框架，Vue与其它大型框架的区别是，使用Vue可以自底向上逐层应用，其核心库只关注视图层，方便与第三方库和项目整合，且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。
项目中经常遇到区域超出部分会出现滚动条，滚动条在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 组件部分代码如下：