小編給大家分享一下vue中怎么利用iscroll.js解決pc端滾動(dòng)問題，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應(yīng)用，其核心庫只關(guān)注視圖層，方便與第三方庫和項(xiàng)目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)復(fù)雜的單頁應(yīng)用。
項(xiàng)目中經(jīng)常遇到區(qū)域超出部分會(huì)出現(xiàn)滾動(dòng)條，滾動(dòng)條在pc端可以通過鼠標(biāo)滾輪控制上下，在移動(dòng)端可以通過鼠標(biāo)拖動(dòng)頁面進(jìn)行滾動(dòng)，這兩種場景都是符合用戶習(xí)慣，然而這種滾動(dòng)條一般都是豎【vertical】項(xiàng)滾動(dòng)條，如果pc端出現(xiàn)橫向滾動(dòng)條【horizontal】，在不做處理的情況下，你只能用鼠標(biāo)拖動(dòng)橫向滾動(dòng)條按鈕【scrollerbar】展示滾動(dòng)區(qū)域，而且為了美觀，一般滾動(dòng)條會(huì)進(jìn)行樣式編寫或者隱藏，那么橫向區(qū)域默認(rèn)情況下就沒法滾動(dòng)。
二、描述
現(xiàn)為了解決pc端滾動(dòng)區(qū)域能像移動(dòng)端一樣，能夠通過鼠標(biāo)拖動(dòng)滾動(dòng)區(qū)域直接進(jìn)行滾動(dòng)，如圖所示
pc端滾動(dòng)示例圖
滾動(dòng)實(shí)例用到知識(shí)點(diǎn)如下：
采用vue-cli3+iscroll.js組合的方式；
使用 vue 自定義指令實(shí)現(xiàn) iscroll 實(shí)例化和參數(shù)配置；
實(shí)現(xiàn)橫向滾動(dòng)區(qū)域和豎向滾動(dòng)區(qū)域之間的聯(lián)動(dòng)；
實(shí)現(xiàn)橫向滾動(dòng)條居中顯示和使用scrollIntoView()方法的差別
三、自定義指令 v-iscroll
1、新建指令文件
這里使用 vue 自定義指令初始化 iscroll 實(shí)例，在 vue-cli3 項(xiàng)目目錄下新建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
// 判斷輸入?yún)?shù)
const optionType = option ? [].toString.call(option) : undefined
const funcType = func ? [].toString.call(func) : undefined
// 兼容 google 瀏覽器拖動(dòng)
el.addEventListener('touchmove', function (e) {
e.preventDefault()
})
// 將參數(shù)配置到new IScroll(el, iscrollOptions)中
if (optionType === '[object Object]') {
iscrollOptions = option
}
if (funcType === '[object Function]') {
callBack = func
}
// 使用vnode綁定iscroll是為了讓iscroll對(duì)象能夠夸狀態(tài)傳遞，避免iscroll重復(fù)建立
// 這里面跟官方網(wǎng)站 const myScroll = new IScroll('#wrapper'，option) 初始化一樣
vnode.scroll = new IScroll(el, iscrollOptions)
// 如果指令傳遞函數(shù)進(jìn)來，把iscroll實(shí)例傳遞出去
if (callBack) callBack(vnode.scroll)
},
componentUpdated: function (el, binding, vnode, oldVnode) {
// 將scroll綁定到新的vnode上，避免多次綁定
vnode.scroll = oldVnode.scroll
// 使用 settimeout 讓refresh跳到事件流結(jié)尾，保證refresh時(shí)數(shù)據(jù)已經(jīng)更新完畢
setTimeout(() => {
vnode.scroll.refresh()
}, 0)
},
unbind: function (el, binding, vnode, oldVnode) {
// 解除綁定時(shí)要把iscroll銷毀
vnode.scroll = oldVnode.scroll
vnode.scroll.destroy()
vnode.scroll = null
}
})
}
}
module.exports = VIScroll這里附上 iscroll.js 5 官方文檔地址， iscroll npm 包地址，相關(guān)屬性和方法自行查看。
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 組件部分代碼如下：
