swiper入门小练习-移动端实现上下滑动翻整个页面（一）

这几天在做一个Ht5的小页面，涉及到动画和滑动，所以研究了一下swiper, swiper可以滑动和动画。

现在来做一个swiper入门小练习。

1.首先在Hbuilder中创建一个项目

2.在css文件夹中引入swiper-3.4.2.min.css 文件，这个文件在swiper官网有下

3.在js文件夹中引入swiper-3.4.2.min.js 同样这个文件在swiper官网有下

4.然后新建一个html页面

4.1第一步 <link rel="stylesheet" href="../css/swiper-3.4.2.min.css" />

4.2第二步 <script src="../js/swiper-3.4.2.min.js"></script>

4.3第三步书写html部分

<body><div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide slide1">Slide1</div><div class="swiper-slide slide2">Slide2</div><div class="swiper-slide slide3">Slide3</div></div></div><script src="../js/swiper-3.4.2.min.js"></script></body>

文中的 div 和 div的各种类

swiper-container

swiper-wrapper

swiper-slide

 都是参照swiper 知道手册写的 详见：http://www.swiper.com.cn/usage/index.html

 4.4第四步 书写 script的部分

<script>var swiper = new Swiper(".swiper-container", {direction: "vertical",});</script>

写最简单的 垂直滑动


    4.5这里还差一步，要给swiper-container 一个高度 负责看不出来

    4.6为了能看出效果我们将三个slide 分别给上不同的颜色

  具体的html全部代码如下：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" href="../css/swiper-3.4.2.min.css" /><style>*{margin: 0;padding: 0;}.swiper-container{height: 600px;}.slide1{background-color: red;}.slide2{background-color: blue;}.slide3{background-color: green;}</style></head><body><div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide slide1">Slide1</div><div class="swiper-slide slide2">Slide2</div><div class="swiper-slide slide3">Slide3</div></div></div><script src="../js/swiper-3.4.2.min.js"></script></body><script>var swiper = new Swiper(".swiper-container", {direction: "vertical",});</script>
</html>

    这样的效果是：可以滑动但是每一个slide不是充满整个画面，怎么办呢，如果直接把 swiper-container的样式设置为 100% ，反而没有那种效果了，可以试一试

那怎么办呢，给他的父级元素html标签和body标签都加上100%高度，如下就好了

           html, body{height: 100%;}

    完整的代码如下：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" href="../css/swiper-3.4.2.min.css" /><style>*{margin: 0;padding: 0;}html, body{height: 100%;}.swiper-container{height: 100%;}.slide1{background-color: red;}.slide2{background-color: blue;}.slide3{background-color: green;}</style></head><body><div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide slide1">Slide1</div><div class="swiper-slide slide2">Slide2</div><div class="swiper-slide slide3">Slide3</div></div></div><script src="../js/swiper-3.4.2.min.js"></script></body><script>var swiper = new Swiper(".swiper-container", {direction: "vertical",});</script>
</html>

好了，这样一个swiper的入门小练习就完成了，可以直接在手机上打开，向下滑动实现一页一页的切换。共勉

 想学习更多的swiper,请到swiper中文网去学习，http://www.swiper.com.cn/

    不积跬步，无以至千里

   不积小流，无以成江海

swiper入门小练习-移动端实现上下滑动翻整个页面（一）相关推荐

JavaFX开发桌面，移动端，嵌入式权威指南（一）—— JavaFX桌面入门小项目
目录概述代码结果总结 JavaFX应用舞台和场景显示图像显示文字将文本节点作为组动画文本向上滚动概述 JavaFX是用于构建富互联网应用程序的Java库.使用JavaFX开发的应用 ...
《微信小程序》入门小程序-商城小demo的实现
前言承接上一篇<入门小程序>,希望通过这个简单的商城demo可以更好的学习并理解微信小程序的开发: (PS:本文接口和图片资源来自于某位老师的网课,为了防止说打广告,因此不放链接了,布局 ...
小程序跨端框架（taro/uni-app/kbone）横评之2020版（对比很到位！！）
小程序跨端框架(taro/uni-app/kbone)横评之2020版微信竟然推出了跨端的kbone,说明跨端的开发已经深入人心:又是新的一年过去了,小程序开发领域又有哪些新的变化?我们来看如下最新 ...
零基础入门小程序，实战经验分享
讲师介绍:连胜大佬曾经就职于点心移动 & 百度,折腾小程序也有段时间了,参与开发的"小小签到"小程序,在2017年荣获阿拉丁神灯奖.我公司开发了多个工具类小程序,已有四款小 ...
【课程设计】UWP 开发入门小笔记（1）
UWP 开发入门小笔记(1) 零.介绍一.系列介绍[p1] 二.创建第一个属于自己的UWP应用[p2] (一)一个button的属性: (二)修改属性的三种方法 (三)字号(以后会细讲) 三.UWP ...
swiper的介绍以及使用（移动端滑动屏幕切换页面案例）
一.swiper介绍 Swiper常用于移动端网站的内容触摸滑动 Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端. Swiper能实现轮播图.触屏焦点图.触屏 ...
FiddlerEverywhere抓包微信小程序(pc端)
其他链接: java爬虫入门jsoup入门(简单示例,五分钟) https://blog.csdn.net/qq_33745371/article/details/109064543 java爬虫(j ...
java mvc 小程序_[Java教程]Spring MVC 的环境搭建和入门小程序
[Java教程]Spring MVC 的环境搭建和入门小程序 0 2017-02-17 00:00:16 1.1.下载spring框架包. 1.1.1百度搜索Spring Framework. 进入s ...
axios vue 回调函数_Vue 02 —— Vue 入门小案例~使用 Axios 中的GET、POST请求
作为后端攻城狮,写前端代码是一种什么体验? 相信不少人和 @Python大星一样,有写过前端代码的经历. 记录一下,Vue 框架开发中"啼笑皆非"的故事,非专业前端人员,该案例无 ...

swiper入门小练习-移动端实现上下滑动翻整个页面（一）

swiper入门小练习-移动端实现上下滑动翻整个页面（一）相关推荐

最新文章

热门文章