今天第一次使用better-scroll，折腾了两个小时，滚动效果始终不行。
先上官网地址：https://github.com/ustbhuangyi/better-scroll

一，滚动失效原因

1，先确认安装了better-scroll，并且成功引入：

确认安装：

引入：值得注意的是官网中这个“BScroll”前两个字母是大写的，后续要统一，很多文章中的代码只有B是大写。

import BScroll from '@better-scroll/core'

2，保证滚动的html结构正确

官网的结构是：

也就是说better-scroll它只给第一个标签（就是class="content"那个ul）添加滚动效果，所以滚动的内容统统都要放置在这里面

3，保证wrapper的高度小于content的高度

这里要说明它滚动的原理，就需要悄咪咪地盗用一下这张图:

绿色部分为 wrapper，也就是父容器，它会有固定的高度。黄色部分为 content，它是父容器的第一个子元素，它的高度会随着内容的大小而撑高。那么，当 content 的高度不超过父容器的高度，是不能滚动的，而它一旦超过了父容器的高度，我们就可以滚动内容区了，这就是 better-scroll 的滚动原理。
审查元素看高度也好，打印scroll对象查看高度信息也可以：

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

1256>600，这个条件是满足的

4，wrapper需要设置一些特定的样式

position: absolute;
left: 0;
top: 0;
overflow: hidden;

最主要的就是overflow hidden!

5,可以查看content的样式，这个插件的样式毕竟是添加在它身上的。

我的没出现！！心好痛，然后我鼠标滚轮怎么滚都不行。这是一个悲伤的故事！！待会说~~

6，滚动失效还有一种原因，就是添加滚动样式的时机不对

正确的时机应该是等页面的元素都渲染完毕之后。
所以需要放置在vue的生命周期函数之中。

但是有些时候还不行，那就把它整成异步，放在setTimeout里面。

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

当然，整成异步，vue提供了一个方法：Vue.$nextTick()

<script>import BScroll from '@better-scroll/core'export default{mounted() {this.$nextTick(() => {this.scroll = new BScroll(this.$refs.wrapper, {})})}}
</script>

在排查了近两个小时之后，我快绝望了。为啥我还是滚动不了。正当我痛哭流涕以头抢地之时，不再使用滚轮滚动，而是长按鼠标滑动时！居然居然！居然阔以惹！！！
原来我写的都是对的！！
只是better-scroll插件使用之后，默认移动端是鼠标按住不放才能滑动！而不是用鼠标滚轮滚动！！
这特么！！！？？？？
然后content的样式也是在滑动之后才出现：

我没有哭！！！！

二，页面刷新之后，滚动又失效。修改代码保存时的自动刷新却有效

这个明显是因为创建better的时机不对。创建better的时机一定要在异步请求都完成以后,页面渲染完毕了，才进行对better-scroll的初始化.如果不这样做的话,better-scroll无法正确取到content的高度.从而无法实现滚动.
那何时才是页面渲染完毕呢？
我用的vue结合vuex,刚开始我在vue的生命周期函数mounted里面定义了创建better-scroll的命令。就发生了标题的问题，一刷新浏览器就失效。
所以我就想，会不会是mounted说的渲染结束，是不是仅仅是本页面的数据渲染完毕，而vuex中传过来的数据还没有被渲染，导致的content高度不足导致的失效。
于是我写了这段代码：

然后刷新页面：

这下问题就明了，在mounted的函数中，content的高度下明显会失效。接下来，只要把创建better-scroll放在updated中就行了

better-scroll使用的坑与心得相关推荐

微信小程序 -- 原生JS集成腾讯IM实时聊天/实时音视频(踩坑及心得)
原生JS集成腾讯IM实时聊天/实时音视频对话功能一.腾讯IM集成前期准备实例创建及初始化 IM登录收发消息二.腾讯音视频实时互动跑通demo 三.同时集成即时通讯IM 和音视频直播的坑 ...
蓝牙BLE 的几个坑与心得！
第一次写CSDN博客,多多关照公司APP的业务是做蓝牙mesh组网的,具体协议我就不提了,具体通讯方式是Gatt连接和非连接,非连接是通过扫描与广播进行通讯的. 分享一下几个坑与心得: 1.BLE广 ...
【云计算】从Serverless说起，谈谈边缘计算的未来；从物理机到Kubernetes的那些坑与心得
作者介绍黄文俊,腾讯云高级产品经理.曾经理过企业级存储.企业级容器平台等产品的架构与开发,对容器.微服务.无服务器.DevOps等都有浓厚兴趣. 本文整理自1月20日DBAplus社群&腾讯 ...
【航天信息开票软件V3.0金税盘版安装恢复过程】有坑有心得
@[TOC]航天信息开票软件V3.0金税盘版安装恢复过程 2023年5月11日昨天下午我司财务打开"开票软件V3.0"提示更新,但是更新过程中出现错误.再启动开票软件V3.0 ...
跳坑有心得，Happy research! Win10 + GTX 2080Ti + tensorflow-gpu-1.14.0 安装； timestamp=2019-10-3
如果从GTX1080Ti平台正要升级到GTX2080Ti,看过来,你会少走很多弯路. 背景从2018年末到现在,大半年时间里,我曾在win10平台上成功配置成功过Caffe, Pytorch, Te ...
Android 开发总结分享（一）挖坑与填坑
做了快一年的Android开发,近期想总结一下这一年工作感受,分享一点我工作中遇到的BUG,然后分析并解决问题的思路吧,我尽量把过程写得详细些,这个系列共三篇文章.如有写的不对的地方,欢迎各位开发者指 ...
纯干货！live2d动画制作简述以及踩坑
本文来自网易云社区,转载务必请注明出处. 1. 概述 live2d是由日本Cybernoids公司开发,通过扭曲像素位置营造伪3d空间感的二维动画软件.官网下载安装包直接安装可以得到两种软件,分别是C ...
我参加 NVIDIA Sky Hackathon--- 浅谈数据集处理的心得和教训
目录赛事题目:挑战智能语音垃圾分类任务 ASR 语音数据集音频采样语音数据集制作流程踩坑 & 建议: CV 图像数据集图像搜集图像数据集制作踩坑 & 建议心得体会建立 ...
【Python】Flask框架系列（四）：Flask-Migrate数据库迁移
参考:flask数据库迁移理解及命令 Flask-Migrate 使用数据库迁移,可以直接建表,而不用我们自己写sql语句用来建表.就是将关系型数据库的一张张表转化成了Python的一个个类. 在开发 ...
ueditor html中使用方法,vue集成百度UEditor富文本编辑器使用教程
在前端开发的项目中,难免会遇到需要在页面上集成一个富文本编辑器.那么,如果你有这个需求,希望可以帮助到你. vue是前端开发者所追捧的框架,简单易上手,但是基于vue的富文本编辑器大多数太过于精简.于 ...

better-scroll使用的坑与心得