Ionic Js十八:滑动框
2024-10-19 08:06:44
ion-slide-box
滑动框是一个包含多页容器的组件,每页滑动或拖动切换:
效果图如下:


用法
<ion-slide-box on-slide-changed="slideHasChanged($index)">
<ion-slide>
<div class="box blue"><h1>BLUE</h1></div>
</ion-slide>
<ion-slide>
<div class="box yellow"><h1>YELLOW</h1></div>
</ion-slide>
<ion-slide>
<div class="box pink"><h1>PINK</h1></div>
</ion-slide>
</ion-slide-box>

HTML 代码
<ion-slide-box active-slide="myActiveSlide">
<ion-slide>
<div class="box blue"><h1>BLUE</h1></div>
</ion-slide>
<ion-slide>
<div class="box yellow"><h1>YELLOW</h1></div>
</ion-slide>
<ion-slide>
<div class="box pink"><h1>PINK</h1></div>
</ion-slide>
</ion-slide-box>
CSS 代码
.slider {
height: 100%;
}
.slider-slide {
padding-top: 80px;
color: #000;
background-color: #fff;
text-align: center; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight:;
} .blue {
background-color: blue;
} .yellow {
background-color: yellow;
} .pink {
background-color: pink;
}
JavaScript 代码
angular.module('ionicApp', ['ionic']) .controller('SlideController', function($scope) { $scope.myActiveSlide = 1; })


最新文章
- 存储过程 Row_number() 分页
- c#将list集合转换为datatable的简单办法
- 免费的网络扫描器-Advanced IP Scanner
- 关于QT按键信号槽的总结(原创)
- 逢三退一(boolean数组的使用)
- Spring MVC 使用介绍(十三)数据验证 (一)基本介绍
- deque源码3(deque的构造与内存、ctor、push_back、push_front)
- 搭建 RabbitMQ Server 高可用集群【转】
- python中selenium操作下拉滚动条方法汇总
- BZOJ2671 Calc(莫比乌斯反演)
- 【Java】 剑指offer(67) 把字符串转换成整数
- 微信小程序开发填坑
- Pytorch的torch.cat实例
- Vue学习四:v-if及v-show指令使用方法
- 【转】【Python】Python网络编程
- Django---简单模板遍历渲染
- myeclipse10 破解版安装
- TED_Topic5:How virtual reality can create the ultimate empathy machine
- Wannafly挑战赛7 B - codeJan与旅行
- android.view.animation(2) - 插值器Interpolator