開始編寫首頁前，需要先將全屏滾動弄好，我對比swiper和fullPage兩個插件，還是決定使用swiper，畢竟swiper熟悉點，不用太多學習成本。
當我下載完最新版本的swiper，即目前的5.3.1版本，發(fā)現(xiàn)垂直滾動有些問題，開啟鼠標滾動切換只能切換2-3個模板，而且感覺切換不順暢。效果如下：
swiper-5.3.1.gif
然后再網(wǎng)上查詢，發(fā)現(xiàn)別人用的是4.x版本的swiper，于是又去官網(wǎng)下載了4.5.3版本的swiper，雖然鼠標滾動切換很順暢，但是不能滿足業(yè)務(wù)需求。因為其他版塊有切換動畫，底部欄相比其他版塊高度低很多，所以我需要的是從最后一個版塊（底部）向上滾動切換到倒數(shù)第三個版塊，而不是倒數(shù)第二個。效果如下：
swiper-4.5.3.gif
于是最后，還是swiper版本的問題，我決定和別人的版本一致，使用4.0.6版本的swiper，滿足業(yè)務(wù)需求。效果如下：
swiper-4.0.6.gif
下面為模板代碼：
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="../static/css/reset.css">
<link rel="stylesheet" href="../static/css/index.css">
<link rel="stylesheet" href="../static/css/swiper-4.5.3.css"></head><body>
<main role="main">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide header">header</div>
<div class="swiper-slide">section 1</div>
<div class="swiper-slide">section 2</div>
<div class="swiper-slide">section 3</div>
<div class="swiper-slide">section 4</div>
<div class="swiper-slide footer">footer</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
</main></body><script src="../lib/jquery-3.4.1.min.js"></script><!-- <script src="../lib/swiper-5.3.1.js"></script> --><!-- <script src="../lib/swiper-4.5.3.js"></script> --><script src="https://cdn.bootcss.com/Swiper/4.0.6/js/swiper.js"></script><script>$(function() {
const mySwiper = new Swiper('.swiper-container', {
direction: 'vertical', // Slides的滑動方向-垂直
mousewheel: true, // 開啟鼠標滾輪控制Swiper切換。
speed: 500, // 切換速度
slidesPerView: 'auto', // 設(shè)置slider容器能夠同時顯示的slides數(shù)量(carousel模式)。'auto'則自動根據(jù)slides的寬度來設(shè)定數(shù)量。
touchRatio: 0, // 觸摸比例。 設(shè)置為0時，完全無法滑動
spaceBetween: 10, // slide之間距離(demo用于區(qū)分slide, 實際開發(fā)可刪除)
// 分頁器
pagination: {
el: '.swiper-pagination',
clickable: true,
},
})
})</script></html>.autoPage {
width: 100%;
height: 100%;}html,
body,
main {
position: relative;
height: 100%;
background-color: #f5f5f5;}.swiper-container {
width: 100%;
height: 100%;}.swiper-container .swiper-wrapper .swiper-slide {
display: flex;
justify-content: center;
align-items: center;
font-size: 80px;
font-weight: bold;
color: #000;
background: #fff;}.swiper-container .swiper-wrapper .header,
.swiper-container .swiper-wrapper .footer {
height: 200px;}我是有底線的
掃描二維碼手機查看該文章
文章引用：http://www.qingbaosc.com/news/webzhishi/1370.html
在線咨詢
電話咨詢
