兖州网站开发/网站推广是什么
这个问题是我在编辑商城的遇到的问题，着实让我查找了好多资料
问题描述：使用better-scroll插件的时候，页面无法滚动
问题发生原因：最开始使用的better-scroll时候，对于普通的文档滑动完全没问题，但是我对起封装了一层代码，
<template><div class="wrapper" ref='wrapper'><div class="content"><slot></slot></div></div>
</template><script>import BScroll from 'better-scroll'export default {data(){return {scroll:null}},methods:{scrollStar(){this.scroll = new BScroll(this.$refs.wrapper,{probeType:3,pullUpLoad:true});this.scroll.on('pullingUp',() => {console.log('加载更多');this.scroll.finishPullUp();})// console.log(this.scroll)}},mounted(){}}
</script>
把better-scroll作为滚动组件导出，然后在首页里面使用
但是却发现无法滑动？？出现了什么问题？明明在其他页面使用ul和li这样的长数据也没有问题？
问题分析：
1.我开始怀疑是否是因为scroll包裹了elementUI组件冲突导致的问题，但是这个这个很快就被我否定了，这个处理高度的，而且使用其他组件也无法滚动，应该不是框架冲突的问题。
2.我开始上网搜索了一下关于better-scroll组件无法滚动的原因：
大部分都是说由于你未按照better-scroll的规则来设计，必须外侧有个wrapper盒子里面有一个content的盒子包裹你的内容，很明显我不是这个原因，我全是按照官网的规则来设置的。那就很奇怪了，，，
3.在我多次刷新页面的时候发现，有时候页面可以滑动，但是滑动不完全，有时候页面又滑动不了，这就很离谱了，我又去搜了半天，看到一篇类似的问题：原来是因为数据请求过来的先后顺序导致better-scroll计算可滚动高度的错误。
4.于是我就设置了一个延时执行，果然很有用，延迟3秒以后执行代码better-scroll的代码，页面完全没有问题，滑动异常丝滑。
5.原因算是找到了：由于better-scroll执行的时候计算出来的content的高度和之后数据加载过来之后的高度不一致，导致你只能执行开始的高度。
问题解决：
因为是数据加载慢导致的问题，所以我们可以设置当数据加载完成之后再执行代码，vue里面监听数据加载的函数是watch
data(){return {dataArr:[],banner:[],recommend:[],goods:{pop:{page:0,list:[]},new:{page:0,list:[]},sell:{page:0,list:[]},},goods2:null,bool:false}},
一般的情况是直接监听，但是我这里把首页的商品数据放在一个数组里面而外面是对象，无法直接监听，所以需要通过一个东西来保存，最开始我打算用goods来保存，后来我找到一个方法
computed:{pop1() {return this.goods.pop.list}},
使用计算属性可以保存里面的值，然后在watch里面进行监听
watch:{ pop1() {console.log(11)this.$nextTick(function () {// console.log(this)this.$refs.homeScroll.scrollStar();})}
}
这样就完美解决了，
还有一种方法是使用图片加载完成之后再去调用scroll里面的refresh()方法，这里推荐看看这篇文章
https://blog.csdn.net/jsp13270124/article/details/103163474
也是符合coderwhy老师讲的方法，但是我觉得应该用一种使用更广阔的办法，于是我想到了这样解决。