总结一些最近用vue开发的项目中遇到的一些问题及解决方法
1、可以横向滚动的tab切换
图1（效果图）
图2（代码）
1️⃣用一个固定宽度的div，嵌套ul，ul不用给定宽度。给div设置overflow-x: scroll; overflow-y: hidden;
2️⃣在ios上滑动流畅的话，设置 -webkit-overflow-scrolling : touch;
实现横向滚动比较简单，如果能隐藏横向的滚动条的话，看起来会好一点
3️⃣css设置：::-webkit-scrollbar { width: 0 !important } 这个只能隐藏掉手机上那个比较宽的滚动条，滑动的时候，还会有一个比较细的滚动条
解决这种问题，就需要我们在最外层的div上给定一个padding值，让它把那个滚动条挤到下面，这样视觉上看就是把滚动条隐藏了。
4️⃣在实现横向滚动的过程中，溢出最外层div的那些li标签会默认的换行展示
css设置： white-space: nowrap;（规定段落中的文本不进行换行）
5️⃣点击tab栏的时候，实现每点击一次，ul列表向左移动，以保证当前的tab栏在外层div内
实现思路：绑定要滑动元素的ref属性(ul)，打印this.$refs，可以看到这些属性
图3
可以得到scrollLeft,和scrollWidth，这样就可以通过计算
图4
因为栗子中的外层div中包含了三个li标签，所以我让第二个以后的li标签，每当点击的时候，向左移动一个li标签，可以让之后的每一个li标签都在做外层的div的中间（不一定是正中间）
2、css的粘性布局
当在页面滑动的时候，tan栏滑动到顶端，要实现固定的效果
可以用到css中的粘性布局：
position: -webkit-sticky;position: sticky; top: 0.87rem;（top属性表示当元素距离顶部为0.9rem的时候固定）
3、safari浏览器自带返回按钮，scroll事件失效
图5
在出现滚动条的页面中，点击进入下一个页面，通过safari自带的返回按钮回到这个页面的时候，会出现白屏，然后手指滑动一下，即可正常浏览。
用 window.scrollTo(0,0) 可以解决，在页面初始化的时候，调用一下scroll方法，传两个参数，一个是pageX，一个是pageY
4、滑动到下个页面，位置是上个页面的位置
图6
解决方法，vue中有一个滚动行为-->异步滚动
图7
网友评论