初识移动端

最新推荐文章于 2024-09-19 09:35:27 发布

alary2012

最新推荐文章于 2024-09-19 09:35:27 发布

阅读量76

点赞数

文章标签：前端 javascript ViewUI

原文链接：http://www.cnblogs.com/yourself/p/8796740.html

版权

之前一直没机会做移动端的前端，我还特意去看了看，幸亏看了看，机会总是留给有准备的人

今天临时让我改移动端页面，然后那客户杵我后面看着，ohmygod，谁能明白我当时的心情

小心脏瑟瑟缩缩的，还好之前看过点，给他写完了，崩崩崩崩崩崩溃

接下来，重点来了，亲身体会的移动端注意点：

话不多说，上来先把这段代码放到<head>部分

<meta name="viewport" content="width=device-width, initial-scale=1.0">

想了解底部原理请移步前人栽的树下面

http://imweb.io/topic/56b421c15c49f9d377ed8eef

http://hcysun.me/2015/10/16/%E4%B8%80%E7%AF%87%E7%9C%9F%E6%AD%A3%E6%95%99%E4%BC%9A%E4%BD%A0%E5%BC%80%E5%8F%91%E7%A7%BB%E5%8A%A8%E7%AB%AF%E9%A1%B5%E9%9D%A2%E7%9A%84%E6%96%87%E7%AB%A0(%E4%B8%80)/

下面安利一个移动端轮播图的简单实现方法

1.首先加载插件，需要用到的文件有swiper.min.js和swiper.min.css文件。可下载Swiper文件或使用CDN。

<!DOCTYPE html>
<html>
<head>
    ...
    <link rel="stylesheet" href="path/to/swiper.min.css">
</head>
<body>
    ...
    <script src="path/to/swiper.min.js"></script>
</body>
</html>

2.HTML内容。

<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>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    
    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>
</div>
导航等组件可以放在container之外

3.你可能想要给Swiper定义一个大小，当然不要也行。

.swiper-container {
    width: 600px;
    height: 300px;
}

4.初始化Swiper：最好是挨着</body>标签

<script>        
  var mySwiper = new Swiper ('.swiper-container', {
      //上下
    direction: 'vertical',
      //是否循环
    loop: true,
    
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },
    
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    
    // 如果需要滚动条
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  })        
  </script>

如果不能写在HTML内容的后面，则需要在页面加载完成后再初始化（不推荐）。

<script type="text/javascript">
window.onload = function() {
  ...
}
</script>

或者这样（Jquery和Zepto）

<script type="text/javascript">
$(document).ready(function () {
 ...
})
</script>

5.完成。恭喜你，现在你的Swiper应该已经能正常切换了。

如果有些功能不需要，请注释掉相关代码，然后就可以继续愉快的敲代码了

en。。。轮播图所用插件是这个

http://www.swiper.com.cn/usage/index.html

转载于:https://www.cnblogs.com/yourself/p/8796740.html

alary2012

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫