找回密码
 立即注册

QQ登录

只需一步,快速开始

[微信] html+js(swiper.js)+css左右滑动切换页面效果,微信移动端

[复制链接]
查看: 1097|回复: 4
最佳答案
0 

51

主题

181

帖子

5105

积分

S1

积分
5105
 楼主| 发表于 2018-5-3 17:28:18 | 显示全部楼层 |阅读模式
本帖最后由 里客云网络科技 于 2018-5-3 17:29 编辑

demo:
1706834675-5aead377e9d63_articlex.png

截图:
1362002773-5aead3825d6c4_articlex.png

结构:
1、swiper-progress.html
2、css文件夹
-swiper.css-swiper.min.css

3、js文件夹
-swiper.min.js
-swiper.js

swiper-progress.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover">
  7. <meta name="apple-mobile-web-app-capable" content="yes">
  8. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  9. <meta name="format-detection" content="telephone=no">
  10.   <title>移动端左右滑动demo</title>
  11.   <!-- CSS -->
  12.   <link rel="stylesheet" href="css/swiper.min.css">

  13.   <!-- Demo styles -->
  14.   <style>
  15.     html, body {
  16.       position: relative;
  17.       height: 100%;
  18.     }
  19.     body {
  20.       -webkit-tap-highlight-color:rgba(255,0,0,0);
  21.       background: #fff;
  22.       font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  23.       font-size: 14px;
  24.       color:#000;
  25.       margin: 0;
  26.       padding: 0;
  27.     }
  28.     .swiper-container {
  29.       width: 100%;
  30.       height: 100%;
  31.     }
  32.     .swiper-slide {
  33.       text-align: center;
  34.       font-size: 18px;
  35.       background: #fff;

  36.       /* Center slide text vertically */
  37.       display: -webkit-box;
  38.       display: -ms-flexbox;
  39.       display: -webkit-flex;
  40.       display: flex;
  41.       -webkit-box-pack: center;
  42.       -ms-flex-pack: center;
  43.       -webkit-justify-content: center;
  44.       justify-content: center;
  45.       -webkit-box-align: center;
  46.       -ms-flex-align: center;
  47.       -webkit-align-items: center;
  48.       align-items: center;
  49.     }
  50.   </style>
  51. </head>
  52. <body>
  53.   <!-- Swiper -->
  54.   <div class="swiper-container">
  55.     <div class="swiper-wrapper">
  56.       <div class="swiper-slide">Slide 1</div>
  57.       <div class="swiper-slide">Slide 2</div>
  58.       <div class="swiper-slide">Slide 3</div>
  59.       <div class="swiper-slide">Slide 4</div>
  60.       <div class="swiper-slide">Slide 5</div>
  61.       <div class="swiper-slide">Slide 6</div>
  62.       <div class="swiper-slide">Slide 7</div>
  63.       <div class="swiper-slide">Slide 8</div>
  64.       <div class="swiper-slide">Slide 9</div>
  65.       <div class="swiper-slide">Slide 10</div>
  66.       <div class="swiper-slide">Slide 11</div>
  67.       <div class="swiper-slide">Slide 12</div>
  68.       <div class="swiper-slide">Slide 13</div>
  69.       <div class="swiper-slide">Slide 14</div>
  70.       <div class="swiper-slide">Slide 15</div>
  71.     </div>
  72.     <!-- 进度条 -->
  73.     <div class="swiper-pagination"></div>
  74.   </div>

  75.   <!-- Swiper JS -->
  76.   <script src="js/swiper.min.js"></script>

  77.   <!-- Initialize Swiper -->
  78.   <script>
  79.     var swiper = new Swiper('.swiper-container', {
  80.       pagination: {
  81.         el: '.swiper-pagination',
  82.         type: 'progressbar',
  83.       },
  84.     });
  85.   </script>


  86. <!-- 微信内禁止上下拉 -->
  87. <script type="text/javascript">
  88. window.onload = function(){
  89.     document.body.addEventListener("touchmove",function(event){
  90.         event.preventDefault();
  91.         });
  92. };
  93.   </script>
  94. </body>
  95. </html>
复制代码
*上面加入了禁止微信下拉的js,适合不会产生滚动条的页面,如果你的页面会有滚动条,请把禁止微信下拉的js去掉,否则滚动条就被卡住不能往下拉了。
css和js文件下载
链接: https://pan.baidu.com/s/1j4jk... 密码: 5kti


回复

使用道具 举报

最佳答案
109 

717

主题

2386

帖子

3万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
36801

HKC

QQ
发表于 2018-5-3 21:07:43 来自手机 | 显示全部楼层
感谢分享
回复

使用道具 举报

最佳答案
0 

0

主题

202

帖子

2772

积分

专家路上

积分
2772
发表于 2018-5-4 08:59:46 | 显示全部楼层
收藏一下。
回复

使用道具 举报

最佳答案
4 

3

主题

434

帖子

1万

积分

S2

积分
16456
发表于 2018-5-4 09:19:29 | 显示全部楼层
谢谢分享
回复

使用道具 举报

最佳答案
0 

0

主题

7

帖子

60

积分

等待验证会员

积分
60
发表于 2018-5-4 10:07:31 | 显示全部楼层
刚要找这个,谢谢分享了
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



www.henkuai.com—微信开发者的分享交流平台,专注微信开发生态。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

微信公众号

广告推广
QQ:805874290

市场合作
zhongcong@henkuai.com