詳解swipe使用及豎屏頁面滾動方法
更新時間：2018年06月28日 11:17:59 作者：奔跑的工程師
這篇文章主要介紹了swipe使用及豎屏頁面滾動方法，本文通過實例代碼講解的非常詳細,需要的朋友可以參考下
Swiper常用于移動端網(wǎng)站的內(nèi)容觸摸滑動
Swiper是純javascript打造的滑動特效插件，面向手機、平板電腦等移動終端。
Swiper能實現(xiàn)觸屏焦點圖、觸屏Tab切換、觸屏多圖切換等常用效果。
Swiper開源、免費、穩(wěn)定、使用簡單、功能強大，是架構(gòu)移動終端網(wǎng)站的重要選擇！
基于swipe4寫了一個移動端的全屏滾動效果 但是圖片始終不能自適應(yīng)屏幕設(shè)備大小這里記錄一下。
開始的時候要設(shè)置 移動端配置
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <!--這里引入swipe的css文件--> <link rel="stylesheet" type="text/css" href="css/swiper-4.3.3.min.css" rel="external nofollow" />
然后html,body需要設(shè)置 寬高100% 如果swipe中外面還有嵌套的盒子或元素 也必須設(shè)置 寬高100%
豎屏效果需要設(shè)置
<!--這里引入jquery文件,如果需要的話 -->
<script src="js/jquery-1.12.4.min.js"></script>
<!--這里引入swipe的js文件-->
<script src="js/swiper-4.3.3.min.js"></script>
<script type="text/javascript">
var swiper = new Swiper('.swiper-container', {
direction: 'vertical',//設(shè)置豎屏 橫屏類似輪播圖是默認效果可以不設(shè)置
//slidesPerView: 'auto',//設(shè)置slider容器能夠同時顯示的slides數(shù)量,'auto'則自動根據(jù)slides的寬度來設(shè)定數(shù)量。
//centeredSlides: true,//設(shè)定為true時，活動塊會居中，而不是默認狀態(tài)下的居左。
//這里是為了顯示分頁器，前提是html中已經(jīng)設(shè)置了分頁器
pagination: {
el: '.swiper-pagination',
type: 'fraction',
},
});
</script>
這里下面有個坑 百度很多屬性值都沒加引號，導致沒作用--最好官網(wǎng)查看一下
例如上面的 el:'.swiper-pagination' el（屬性):'.swiper-pagination'(屬性值)
總結(jié)
以上所述是小編給大家介紹的swipe使用及豎屏頁面滾動方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了js判斷當前時區(qū)TimeZone是否是夏令時的方法,需要的朋友可以參考下2014-02-02
這幾天在做一個文件管理的模塊，里面有排序的功能，產(chǎn)品經(jīng)理看了說希望能做出更加智能的文件排序功能，就像是win7的名稱排序一樣，主要就是文件名中的數(shù)字會按大小排序，而不是直接按ascii碼 ,這兩天晚上沒事，就先寫了這個排序方法，下個版本中就可以用上了2010-08-08
D3.js實現(xiàn)餅圖,環(huán)圖,玫瑰圖的繪制
這篇文章主要為大家介紹了如何利用D3.js中的d3.pie和d3.arc實現(xiàn)餅圖、環(huán)圖和玫瑰圖的繪制，文中的實現(xiàn)方法講解詳細，感興趣的可以嘗試一下2022-11-11
詳解JavaScript的閉包、IIFE、apply、函數(shù)與對象
本文主要對JavaScript的閉包、IIFE、apply、函數(shù)與對象進行詳細介紹。有很好的參考價值，需要的朋友一起來看下吧2016-12-12
這篇文章主要介紹了在element-ui的select下拉框加上滾動加載，本文以以element-ui中的select為例，給大家介紹的非常詳細,需要的朋友可以參考下2019-04-04
可能在大家使用JavaScript效果時，會碰到在各個瀏覽器中頁面的顯示效果不同，甚至報錯，這就是代碼的兼容性問題。本文就是主要介紹JavaScript的兼容性與調(diào)試技巧，希望對大家有所幫助2016-11-11
要返回上一頁再刷新頁面我們用到最多的是在像php,asp,jsp,asp.net中，下面我來給大家先介紹js 返回前一頁并刷新頁面，然后再把這些代碼放在php中實現(xiàn)刪除后返回當前頁面并刷新頁面2020-09-09
這篇文章主要介紹了js實現(xiàn)遍歷含有input的table方法,結(jié)合實例形式分析了jsp讀取數(shù)據(jù)庫動態(tài)生成table及JavaScript遍歷table的相關(guān)技巧,需要的朋友可以參考下2015-12-12
本文主要介紹了Javascript變量函數(shù)聲明提升深刻理解，Javascript變量函數(shù)聲明提升Hoisting是在Javascript中執(zhí)行上下文工作方式的一種認識，更多相關(guān)知識需要的小伙伴可以參考下面文章詳細內(nèi)容2022-06-06
批量下載對路網(wǎng)圖片并生成html的實現(xiàn)方法
下面小編就為大家?guī)硪黄肯螺d對路網(wǎng)圖片并生成html的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考2016-06-06