javascript - l'image du swiper ne peut pas être glissée

Question

La question est écrite en vue. Comme il n'y a pas de données demandées, de fausses données sont créées :

Il s'agit d'une balise img générée dynamiquement

Ensuite, utilisez sur la page :

Mais lorsque j'ai ouvert Chrome et jeté un œil à l'effet, j'ai découvert qu'il ne pouvait pas être glissé et je ne pouvais voir que la photo initiale

L'image générée dynamiquement est également correcte. La structure est la suivante, mais pourquoi ne peut-elle pas être glissée ?

Et ce qui est étrange, c'est que l'interrogateur a changé la balise img générée dynamiquement en 3' <p class="swiper-slide">Slide 1</p>
' qui ne peut pas non plus être glissée. J'ai vu qu'elle n'était pas disponible. dans la documentation officielle de swiper. Méthode de balayage supplémentaire, dites-moi s'il vous plaît ce qui ne va pas avec ça

.

Answer 1

L'événement n'est peut-être pas lié. Vous pouvez essayer de mettre un nouveau swiper dans le cycle de vie monté, ou utiliser vue-swiper pour l'encapsuler par d'autres

Answer 2

La raison n'est pas assez détaillée. Nous ne pouvons que spéculer que cela peut être dû à l'aspect "génération dynamique". C'est comme si vous liiez un événement à un élément et que la méthode conventionnelle ele.addEventListener était utilisée pour générer dynamiquement le. élément, il échouera.

Answer 3

Dans le code écrit par l'affiche originale, pourquoi le conteneur swiper est-il utilisé à plusieurs reprises ? ? ?

Answer 4

Je vais vous donner ce que j'ai écrit. Vous pouvez le comparer. Le vôtre est trop flou
html

.

 <p class="swiper-container">
            <!--轮播图-->
            <p class="swiper-wrapper">
                <!--<p class="swiper-slide">-->
                    <!--<a href=""><img src="../images/lunbo.png" alt="1"/></a>-->
                <!--</p>-->
            </p>
            <!-- 分页器 -->
            <p class="swiper-pagination">

            </p>
        </p>

js :

 //渲染活动  图片轮播
function activitySwiper(arry) {
    var arr = arry.activity;
    var strAct = "";
    console.log("--开始拼接轮播活动字符串--");
    for (var i = 0; i < arr.length; i++) {
        strAct += "<p class='swiper-slide'>\
                        <a href='" + arr[i].requestUrl + "'><img src='" + arr[i].imageUrl + "'></a>\
                   </p>"
    }
    $(".swiper-wrapper").html(strAct);
    mySwiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        autoplay: 5000,
        loop: true
    });
    setInterval("mySwiper.slideNext()", 5000);
}  


用着  一点问题没有   最外层 不要忘了 声明  mySwiper   ：var mySwiper="";        

Answer 5

swiper.update() essayez

Answer 6

J'ai trouvé la raison. La raison est que la position d'initialisation du swiper est incorrecte. Pour générer dynamiquement des balises img, un nouveau swiper doit être créé une fois que toutes les balises sont rendues sur l'interface. ça

var attachments = [{attachment_url:"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1384462805,1750500487&fm=23&gp=0.jpg",tag:"在途"},
                {attachment_url:"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2261844264,1398222573&fm=23&gp=0.jpg",tag:'雨天'},
                {attachment_url:"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1682686082,380056728&fm=23&gp=0.jpg",tag:"下雪"},
                {attachment_url:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2437762035,2994278153&fm=23&gp=0.jpg",tag:"路滑"}];
        this.listData = attachments;
        var swiper = new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',
            paginationClickable: true,
            preloadImages: false,
            lazyLoading: true,
            longSwipesRatio: 0.3,
            touchRatio:1,
            // observer:true,//修改swiper自己或子元素时，自动初始化swiper
            observeParents:true,//修改swiper的父元素时，自动初始化swiper
            onSlideChangeEnd: function (swiper) {
                this.showImageInfo(swiper.activeIndex);
            }
        });
        

La source de données liée a été modifiée pour générer des composants de manière asynchrone, donc l'opération d'initialisation du swiper doit être exécutée dans le cycle de vie après le chargement du composant, c'est-à-dire dans la fonction montée de l'objet Vue