IONIC----13.slide3

最新推荐文章于 2018-11-26 18:10:53 发布
最新推荐文章于 2018-11-26 18:10:53 发布
阅读量771 收藏
点赞数
分类专栏： Ionic 文章标签： ionic slide
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/damys/article/details/52148785
版权 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
<script src="./lib/js/ionic.bundle.min.js"></script>
<link rel="stylesheet" type="text/css" href="./lib/css/ionic.min.css">
<title>Ionic</title>
<style type="text/css">
ion-slide{ text-align:center;}
ion-slide img{ width:100%; height:100vh}
</style>

</head>

<body ng-app="myApp" ng-controller="firstController">
    <ion-header-bar class="bar-positive">
        <h1 class="title">active : {{index}}</h1>
    </ion-header-bar>

    <ion-slide-box does-continue="true" show-pager="true" auto-play="true" on-slide-changed="go_changed(index)"  active-slide="index" pager-click="go(index)">
        <ion-slide>
            <img src="style/img/1.jpg">
        </ion-slide>

        <ion-slide>
            <img src="style/img/2.jpg">
        </ion-slide>

        <ion-slide>
            <img src="style/img/3.jpg">
        </ion-slide>

        <ion-slide>
            <img src="style/img/4.jpg">
        </ion-slide>
    </ion-slide-box>
</body>

<script type="text/javascript">
angular.module("myApp",["ionic"])
.controller("firstController",function($scope,$ionicSlideBoxDelegate){
    $scope.index = 0;
    $scope.go = function(index){
        $ionicSlideBoxDelegate.slide(index);
    }
    $scope.go_changed=function(index){
        console.log(index)
    }
});
</script>
</html>

GITHUB

damys
关注
专栏目录
ionic3中轮播组件 单个ion-slide滚动项 宽度只适应（不是全屏）设置方法。
千叶祥龙
11-05 4957
1、效果图： （1）、html部分代码： {{item.name}} （2）、ts控制部分代码： 先通过angularjs核心库和ionic-angular组件库分贝引入VidewChild模块和Slides组件。如图： import {Component, ViewChild} from '@angul
ionic-tabbed-slide-box:离子选项卡式滑盖盒
05-25
离子选项卡式幻灯片框 的完整克隆 ，此存储库是出于凉亭目的而制作的。 该组件是包装。 这将在幻灯片框的顶部包含选项...var app = angular.module('slidebox', ['ionic', 'tabSlideBox']); 在模板中添加html <
ionic3 <ion-slides>不同slide高度，自动计算
ktutu的博客
01-18 2461
ionic的ion-slides一直有不同slide的高度为最大slide的高度的问题。 如果遇到 page1：height：1400px page2：height：932px， 两个页面的高度都会是1400px。 现在需要不同页面的高度从新计算， 我的解决方式如下 import { ViewChild } from '@angular/core'; import { Slide
ionic ion-slide-box
菠菜盼娣
11-26 130
此功能可以实现左右滑动显示请求的数据 &amp;lt;ion-slide-box on-slide-changed=&quot;slideHasChanged($index)&quot; &amp;gt; &amp;lt;ion-slide ng-repeat=&quot;me in messages&quot;&amp;gt; &amp;lt;div class={{me.color}} class=&quot;box&
IONIC----12.slide2
Damys
08-05 363
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height"><script src="./lib/js/ionic
IONIC----14.slide4
Damys
08-09 402
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height"> <script src="./lib/js/ioni
IONIC----15.slide5
Damys
08-10 592
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height"><script src="./lib/js/ionic
IONIC----06.menu-tab
Damys
07-26 719
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height"><script src="./lib/js/ionic
IONIC----11.slide1
Damys
08-04 324
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height"><script src="./lib/js/ionic
解决Ionic的ion-slide-box 2条数据渲染问题
青
01-06 2324
当slider数据列表是动态获取时，如果数据结果只有2条数据时，slider列表会多复制俩个，通过下面的slideChange方法做个判断可以解决这个bug第一步：添加slideChande方法<ion-slide-box auto-play="true" does-continue="true" slide-interval="3000" on-slide-changed="slideChange
ionic3-components-master.zip
12-03
《Ionic 3组件详解》 在移动应用开发领域，Ionic框架以其强大的跨平台能力和美观的用户界面设计，深受开发者喜爱。特别是Ionic 3版本，它在2的基础上进行了优化和改进，提供了更稳定、高效的开发环境。本文将深入...
ionicSlideboxExample:Ionic Frameworks 的 ion-slide-box AngularJS 指令示例
07-04
在本文中，我们将深入探讨Ionic Framework中的`ion-slide-box`指令，这是一个强大的组件，用于创建滑动内容区域，常用于创建轮播、教程或产品展示等。`ion-slide-box`是基于AngularJS的一个指令，它使得在移动应用中...
ionic-gestures:使用ionic内置手势的例子
06-27
在上面的示例中，我们创建了一个名为 `slide` 的滑动手势，监听 `slide-element` 元素，当用户在水平方向上滑动时，`onMove` 回调会被调用，滑动结束时调用 `onEnd` 回调。 对于其他手势，如捏合、旋转等，可以通过...
ionic-samples:一些离子代码的样本以供参考
05-05
例如，`<ion-item>`用于创建列表项，`<ion-input>`用于输入框，`<ion-slide>`用于创建滑动效果，而`<ion-grid>`和`<ion-row>`、`<ion-col>`则用于布局设计。通过这些组件，开发者可以构建出符合移动设备用户体验的...
IONIC----02.ionicBackdrop
Damys
07-11 1069
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height"><script src="./lib/js/ionic
IONIC----05.ionicPopover
Damys
07-25 1059
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height"><script src="./lib/js/ionic
IONIC----01.ionicActionSheet
Damys
07-08 844
ionicActionSheet
IONIC----04.ionicModal
Damys
07-18 561
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height"><script src="./lib/js/ionic
安装ionic-ios
最新发布
09-10
ionic start myApp blank --type=ionic-angular ``` - 进入项目目录： ``` cd myApp ``` - 添加iOS平台支持： ``` ionic platform add ios ``` 5. 使用Xcode打开项目并运行： - 打开Xcode，选择“Open ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值