有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

vue 自动滚动(vue使用better-scroll)

vue 炮渣日记 2周前 (11-19) 13次浏览 已收录 0个评论 扫描二维码

在vue中使用这个插件能给App带来流畅性,提高了用户体验。

vue 自动滚动(vue使用better-scroll)

一、安装

这个步骤非常重要,之前是通过npm install better-scroll –save 来安装,这样安装的是最新版本。但是,实战过程中发现了一个非常严重的bug,多次通过路由切换组件页面滚动会无效,困扰了我很久很久。
于是,百度一下,发现根本没有出现类似情况。
然后,猜测是版本问题而导致的,最后在package.json里手动安装0.1.15版本,解决了这个问题。

//package.json
"dependencies": {
  "better-scroll": "0.1.15"
}
//终端
npm install

二、html结构

div.wrapper > div.content > ul > li

在这里,分成4层结构。最外层一定要设置宽度以及定位,外层高度要100%,只能滚动第一个li,因此我们把元素全放到li标签里即可。子元素可以有多个同级,但是子元素高度一定要大于父元素,这个是产生滚动的必要条件。

.wrapper{
  width: 100%;
  position: absolute;
  top: 45px;
  bottom: 50px;  /*关键*/
  overflow: hidden;
  z-index: 1;
}

三、初始化

首先要引入组件,需要dom结构加载完成时才执行初始化($nextTick)。因此,需要用上钩子函数created()或者mounted()。

<div class="wrapper" ref="wrapper">
  <div class="content">
    <ul>
      <li></li>
    </ul>
  </div>
</div>
import BScroll from 'better-scroll'
mounted() {
      this.$nextTick(() => {
        //$refs绑定元素
        if(!this.scroll){
            this.scroll = new BScroll(this.$refs.wrapper, {
            //开启点击事件 默认为false
            click:true
        })
        // console.log(this.scroll)
        }else if(!this.$refs.wrapper){
            return
        }
        else{
            this.scroll.refresh()
        }
      })
  }

四、优点

1.体验像原生:滚动非常流畅,而且没有滚动条。
2.记录当前路由滚动位置:在vue中通过路由切换页面时组件会自动滚动到顶部,需要监听滚动行为才能让滚动位置固定,better-scroll解决了这个问题。

vue 自动滚动(vue使用better-scroll)
喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址