初步认识Swiper_前端交互控制神器_滚动3D切换等特效简单制作

2022-10-16 10:47:50

前言： 本人在项目的工作中负责研发，页面及交互基本都是交给前端去做的。以前前端写的东西大概都知道，都是一些JS，CSS和HTML等的一些基本控制，都懂！但是今天前端突然做了一个具有特殊效果的DOM：页面顶部放了5个包裹元素，包裹可以根据鼠标的拖动产生滚动效果，但是并没有使用正常的滚动条那种样式，而且还能默认实现自动动态滚动到第N个包裹的位置显示？这一系列特殊效果的控制，百思不得其解，后来通过一位美女前端了解到，这里面用到了Swiper这个神奇的JS。

不过SwiperJS还在不断的更新中，在使用过程中可能存在问题，需要关注可能出现的问题，一般没事哈！！！

先看项目里DOM及相关JS吧：

可以看到：Dom中有大量跟Swiper有关的样式：swiper-container,swiper-wrapper,swiper-slide 一些特殊的标记

Swiper.JS会根据这些标记，控制显示的元素数量，还可以根据SwiperAPI提供的一些方法如：滚动到默认位置-slideTo()，这些就解决了我之前的所有疑惑

<div class="bs-category-outer dropSortList">

        <div class="swiper-container swiper-container-horizontal order-trackingTips swiper-container-os">

        <ul class="swiper-wrapper">

    #foreach($PACKAGE in $!{ORDER_INFO.OrderTrackPackages})

            <li class="swiper-slide #if($PACKAGE.ExpressNo==$!{CURRENT_EXPRESS_NO})current#end" expressno="$!{PACKAGE.ExpressNo}">

                <a href="javascript:void(0);"><span></span>${velocityCount}</a>

            </li>

    #end

        </ul>

       </div>

</div>

//Swiper初始化，默认显示4个元素

var trackingTipsSwiper = new Swiper('.swiper-container-os', {

    slidesPerView: 4,

    observer: true,

    observeParents: true,

});

//Swiper控制页面显示在默认位置

var curSpeed = (speed == undefined) ? 200 : parseInt(speed);

mySwiper.slideTo(currentIndex, curSpeed);

总结：附上Swiper学习的网址：前端一定要学习和去了解，帮助是很大的，可以通过简短的代码实现出特别好的效果，先简单介绍到这里吧，以后有机会继续学习补充...

Swiper中文网站： https://www.swiper.com.cn/

SwiperAPI网站：https://www.swiper.com.cn/api/index.html

码农公寓

相关文章