better-scroll 和 viewer.js插件一起使用遇到的坑

最近我在重构了一个页面，这页面主要是显示图片和上拉加载功能，我选用了viewer.js和better-scroll插件来完成这两个功能，用的时候真的到处碰壁。

• 首先先说第一个，下图是我初始化并且实现上拉加载的代码

   按逻辑这个代码是可以运行的，但是一直我的wrapper类都第一个子元素没有那几条style的样式。然后我换了旧版本1.15.2就可以了，这很迷我没具体看源代码。
 

• 第二个：不能上下滑动问题： 只要在父元素wrapper类加上overflow:hidden就可。我本以为是父元素滑动的，原来是子元素利用那几条css命令滑动的。
   
• 第三个：better-scroll和viewer一起用不能点击问题：在初始化scroll时候，加上click：true就可，因为scroll这插件禁用了原生的点击事件。
   
• 第四个：z-index问题
     
  想在这位置加一个删除按钮，但是怎样设施z-index也不能让它显示在最上层。我通过查看开发者功能，得知这玩意是在body的子元素，所以我怎样设置z-index都不行。
  解决办法：

一开始我是不知道bug4有这container设置的，我自己去修改了源码，让删除这功能至顶层。

1.  首先在模板添加删除这按钮：

2.  样式添加到这里

3.  初始化这个按钮

然后在viewer.js文件搜一下button，哪里有button就在下面添加多一行想同类型的代码：例如

4.  最后暴露api，执行这个删除的操作

 

• 这次重构这页面发现不足的地方
  1：写了太多命令式的代码，没有在合适的地方使用计算属性
  2：写了太多for循环
  3：一开始没有想清楚整体的流程，导致在使用vue-scroller这插件时候遇到了很多bug改换BS插件