Swiper 应用Vue遇到问题处理记录
Swiper 应用Vue遇到问题处理记录最近在学习vue,在开发一个需求中发现了一个问题,轮播图图片在语言切换后不更新,解决过程做个记录,错误不足希望靓仔们指教,tank yo!首先是在组件中引入common文件夹下不同语言下配置的共同的属性const state = reactive({imgs: {btnIcon: tc('message.btnIcon'),}})使用图片<img cl
Swiper 应用Vue遇到问题处理记录
最近在学习vue,在开发一个需求中发现了一个问题,轮播图图片在语言切换后不更新,解决过程做个记录,错误不足希望靓仔们指教,tank yo!
首先是在组件中引入common文件夹下不同语言下配置的共同的属性
const state = reactive({
imgs: {
btnIcon: tc('message.btnIcon'),
}
})
使用图片
<img class="center-icon" :src="imgs.btnIcon" alt="" srcset="">
图片展示出来,但是并没有随着语言的切换而更新,问题排查后找到原因,需要使用watch监听state变化。
首先我们新建一个文件,存放我们的lanStore
import { createStore } from 'vuex';
const {locale} = i18n.global;
export default createStore({
state: {
langchanged: locale
}
});
注册mutation更改我们的store(不能直接调用一个 mutation handler。这个选项更像是事件注册:“当触发一个类型为 increment
的 mutation 时,调用此函数。”要唤醒一个 mutation handler,你需要以相应的 type 调用 store.commit 方法)
mutations: {
langChange(state, payload) {
state.langchanged = payload;
}
}
声明一个action(接受一个与 store 实例具有相同方法和属性的 context 对象,因此你可以调用 context.commit
提交一个 mutation,或者通过 context.state
和 context.getters
来获取 state 和 getters。)
Action 类似于 mutation,不同在于:
- Action 提交的是 mutation,而不是直接变更状态。
- Action 可以包含任意异步操作。
actions: {
langChange(mu, payload) {
mu.commit('langChange', payload);
}
}
store.dispatch('langChange', curLang);
ok 解决了问题,但是又发现了swiper的一个兼容性问题(不是
切换语言后发现展示的前两张和最后一张图不更新,检查没有报错,debug检查数据流一切正常。(网上小伙伴们反映的都是第一张和最后一张,但是我仔细检查发现确实是前两张都没更新)后来才知道是因为开启了loop,导致动态更新元素的时候缓存的元素不会改变。
在查阅文档的时候发现了两个属性
observeParents 监听swiper的父元素改变
observe 监听swiper的及子元素改变
但是没有解决问题,继续搜索 发现了一个回调看起来可以解决问题😌
onSlideChangeEnd(swiper), swiper3开始启用的回调函数,swiper从一个slide过渡到另一个slide结束时执行。可接受swiper实例作为参数。虽然没那么贴切我的需求,但是,本着能用就行的节约精神,先试试
因为项目使用的是swiper5并且Vue3中没有this,我就写成这样子
on: {
slideChangeEnd: function(swiper){
swiper.update();
swiper.reLoop();
}
}
果然 还是没有效果!但是我试了下vue2 + swiper4就可以正常更新了,
好难过。知道的朋友可以评论下!然后就是老本行了,操作dom ⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄
setup(){
...
return {
updateSwiper
}
}
updated() {
this.updateSwiper();
}
然后就是更新dom的函数
const updateSwiper = () => {
const all = document.getElementsByClassName('s-slide');
all.forEach((res) => {
const eleObj = res.attributes['data-swiper-slide-index'];
const eleIndex = elementInxObj.value;
res.firstChild.setAttribute('src', state.imgs[`swiper${elementIndex - 0 + 1}`]);
});
};
诶嘿,就是舒爽 (指开发人员感受)。
问题是解决了,但是解决方案确实不够优,定位问题思路也需优化。
更多推荐
所有评论(0)