让我们以一个示例来演示在Framework7中将默认刷卡器与分页一起使用:
<
!DOCTYPE html>
<
html>
<
head>
<
meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<
meta name = "apple-mobile-web-app-capable" content = "yes" />
<
meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<
title>
Default Swiper with Pagination<
/title>
<
link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<
link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
<
/head>
<
body>
<
div class = "views">
<
div class = "view view-main">
<
div class = "pages">
<
div data-page = "home" class = "page navbar-fixed">
<
div class = "navbar">
<
div class = "navbar-inner">
<
div class = "left">
<
/div>
<
div class = "center">
Default Swiper<
/div>
<
div class = "right">
<
/div>
<
/div>
<
/div>
<
div class = "page-content">
<
div class = "swiper-container">
<
div class = "swiper-wrapper">
<
div class = "swiper-slide">
<
span>
Slide 1<
/span>
<
/div>
<
div class = "swiper-slide">
<
span>
Slide 2<
/span>
<
/div>
<
div class = "swiper-slide">
<
span>
Slide 3<
/span>
<
/div>
<
div class = "swiper-slide">
<
span>
Slide 4<
/span>
<
/div>
<
/div>
<
div class = "swiper-pagination">
<
/div>
<
/div>
<
/div>
<
/div>
<
/div>
<
/div>
<
/div>
<
script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js">
<
/script>
<
style>
.swiper-container {height:100%;
}.swiper-slide {background:#fff;
}.swiper-slide span {text-align:center;
display:block;
margin:20px;
font-size:21px;
}<
/style>
<
script>
var myApp = new Framework7();
var mySwiper = myApp.swiper('.swiper-container', {pagination:'.swiper-pagination'});
<
/script>
<
/body>
<
/html>
【Framework7默认的滑动与分页】立即测试
推荐阅读
- Framework7延迟加载
- Framework7自定义控件
- Framework7选项卡JavaScript事件
- Framework7滑动滑块
- 从导航栏切换选项卡
- 使用JavaScript的Framework7显示选项卡
- Framework7可滑动标签
- Framework7内联选项卡
- Framework7动画选项卡