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() 方法进行详细注释：
<template> <div> <TabList :list="list" @switchTab="switchTab" ></TabList> <!-- v-iscroll="defalutOption" --> <div v-iscroll="{ option: defalutOption, instance: getIscroll }" ref="detailItemContainer" > <ul> <li v-for="item in list" :key="item.id" ref="detailItem" > <div>{{item.value}}</div> </li> </ul> </div> </div> </template> <script> import TabList from './components/tabList.vue' export default { name: 'App', components: { TabList, }, data () { return { list: [ { id: 1, value: '这是第1题', num: 1 }, <!--...省略数据展示--> { id: 16, value: '这是第16题', num: 16 } ], defalutOption: { bounce: true, mouseWheel: true, click: true, scrollX: false, scrollY: true }, myScroll: null } }, methods: { switchTab (currentId, currentIndex) { <!--对选中的当前项，这里就是“3”按钮对应的“这是第3题”，求出它距离父元素的上边距offsetTop值--> const offsetTop = this.$refs.detailItem[currentIndex].offsetTop <!--滚动的范围不能超过这个滚动体的底部，这里面用到iscroll的属性maxScrollY--> const y = offsetTop >= Math.abs(this.myScroll.maxScrollY) ? this.myScroll.maxScrollY : -offsetTop <!--调用iscroll的方法进行滚动到相应的位置--> this.myScroll.scrollTo(0, y) }, <!--获取实例--> getIscroll (iscroll) { this.myScroll = iscroll } } } </script> <style scoped> <!--样式--> ... </style>
这里面用到的都是 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端滚动问题，希望对大家有所帮助！
您可能感兴趣的文章: