请先关注 [低调大师] 公众号 优秀的自媒体个人博客,低调大师,许军

低调大师

您现在的位置是:首页>文章详情

文章详情

better-scroll不能滚动之 滚动监听-左右联动

2021-05-13 38热度

滚动监听

     better-scroll 无法滚动的分析,直接翻到最后,看问题汇总,希望能帮助你解决。

借用一下人家这个好看的项目图片,做一个解释。左边的内容会跟右边的内容一起关联,点击左边的菜单,右边会滚动到对应菜单的内容区域;滚动右边的内容,左边会滚动到对应的菜单项。 就是这个简单的左右关联的项目。方法提供了两个。

 

jq的方法:

定义两个方法:滚动的一个方法,和点击的方法。

滚动方法:

const _scrollMethod = function(){       document.addEventListener('scroll', function (e) {         e.preventDefault();         let sectionTitle = $('.icl-section-list-contents'); //获取到list 的内容 ,下面将对这个 列表做遍历         let screenHeight = $(window).height();         let scrollTop    = $(window).scrollTop();         let scrollHeight = $(document).height();         let sectionTitleHeight = $('.icl-section-list-contents').height();         sectionTitle.each(function() { // 遍历里面的内容,抓取里面的每个标题的位置,做下面的高度比较逻辑处理           let sectionTitleTop = $(this).offset().top - scrollTop;          if(scrollTop+sectionTitleHeight>screenHeight){            if(sectionTitleTop<(screenHeight/2)) {              var index = sectionTitle.index($(this));               $('.sectionList').find('.list-group-item').removeClass('active');               $('.sectionList').find('.list-group-item').eq(index).addClass(function (index, activeClass) {                 activeClass = 'active';                // console.log($(this))                 return activeClass;               });             }                         }         }) // 滚到最后的内容,如果当节list 标题无法滚动到屏幕中间的位置的时候,给左边最后一个菜单,追加class        if(scrollTop + screenHeight == scrollHeight){           $('.sectionList').find('.list-group-item').removeClass('active');           $('.sectionList').find('.list-group-item').last().addClass('active');         } // 给第一个追加class          if ($(window).scrollTop() < 10 ){           $('.sectionList').find('.list-group-item').removeClass('active');           $('.sectionList').find('.list-group-item').eq(0).addClass('active');         }       }, false);     }

点击菜单的方法:

const _scroll =function () {       $('.sectionList .list-group-item').click(function () {         let chapterListTile  = $('.list-group-item');         let _this = this;         let chapterIndex =  chapterListTile.index(_this);        var _thisScroll = $('.icl-section-list-contents').eq(chapterIndex); // jq 的animate 的动画方法,第一个参数滚动的距离,第二个参数 滚动时间 ,第三回掉函数         $('html').animate({scrollTop:_thisScroll.offset().top - '200'}, 1000, function () {           $('.sectionList').find('.list-group-item').removeClass('active');           $(_this).addClass('active');           let sectionId = $(_this).find('.icl-section-name').attr('id');            });       })     }

上面的代码针对具体的项目,左右分栏,css 忽略。上面的方法,在抓取对应的index的时候,判断遍历当前的list的标题的位置,在当前屏幕的中间位置以上,才抓取index。 改进方法: 采用区间方法,遍历数组后,获取高度累加,形成一个数组, listHeigt + = current.clinetHeight

 

在vue 项目的一个插件方法:

 引用一个插件 better-scroll 

安装

npm install better-scroll --save 

使用 (导入)

import BScroll from 'better-scroll'

这样项目中就有了一个 BScroll 的对象。接下来就要初始化这个 BScroll 对象。

代码如下:

mounted () { // 只有dom 在页面显示完全后,bs 才能抓到高度,如果在那种tab 标签的形式中,在display:none的情况下,无法抓取高度     this.$nextTick(() => {      this._initScroll();  // 将初始化的方法,封装在这个方法中,下面就是对应的方法      this.calculateHeight();     })   },

_initScroll () {

this.listScroll = new BScroll(this.$refs.newsListWrapper, {})

this.contentScroll = new BScroll(this.$refs.newsContentWrapper, {

probeType: 3, // 实时位置 暴露出来

});

this.contentScroll.on('scroll', (pos) => { // 这是bs 提供的一个滚动获取 y 值的方法,这个 y 值怎么算的

this.scrollY = Math.abs(Math.round(pos.y));

// console.log(this.scrollY,'scrolly的值')

});

},

 

在贴上计算高度的方法:

   calculateHeight () {      var contentWrapper = this.$refs.foodList;  // == $('.el')        let height = 0;      this.listHeight.push(height);      for(var i=0;i<contentWrapper.length;i++) {         let item = contentWrapper[i];         height += item.clientHeight; // 获得每个区间的高度         this.listHeight.push(height);        // console.log(this.listHeight,'listheight')      }     },

计算属性的一个方法:

computed: {     currentIndex () {      for (let i = 0; i < this.listHeight.length; i++) {         let height1 = this.listHeight[i];         let height2 = this.listHeight[i + 1];        if (!height2 || (this.scrollY >= height1 && this.scrollY < height2)) {          return i;         }       }      return 0;     },   },

点击菜单的一个方法:

selectMenu(index) {   let foodList = this.$refs.foodList;   let el = foodList[index];  this.contentScroll.scrollToElement(el, 500); // bs 提供的滚动方法},

 

这里左右联动的思想就是,抓取右边元素的高度位置,然后看当前的高度在哪个高度区间,就把这个 listHeight 的索引返回出来,用作 dom 上追加class的判断。

 

 

在vue 实例的 mounted 的方法中,初始化这个 bs 对象。

顺便解释一下这的 关于vue的两个知识点 mounted 和 $nextTick :

$nextTick : 官方api  下面说

也就是 在dom 渲染好后,再执行某个关于dom的 执行方法,比如,要取dom 上的某个数据,这里可以用 setTimeout 替换这个 $nextTick。

mounted : 官方api 下说

也就是 el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子,vue的 el 挂载到 dom 上后调用 这个方法

和created的方法不一样,created 是在 vue实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算, watch/event 事件回调, 但是挂载阶段还没开始,$el 属性目前不可见。

(更多关于 vue 的笔记陆续更新中)


better-scroll 的方法注意事项。

这个插件的作者说:

网上很多同学使用过后,会有发问求助说无法滚动,这时候,不要急先把 自己初始化的bs 打印出来看看。下面是我的:

垂直方向不能滚动的主要三个属性的 都不是正确的参数,说明,实例是初始化了,但是初始化后,相关的参数,它没有获取到,比如父级的高度和要滚动子集的高度。作者也强调了这个问题的关键,那么什么情况会导致这个 高度没有获取到呢? 

我遇到的一个坑:在使用tab 标签里初始化一个未被激活的tab 项,这个没有被激活的项 dispaly:none ,高度无法获取。但是在 vue实例 执行后,这个 bs  已经初始化了,只不过初始化后的bs ,无法获取相关的高度到而已。然后,我一开始就让这个使用bs的 tab激活,然后就有了相关的 参数

 

 

然后就可以滚动了,所以总结问题呢:

遇到不能滚动的情况以下分析:

1。是否初始化了父级元素,需要滚动的子元素是否是第一个

2。打印bs 对象,查看是否有bs对象,相关的参数(上面图中已经画出),是否正确

3。父子高度是否有,且子高度大于父高度 (使用小诀窍: 先不要初始化这个bs,先看父子高度是否正确,再初始化这个bs 对象,确保实例化之前,高度得有)

 

以上是我个人的一些见解,如有不妥,欢迎指出,一起交流。

 

收藏 (0)

相关文章

    文章评论

    共有0条评论来说两句吧...