问题: 静态的数据渲染都没有问题但是用v-for动态渲染数据的时候就出现了缝隙及其左右滑动都失效了。在静态数据渲染出来的时候却不会
思路:一开始我在想是不是css被我污染了 结果试了好多次都是静态渲染没问题而v-for动态渲染就出现不能滑动及元素间隙消失 ,经过了10多分钟的排查发现问题所在。
解决方法和错误地方:
问题是:我的swiper初始化是在生命周期钩子的mounted中初始化的这样是错误的,因为mounted实例被挂载后调用,这时 el
被新创建的 vm.$el
替换了。如果根实例挂载到了一个文档内的元素上,当 mounted
被调用时 vm.$el
也在文档内,如果这时候初始化的话节点渲染而swiper的css和js文件来不及加载所以导致滑动不了及其出些一些列问题,
错误示例:
mounted() {
new Swiper('.swiper-container-rec', {
pagination: '.swiper-pagination',
slidesPerView: 'auto',
spaceBetween: 20,
});
},
解决方法:把swiper初始化封装成一个函数在声明周期钩子updated中调用初始化函数因为updayed是组件 DOM 已经更新,可以执行依赖于 DOM 的操作 里面再用.$nextTick( ) 调用原因是将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它 所以swiper的css和js文件也加载进来了 也就解决了。
函数:
methods: {
getswiper(){
new Swiper('.swiper-container-rec', {
pagination: '.swiper-pagination',
slidesPerView: 'auto',
centeredSlides: false,
paginationClickable: false,
spaceBetween: 20,
touchAction: 'none',
});
},
},
调用:
updated() {
this.$nextTick(()=>{
this.getswiper()
})
},
缝隙出来了也能滑动以及刷新只出现单个元素的问题也解决了