查看: 2798|回复: 5
打印 上一主题 下一主题

vue使用swiper谜一样的bug(很简单)

[复制链接]

该用户从未签到

1

主题

1

帖子

78

积分

注册会员

Rank: 2

积分
78
跳转到指定楼层
楼主
发表于 2018-10-5 22:48:45 | 只看该作者 |只看大图 回帖奖励 |倒序浏览 |阅读模式
简单描述一下问题,就是在做一个很普通的一个画廊效果,图片左右滑动这样子,不知道哪里写错了,请求各位大神指点一二,但是真实效果却是一个div里有多个图片
js没有报错,贴一下效果图


我的vue组件效果是这样子:


我希望的效果应该是这样的:




我的代码
<template>
    <div class="box">
     <div class="warpper">
            <swiper>
                <swiper-slide>
                    <img src="http://img1.qunarzz.com/sight/p0/1602/4d/4d8529eb55360f5090.img.jpg_r_800x800_5180d7ba.jpg" class="swiperImg">  
                </swiper-slide>
                <swiper-slide>
                    <img src="http://img1.qunarzz.com/sight/p0/1602/4d/4d8529eb55360f5090.img.jpg_r_800x800_5180d7ba.jpg" class="swiperImg">  
                </swiper-slide>
            </swiper>
        </div>
    </div>
</template>
<script>
export default {
    name:'Gllary',
}
</script>

<style lang="stylus" scoped>
        .box
         display flex
         flex-direction column
         justify-content center
         //层级最高
         z-index:99
         background #000
         //定位
         position fixed
         top 0
         left 0
         right 0
         bottom 0
         .warpper
          width 100%
          height 0
          padding-bottom 100%
          .swiperImg
           width 100%
           height 100%

</style>











分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 分享淘帖
回复

使用道具 举报

  • TA的每日心情
    擦汗
    2018-12-11 13:10
  • 签到天数: 39 天

    [LV.5]常住居民I

    2

    主题

    41

    帖子

    517

    积分

    高级会员

    Rank: 4

    积分
    517
    沙发
    发表于 2018-10-9 09:01:20 | 只看该作者
    我不会用这个组件,但是我会用swiper做你要的效果
    回复 支持 反对

    使用道具 举报

    该用户从未签到

    0

    主题

    1

    帖子

    4

    积分

    新手上路

    Rank: 1

    积分
    4
    板凳
    发表于 2018-10-10 08:29:42 | 只看该作者
    你JS都没写,怎么会有动画效果,在mounted(){...........实例化一个Swiper}
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    奋斗
    2018-10-24 15:28
  • 签到天数: 1 天

    [LV.1]初来乍到

    0

    主题

    8

    帖子

    26

    积分

    新手上路

    Rank: 1

    积分
    26
    地板
    发表于 2018-10-24 15:28:49 | 只看该作者
    想要想要想要
    回复 支持 反对

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    Archiver|手机版|小黑屋|Swiper中文网 ( 粤ICP备15001020号

    GMT+8, 2024-11-24 02:38 , Processed in 0.067004 second(s), 33 queries .

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

    快速回复 返回顶部 返回列表