swiper vue修改数据,swiper不更新的问题
-
swiper第一次初始化的时候正常,但是当我改变源数据时,要么就是不能把数据显示完,要么就是没有翻页。尝试过重新赋值swiper,但是依旧没有解决,后面找到下面的方案,测试能够解决我的问题。
-
解决方案,增加监听的配置。
initSwiper() {
// 这是我的源数据
const length = this.liveListProp ? this.liveListProp.length : 0
const group = length % this.slidesPerViewProp == 0
? length / this.slidesPerViewProp
: length / this.slidesPerViewProp + 1
console.log("group ",group);
this.swiper = new Swiper(this.$refs.discoverLiveListRef, {
slidesPerView: this.slidesPerViewProp,
spaceBetween: 15,
slidesPerGroup:group,
loop: false,
loopFillGroupWithBlank: true,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
// 这2段代码起作用
observer:true, //修改swiper自己或子元素时,自动初始化swiper
observeParents:true, //修改swiper的父元素时,自动初始化swiper
});
},
分类:
vue
posted on 2023-08-11 18:45 愤怒的苹果ext 阅读(285) 评论(0) 编辑 收藏 举报 来源
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!