查看: 1094|回复: 5

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

[复制链接]

该用户从未签到

1

主题

1

帖子

78

积分

注册会员

Rank: 2

积分
78
发表于 2018-10-5 22:48:45 | 显示全部楼层 |阅读模式
简单描述一下问题,就是在做一个很普通的一个画廊效果,图片左右滑动这样子,不知道哪里写错了,请求各位大神指点一二,但是真实效果却是一个div里有多个图片
js没有报错,贴一下效果图


我的vue组件效果是这样子:
QQ截图20181005224559.png

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

QQ截图20181005224708.png


我的代码
<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>











回复

使用道具 举报

  • TA的每日心情
    擦汗
    8 小时前
  • 签到天数: 38 天

    [LV.5]常住居民I

    2

    主题

    40

    帖子

    405

    积分

    中级会员

    Rank: 3Rank: 3

    积分
    405
    发表于 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

    主题

    9

    帖子

    27

    积分

    新手上路

    Rank: 1

    积分
    27
    发表于 2018-10-24 15:28:49 | 显示全部楼层
    想要想要想要
    回复 支持 反对

    使用道具 举报

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

    本版积分规则

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

    GMT+8, 2018-12-10 20:06 , Processed in 0.148293 second(s), 33 queries .

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

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