javascript - swiper图片无法划动-PHP中文网问答

讲师中心微信公众号

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机游戏

最近更新

javascript - swiper图片无法划动

黄舟 2017-07-05 10:48:46

[JavaScript讨论组]

2118

题主是用vue写的因为没有请求的数据就造了些假数据:

这是动态生成的img标签

然后再页面上使用:

但打开chrome看一下效果发现这个不能划动,只能看到初始的那张照片

动态生成的img也是正确结构如下但为什么不能划动呢

而且奇怪的是题主把动态生成的img标签换成3个‘

Slide 1

’ 也是不能划动我看swiper官方文档上也没有额外的划动方法，请问我这个是哪里出了问题呢

黄舟

人生最曼妙的风景，竟是内心的淡定与从容！

全部回复(5)

曾经蜡笔没有小新2017-07-05 10:50:46 5楼

事件可能没有绑定上，你试试把new swiper放在mounted 生命周期里试试，还有就是用vue-swiper别人封装好的了

赞 +0

添加回复

我想大声告诉你2017-07-05 10:50:46 4楼

原因不够详细，只能推测可能出在 “动态生成” 这一块上，就好像你给元素绑定事件，按照常规的方法ele.addEventListener给动态生成的元素会失败。

赞 +0

添加回复

怪我咯2017-07-05 10:50:46 3楼

楼主写的代码中，怎么swiper-containter竟然套了又套？？？

赞 +0

添加回复

世界只因有你2017-07-05 10:50:46 2楼

我给你我写好的你比对一下吧你那个太看不清了
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="";

赞 +0

添加回复

代言2017-07-05 10:50:46 1楼

swiper.update()试试

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>