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.statecontext.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}`]);
        });
    };

诶嘿,就是舒爽 (指开发人员感受)。

F5200D5CAE28A03FB8CC772C62F46F70.jpg

问题是解决了,但是解决方案确实不够优,定位问题思路也需优化。

Logo

前往低代码交流专区

更多推荐