查看: 1770|回复: 4
打印 上一主题 下一主题

slide的顺序为什么回颠倒?

[复制链接]

该用户从未签到

1

主题

6

帖子

10

积分

新手上路

Rank: 1

积分
10
跳转到指定楼层
楼主
发表于 2019-3-31 22:03:42 | 只看该作者 |只看大图 回帖奖励 |正序浏览 |阅读模式
这个是论坛里找的一个效果,我想迁移到移动端去,在vue里使用,但是发现slide的顺序是颠倒的,变成从右往左排列了,滑动也是反的。有大神能解答一下为什么吗?

QQ截图20190331215914.jpg (13.89 KB, 下载次数: 272)

QQ截图20190331215914.jpg

QQ截图20190331215717.jpg (29.26 KB, 下载次数: 256)

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

使用道具 举报

  • TA的每日心情
    奋斗
    2019-4-2 22:29
  • 签到天数: 3 天

    [LV.2]偶尔看看I

    0

    主题

    15

    帖子

    27

    积分

    新手上路

    Rank: 1

    积分
    27
    5#
    发表于 2019-4-1 19:35:56 | 只看该作者
    逻辑论坛里另外一个大神分享计划将更加开放空间
    回复 支持 反对

    使用道具 举报

    该用户从未签到

    1

    主题

    6

    帖子

    10

    积分

    新手上路

    Rank: 1

    积分
    10
    地板
     楼主| 发表于 2019-3-31 23:01:31 | 只看该作者
    逻辑论坛里另外一个大神分享的代码里抄的
    回复 支持 反对

    使用道具 举报

    该用户从未签到

    1

    主题

    6

    帖子

    10

    积分

    新手上路

    Rank: 1

    积分
    10
    板凳
     楼主| 发表于 2019-3-31 23:00:48 | 只看该作者
    1. <template>
    2.   <div class="certify">
    3.     <swiper :options="swiperOption" ref="mySwiper">
    4.       <swiper-slide class="swiper-slide">
    5.         <img src="images/certify01.png">
    6.       </swiper-slide>
    7.       <swiper-slide class="swiper-slide">
    8.         <img src="images/certify01.png">
    9.       </swiper-slide>
    10.       <swiper-slide class="swiper-slide">
    11.         <img src="images/certify01.png">
    12.       </swiper-slide>
    13.       <swiper-slide class="swiper-slide">
    14.         <img src="images/certify01.png">
    15.       </swiper-slide>
    16.       <swiper-slide class="swiper-slide">
    17.         <img src="images/certify01.png">
    18.         <div class="all_text">全部&gt;</div>
    19.       </swiper-slide>
    20.     </swiper>
    21.   </div>
    22. </template>
    23. <script>
    24. import { swiper, swiperSlide } from "vue-awesome-swiper";
    25. import "swiper/dist/css/swiper.css";
    26. export default {
    27.   components: {
    28.     swiper,
    29.     swiperSlide
    30.   },

    31.   data() {
    32.     return {
    33.       swiperOption: {
    34.         watchSlidesProgress: true,
    35.         slidesPerView: "auto",
    36.         centeredSlides: true,
    37.         loop: false,
    38.         loopedSlides: 5,
    39.         autoplay: false,

    40.       }
    41.     };
    42.   },
    43.   computed: {
    44.     swiper() {
    45.       return this.$refs.mySwiper.swiper;
    46.     }
    47.   },
    48.   mounted() {
    49.     this.swiper.on("progress", function() {
    50.       for (let i = 0; i < this.slides.length; i++) {
    51.         let slide = this.slides.eq(i);
    52.         let slideProgress = this.slides[i].progress;
    53.         let modify = 1;
    54.         if (Math.abs(slideProgress) > 1) {
    55.           modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
    56.         }
    57.         let translate = slideProgress * modify * 260 + "px";
    58.         let scale = 1 - Math.abs(slideProgress) / 5;
    59.         let zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
    60.         slide.transform("translateX(" + translate + ") scale(" + scale + ")");
    61.         slide.css("zIndex", zIndex);
    62.         slide.css("opacity", 1);
    63.         if (Math.abs(slideProgress) > 3) {
    64.           slide.css("opacity", 0);
    65.         }
    66.       }
    67.     });
    68.     this.swiper.on("setTransition", function(transition) {
    69.       for (var i = 0; i < this.slides.length; i++) {
    70.         var slide = this.slides.eq(i);
    71.         slide.transition(transition);
    72.       }
    73.     });
    74.   }
    75. };
    76. </script>
    77. <style>
    78. .certify {
    79.   position: relative;
    80.   width: 375px;
    81.   margin: 0 auto;
    82. }

    83. .certify .swiper-slide {
    84.   position: relative;
    85.   width: 30vw;
    86.   height: 150px;
    87.   background: #fff;
    88.   box-shadow: 0 2px 4px #ddd;
    89. }
    90. .certify .swiper-slide img {
    91.   display: block;
    92.   width: 100%;
    93.   height: 100%;
    94. }

    95. .all_text {
    96.   position: relative;
    97.   top: -50%;
    98. }
    99. </style>

    复制代码

    这是完整的代码
    回复 支持 反对

    使用道具 举报

    该用户从未签到

    1

    主题

    6

    帖子

    10

    积分

    新手上路

    Rank: 1

    积分
    10
    沙发
     楼主| 发表于 2019-3-31 22:04:25 | 只看该作者
    比如最后一个 全部 跑到第一项去了
    回复 支持 反对

    使用道具 举报

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

    本版积分规则

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

    GMT+8, 2024-11-1 12:45 , Processed in 0.063722 second(s), 30 queries .

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

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