vue中利用iscroll.js解决pc端滚动问题


Posted in Javascript onFebruary 15, 2020

项目中经常遇到区域超出部分会出现滚动条,滚动条在pc端可以通过鼠标滚轮控制上下,在移动端可以通过鼠标拖动页面进行滚动,这两种场景都是符合用户习惯,然而这种滚动条一般都是竖【vertical】项滚动条,如果pc端出现横向滚动条【horizontal】,在不做处理的情况下,你只能用鼠标拖动横向滚动条按钮【scrollerbar】展示滚动区域,而且为了美观,一般滚动条会进行样式编写或者隐藏,那么横向区域默认情况下就没法滚动。

二、描述

现为了解决pc端滚动区域能像移动端一样,能够通过鼠标拖动滚动区域直接进行滚动,如图所示

vue中利用iscroll.js解决pc端滚动问题

pc端滚动示例图

滚动实例用到知识点如下:

  1. 采用vue-cli3+iscroll.js组合的方式;
  2. 使用 vue 自定义指令实现 iscroll 实例化和参数配置;
  3. 实现横向滚动区域和竖向滚动区域之间的联动;
  4. 实现横向滚动条居中显示和使用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
 <!--vue组件中绑定的两个参数 option、instance-->
 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 组件部分代码如下:

<template>
 <div class="tab-container">
 <div
  class="scroll-container"
  v-iscroll="{
  option: iscrollConf,
  instance: getIscroll
  }"
  ref="scrollContainer"
 >
  <ul
  class="tab-li-container"
  ref="tabLiContainer"
  >
  <li
   class="tab-li-item"
   v-for="(item, index) in list"
   :key="item.id"
   :id="item.id"
   ref="tabItem"
   @click="tabEvent(item, index)"
  >
   <div
   class="item"
   :class="{
    'item-active': currentId == item.id
   }"
   >{{item.num}}</div>
  </li>
  </ul>
 </div>
 <div
  class="tab-left"
  @click="tabBtnEvent('left')"
 ><</div>
 <div
  class="tab-right"
  @click="tabBtnEvent('right')"
 >></div>
 </div>
</template>
<script>
export default {
 props: ['list'],
 data () {
 return {
  iscrollConf: {
  bounce: true,
  mouseWheel: true,
  click: true,
  scrollX: true,
  scrollY: false
  },
  currentId: null,
  currentIndex: 0,
  myScroll: null
 }
 },
 mounted () {
 this.$refs.tabLiContainer.style.width = this.$refs.tabItem[0].offsetWidth * this.list.length + 'px'
 this.$nextTick(() => {
  this.myScroll.refresh()
 })
 },
 methods: {
 tabEvent (item, currentIndex) {
  <!--点击某个li 按钮事件处理逻辑-->
 },
 tabBtnEvent (direction) {
  <!--左右切换逻辑事件-->
 },
 getIscroll (iscroll) {
  this.myScroll = iscroll
 }
 },
 watch: {
 list: {
  handler (l) {
  this.currentId = l[0].id
  },
  immediate: true,
  deep: true
 }
 }
}
</script>
<style scoped>
// 样式
</style>

上述代码中 v-iscroll 指令传入两个字段参数:

option:配置iscroll参数,这里面注意scrollX,scrollY两个属性,代表的是横向还是竖向滚动;
instance:回调方法的调用, vIscroll.js 中执行回调方法,通过该组件方法 getIscroll() 获取到 iscroll 的实例。

3、上下滚动区域联动

上面的代码可以解决开篇场景中的问题,现在实现上下区域联动,通过点击横向滚动条某个按钮,使其变成选中状态,然后竖向滚动条对应的项跳到首位,如图所以:

vue中利用iscroll.js解决pc端滚动问题

联动示例图

3-1、联动实现方法

点击按钮的方法:

tabEvent (item, currentIndex) {
 this.currentId = item.id
 this.currentIndex = currentIndex
 <!--这里实现按钮始终居中显示,暂时省略,下面补充-->
 ...
 <!--传给竖向滚动组件-->
 this.$emit("switchTab", this.currentId, this.currentIndex)
},

竖向滚动区域组件【App.vue】代码部分如下,并对 switchTab() 方法进行详细注释:

<template>
 <div id="app">
 <TabList
  :list="list"
  @switchTab="switchTab"
 ></TabList>
 <!-- v-iscroll="defalutOption" -->
 <div
  v-iscroll="{
  option: defalutOption,
  instance: getIscroll
  }"
  class="tab-content-container"
  ref="detailItemContainer"
 >
  <ul class="tab-list-container">
  <li
   v-for="item in list"
   :key="item.id"
   class="list-item"
   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'
})

这里在横向滚动区域添加了一对左右按钮,实现切换功能,如图所示:

vue中利用iscroll.js解决pc端滚动问题

切换按钮示例图

切换按钮事件方法就是通过改变上一个、下一个按钮下标,调用方法,实现切换功能,切换事件方法逻辑如下:

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)
},

下面对 单击按钮事件 添加居中逻辑,详细代码和解析图如下,可以对比查看:

vue中利用iscroll.js解决pc端滚动问题

居中计算图

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端滚动问题,希望对大家有所帮助!

Javascript 相关文章推荐
javascript下判断一个元素是否存在的代码
Mar 05 Javascript
JS获取html对象的几种方式介绍
Dec 05 Javascript
jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
May 08 Javascript
js实现滑动触屏事件监听的方法
May 05 Javascript
javascript实现起伏的水波背景效果
May 16 Javascript
基于Marquee.js插件实现的跑马灯效果示例
Jan 25 Javascript
Angular实现图片裁剪工具ngImgCrop实践
Aug 17 Javascript
import与export在node.js中的使用详解
Sep 28 Javascript
Vue cli构建及项目打包以及出现的问题解决
Aug 27 Javascript
详解iview的checkbox多选框全选时校验问题
Jun 10 Javascript
Vue数字输入框组件使用方法详解
Feb 10 Javascript
vue使用swiper实现左右滑动切换图片
Oct 16 Javascript
JS localStorage存储对象,sessionStorage存储数组对象操作示例
Feb 15 #Javascript
ES6 proxy和reflect的使用方法与应用实例分析
Feb 15 #Javascript
js表达式与运算符简单操作示例
Feb 15 #Javascript
ES6 class类链式继承,实例化及react super(props)原理详解
Feb 15 #Javascript
ES6 Iterator遍历器原理,应用场景及相关常用知识拓展详解
Feb 15 #Javascript
es6 super关键字的理解与应用实例分析
Feb 15 #Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
Feb 15 #Javascript
You might like
PHP+Mysql+Ajax+JS实现省市区三级联动
2014/05/23 PHP
浅谈PDO的rowCount函数
2015/06/18 PHP
阿里云PHP SMS短信服务验证码发送方法
2017/07/11 PHP
ExtJS中文乱码之GBK格式编码解决方案及代码
2013/01/20 Javascript
加载远程图片时,经常因为缓存而得不到更新的解决方法(分享)
2013/06/26 Javascript
javascript中bind函数的作用实例介绍
2014/09/28 Javascript
jQuery简单实现网页选项卡特效
2014/11/24 Javascript
JavaScript实现函数返回多个值的方法
2015/06/09 Javascript
全面了解javascript三元运算符
2016/06/27 Javascript
Jq通过td获取同行其它列td的方法
2016/10/05 Javascript
利用node.js实现自动生成前端项目组件的方法详解
2017/07/12 Javascript
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
2018/01/09 Javascript
基于vue-cli vue-router搭建底部导航栏移动前端项目
2018/02/28 Javascript
Node 升级到最新稳定版的方法分享
2018/05/17 Javascript
vue-cli3 项目从搭建优化到docker部署的方法
2019/01/28 Javascript
通过npm或yarn自动生成vue组件的方法示例
2019/02/12 Javascript
Node使用Nodemailer发送邮件的方法实现
2020/02/24 Javascript
利用 JavaScript 实现并发控制的示例代码
2020/12/31 Javascript
[00:12]DAC2018 no[o]ne亮相SOLO赛 他是否如他的id一样无人可挡?
2018/04/06 DOTA
Python3中的真除和Floor除法用法分析
2016/03/16 Python
详解django中自定义标签和过滤器
2017/07/03 Python
Python3 Tensorlfow:增加或者减小矩阵维度的实现
2020/05/22 Python
Python如何在bool函数中取值
2020/09/21 Python
浅析python函数式编程
2020/09/26 Python
魔幻般冒泡背景的CSS3按钮动画
2016/02/27 HTML / CSS
Joie官方网上商店:购买服装和女装配饰
2018/06/05 全球购物
Stutterheim瑞典:瑞典高级外套时装品牌
2019/06/24 全球购物
分公司经理岗位职责
2013/11/11 职场文书
师范大学应届生求职信
2013/11/21 职场文书
师范教师毕业鉴定
2014/01/13 职场文书
信息技术专业大学生职业生涯规划书
2014/01/24 职场文书
物业保安员岗位职责制度
2014/01/30 职场文书
个人简历自我评价
2014/02/02 职场文书
预防艾滋病宣传活动总结
2015/05/09 职场文书
2016年教代会开幕词
2016/03/04 职场文书
python标准库ElementTree处理xml
2022/05/20 Python