詳解swipe使用及豎屏頁面滾動方法
Swiper常用于移動端網(wǎng)站的內(nèi)容觸摸滑動
Swiper是純javascript打造的滑動特效插件，面向手機(jī)、平板電腦等移動終端。
Swiper能實(shí)現(xiàn)觸屏焦點(diǎn)圖、觸屏Tab切換、觸屏多圖切換等常用效果。
Swiper開源、免費(fèi)、穩(wěn)定、使用簡單、功能強(qiáng)大，是架構(gòu)移動終端網(wǎng)站的重要選擇！
基于swipe4寫了一個移動端的全屏滾動效果 但是圖片始終不能自適應(yīng)屏幕設(shè)備大小這里記錄一下。
開始的時(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è)置豎屏 橫屏類似輪播圖是默認(rèn)效果可以不設(shè)置
//slidesPerView: 'auto',//設(shè)置slider容器能夠同時(shí)顯示的slides數(shù)量,'auto'則自動根據(jù)slides的寬度來設(shè)定數(shù)量。
//centeredSlides: true,//設(shè)定為true時(shí)，活動塊會居中，而不是默認(rèn)狀態(tài)下的居左。
//這里是為了顯示分頁器，前提是html中已經(jīng)設(shè)置了分頁器
pagination: {
el: '.swiper-pagination',
type: 'fraction',
},
});
</script>
這里下面有個坑 百度很多屬性值都沒加引號，導(dǎo)致沒作用--最好官網(wǎng)查看一下
例如上面的 el:'.swiper-pagination' el（屬性):'.swiper-pagination'(屬性值)
總結(jié)
以上所述是小編給大家介紹的swipe使用及豎屏頁面滾動方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了js獲取checkbox值的方法,涉及js針對節(jié)點(diǎn)的操作技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-01-01
echarts學(xué)習(xí)筆記之圖表自適應(yīng)問題詳解
最近發(fā)現(xiàn)一個問題，echarts圖初始化后不能自適應(yīng)瀏覽器的縮放，所以下面這篇文章就來給大家介紹了關(guān)于echarts圖表自適應(yīng)問題的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-11-11
JavaScript按位運(yùn)算符的應(yīng)用簡析
下面根據(jù)自己的認(rèn)知簡單的談一下js中的位操作使用（同樣適用于其他語言），如果有錯誤，歡迎指正2014-02-02
javascript 數(shù)組去重復(fù)(在線去重工具)
很多情況下我們需要去掉重復(fù)的內(nèi)容，一般我們都是將很多內(nèi)容放到一個數(shù)組里面，然后再去重復(fù)，這里簡單為大家整理一下2016-12-12
原生JavaScript實(shí)現(xiàn)模態(tài)框的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何利用原生JavaScript封裝實(shí)現(xiàn)模態(tài)框效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-06-06
掃微信小程序碼實(shí)現(xiàn)網(wǎng)站登陸實(shí)現(xiàn)解析
這篇文章主要介紹了掃微信小程序碼實(shí)現(xiàn)網(wǎng)站登陸實(shí)現(xiàn)解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-08-08
通過頁面向后臺傳遞中文數(shù)據(jù)時(shí)少不了編/解碼。。2009-05-05
這篇文章主要介紹了javascript中的異步調(diào)用機(jī)制,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02
el-popover放在el-table中點(diǎn)擊無反應(yīng)問題解決方案
我們想在table中給btn加彈框但是?el-popover點(diǎn)擊按鈕沒有任何反應(yīng),解決思路是通過給每個el-popover都加上單獨(dú)的id,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2024-04-04
這篇文章主要介紹了JavaScript中變量、指針和引用功能與操作,結(jié)合實(shí)例形式分析了javascript變量、指針與引用的功能、使用方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2018-08-08