本帖最后由 里客云网络科技 于 2018-5-3 17:29 编辑
demo:
截图:
结构:
1、swiper-progress.html
2、css文件夹 -swiper.css-swiper.min.css
3、js文件夹 -swiper.min.js
-swiper.js
swiper-progress.html - <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover">
- <meta name="apple-mobile-web-app-capable" content="yes">
- <meta name="apple-mobile-web-app-status-bar-style" content="black">
- <meta name="format-detection" content="telephone=no">
- <title>移动端左右滑动demo</title>
- <!-- CSS -->
- <link rel="stylesheet" href="css/swiper.min.css">
- <!-- Demo styles -->
- <style>
- html, body {
- position: relative;
- height: 100%;
- }
- body {
- -webkit-tap-highlight-color:rgba(255,0,0,0);
- background: #fff;
- font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
- font-size: 14px;
- color:#000;
- margin: 0;
- padding: 0;
- }
- .swiper-container {
- width: 100%;
- height: 100%;
- }
- .swiper-slide {
- text-align: center;
- font-size: 18px;
- background: #fff;
- /* Center slide text vertically */
- display: -webkit-box;
- display: -ms-flexbox;
- display: -webkit-flex;
- display: flex;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- -webkit-justify-content: center;
- justify-content: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- -webkit-align-items: center;
- align-items: center;
- }
- </style>
- </head>
- <body>
- <!-- Swiper -->
- <div class="swiper-container">
- <div class="swiper-wrapper">
- <div class="swiper-slide">Slide 1</div>
- <div class="swiper-slide">Slide 2</div>
- <div class="swiper-slide">Slide 3</div>
- <div class="swiper-slide">Slide 4</div>
- <div class="swiper-slide">Slide 5</div>
- <div class="swiper-slide">Slide 6</div>
- <div class="swiper-slide">Slide 7</div>
- <div class="swiper-slide">Slide 8</div>
- <div class="swiper-slide">Slide 9</div>
- <div class="swiper-slide">Slide 10</div>
- <div class="swiper-slide">Slide 11</div>
- <div class="swiper-slide">Slide 12</div>
- <div class="swiper-slide">Slide 13</div>
- <div class="swiper-slide">Slide 14</div>
- <div class="swiper-slide">Slide 15</div>
- </div>
- <!-- 进度条 -->
- <div class="swiper-pagination"></div>
- </div>
- <!-- Swiper JS -->
- <script src="js/swiper.min.js"></script>
- <!-- Initialize Swiper -->
- <script>
- var swiper = new Swiper('.swiper-container', {
- pagination: {
- el: '.swiper-pagination',
- type: 'progressbar',
- },
- });
- </script>
- <!-- 微信内禁止上下拉 -->
- <script type="text/javascript">
- window.onload = function(){
- document.body.addEventListener("touchmove",function(event){
- event.preventDefault();
- });
- };
- </script>
- </body>
- </html>
复制代码*上面加入了禁止微信下拉的js,适合不会产生滚动条的页面,如果你的页面会有滚动条,请把禁止微信下拉的js去掉,否则滚动条就被卡住不能往下拉了。
|