better-iscroll为iscroll的改良版,在性能以及视觉效果上略优异。


问题描述:在原生情况下引用时 滚动效果消失。


查阅的资料:问题可能为以下四点

一、DOM层级关系

<div class="wrapper">

  <div class="content">

    content...

  </div>

</div>

wrapper里面不能存在多个同级div,如果你这样写:


<div class="classifyTitle"  ref="wrapper">

    <div class="">

       ss

    </div>

    <ul>

       <li v-for="(item,index) in classifyData.products">

           <router-link :to="{name:'详情'}">{{item.title}}</router-link>

       </li>

    </ul>

</div>

那么ul中的元素将不能滚动



二、content是否被成功添加滚动相关style

以此dom结构为例:


<div class="classifyTitle"  ref="wrapper">

       <ul>

           <li v-for="(item,index) in classifyData.products">

               <router-link :to="{name:'详情'}">{{item.title}}</router-link>

           </li>

       </ul>                                

</div>

审查元素可以看到:




这样即添加成功的


三、wrapper 与 content 高度问题

只有content的高度大于wrapper高度时候,才可以滚动。


如何看?


this.$nextTick(() => {

    if (!this.scroll) {

       this.scroll = new BScroll(this.$refs.wrapper, {})

       console.log(this.scroll)

    }

 })

F12就可以看到打印结果:




以上就是可以滚动的情况,wrapperHeight(616) < scrollHeight(750),hasVerticalScroll为true;


那如果这些数据不对,检查是否dom没有更新完就初始化BScroll了,要等dom更新完才能初始化


四、wrapper样式

.wrapper元素上要给定位


position: absolute;

left: 0;

top: 0;

overflow: hidden;


------------------------------------------------------------------------------------------------------------------------------------------------

作者:qiqi_77_

来源:CSDN

原文:https://blog.csdn.net/qiqi_77_/article/details/79361413





改进过程:


首先 DOM节点集合外包一层DIV保证无同级元素


        <div class="tab_bloc_choose_line2 tab_bloc_choose_line">

            <div>   <!--此处为添加的盒子容器-->

                <div class="tab_bloc_choose_line2_block">不限</div>

                <div class="tab_bloc_choose_line2_block">拱墅</div>

                <div class="tab_bloc_choose_line2_block">江干</div>

                <div class="tab_bloc_choose_line2_block">上城</div>

                <div class="tab_bloc_choose_line2_block">西湖</div>

                <div class="tab_bloc_choose_line2_block">下城</div>

                <div class="tab_bloc_choose_line2_block">滨江</div>

                <div class="tab_bloc_choose_line2_block">余杭</div>

                <div class="tab_bloc_choose_line2_block">萧山</div>

                <div class="tab_bloc_choose_line2_block">富阳</div>

                <div class="tab_bloc_choose_line2_block">外围</div>

            </div>

        </div>



其次 父元素属性重设:


.tab_bloc_choose_line2{

       position: relative;

       left: 0;

       top: 0;

       overflow: hidden;

}


最终附上JS代码

<script type="text/javascript" src="js/bscroll.min.js"></script>


初始化盒子

    // 弹性滚动盒子初始化

    const wrapper = document.querySelector('.bscroll_box');

    console.log(wrapper)

    const scroll = new BScroll(wrapper,{

            preventDefault: true,

            preventDefault: false

    })

    // 弹性滚动盒子初始化



了解该插件的实现方式:

通过transform形变定位修改位置,配合贝塞尔曲线弹性动画完成效果。

Created with the Personal Edition of HelpNDoc: Full-featured Help generator