ionic轮播

最新推荐文章于 2021-04-11 09:40:43 发布
最新推荐文章于 2021-04-11 09:40:43 发布
阅读量170 收藏
点赞数
分类专栏： Web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gh323093/article/details/78576067
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
    <link href="../ionic_jiabao/css/ionic.min.css" rel="stylesheet">
    <script src="../ionic_jiabao/js/ionic.bundle.min.js"></script>
    <style>
        .blue{
            width: 500px;
            height: 500px;
            margin: 0 auto;
            background: #FF6600;
        }
        .yuell{
            width: 500px;
            height: 500px;
            margin: 0 auto;
            background: #0EA9B1;
        }
        .pink{
            width: 500px;
            height: 500px;
            margin: 0 auto;
            background: black;
        }
    </style>
    <script>
        angular.module("myapp",['ionic']).controller("demo",function ($scope) {
            $scope.myActiveSlide = 1;
        })
    </script>
</head>
<body ng-app="myapp" ng-controller="demo" animation="slide-left-right-ios7">

<ion-slide-box active-slide="myActiveSlide">
    <ion-slide>
        <div class="box blue"><h1>孔曰成仁，孟曰取义，唯其义尽，所以仁至。读圣贤书，所学何事？而今而后，庶几无愧。
        </h1></div>
    </ion-slide>
    <ion-slide>
        <div class="box yuell"><h1>没见过什么大世面，一生只爱一张脸。</h1></div>
    </ion-slide>
    <ion-slide>
        <div class="box pink"><h1 style="color: #fff">这个世界上多的是南辕北辙，少的是殊途同归。</h1></div>
    </ion-slide>

    </ion-slide-box>

</body>
</html>


第二个界面切换

<!DOCTYPE html>
<html ng-app="ionic">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
    <script src="../ionic_jiabao/js/ionic.bundle.min.js"></script>
    <link rel="stylesheet" href="../ionic_jiabao/css/ionic.min.css">
</head>
<body>
<ion-tabs class="tabs-positive tabs-icon-top">

    <ion-tab title="新闻" icon-on="ion-xbox" >
        <ion-view>
            <ion-header-bar class="bar-positive">
                <h1 class="title">新闻首页</h1>
            </ion-header-bar>
            <ion-content>
                <a class="item item-thumbnail-left" href="#">
                    <img src="img/07.jpeg" width="100px">
                    <h2 style="color: #0c63ee">朝鲜警告美军三航母在半岛附近军演 或引发核战争</h2>
                    <p style="color: #b2b2b2">新浪 2017年11月15日 11:00</p>
                    <p style="color: #999999">海军官员称一支由三个...</p>
                </a>
                <a class="item item-thumbnail-left" href="#">
                    <img src="img/07.jpeg" width="100px">
                    <h2 style="color: #0c63ee">朝鲜警告美军三航母在半岛附近军演 或引发核战争</h2>
                    <p style="color: #b2b2b2">新浪 2017年11月15日 11:00</p>
                    <p style="color: #999999">海军官员称一支由三个...</p>
                </a>
            </ion-content>
        </ion-view>
    </ion-tab>

    <ion-tab title="歌曲" icon-off="ion-music-note">
        <ion-view>
            <ion-header-bar  class="bar-positive">
                <h1 class="title">歌曲</h1>
            </ion-header-bar>
            <ion-content>
                <p>about content</p>
            </ion-content>
        </ion-view>
    </ion-tab>

    <ion-tab title="个人信息" icon-off="ion-home">
        <ion-view>
            <ion-header-bar  class="bar-positive">
                <h1 class="title">个人信息</h1>
            </ion-header-bar>
            <ion-content>
                <p>settings content</p>
            </ion-content>
        </ion-view>
    </ion-tab>

</ion-tabs>
</body>
</html>


第三个复选框
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>Title</title>
    <link rel="stylesheet" href="../ionic_jiabao/css/ionic.css">
    <script src="../ionic_jiabao/js/ionic.bundle.min.js"></script>
</head>
<body>
<div class="bar bar-header">
    <div class="h1 title">复选框</div>
</div>

<div class="content has-header">
    <ul class="list">
        <li class="item item-checkbox">
            <label class="checkbox">
                <input type="checkbox" checked="">
            </label>
            陈庆之
        </li>
        <li class="item item-checkbox">
            <label class="checkbox">
                <input type="checkbox" checked="">
            </label>
            卫青
        </li>
        <li class="item item-checkbox">
            <label class="checkbox">
                <input type="checkbox" checked="">
            </label>
            霍去病
        </li>
        <li class="item item-checkbox">
            <label class="checkbox">
                <input type="checkbox" checked="">
            </label>
            赵破奴
        </li>
        <li class="item item-checkbox">
            <label class="checkbox">
                <input type="checkbox" checked="">
            </label>
            李广
        </li>
        <li class="item item-checkbox">
            <label class="checkbox">
                <input type="checkbox" checked="">
            </label>
            白起
        </li>
        <li class="item item-checkbox">
            <label class="checkbox">
                <input type="checkbox" checked="">
            </label>
        </li>
    </ul>
</div>
</body>
</html>


gh323093
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ionic实现轮播图效果
小红红的博客
11-09 1万+
ionic 的js有一个自带的滑动框效果，可以实现手机端，类似于淘宝顶部的轮播图效果，向左滑动上一张、向右下一张。does-continue="true" 表示自动滑动，slide-interval=2000 表示等待2000毫秒开始滑动 预览效果： 代码如下：
ionic图片轮播
04-07
ionic 图片轮播
ionic实现轮播
xy8199的博客
10-18 1461
H5混合式移动开发框架ionic，是使用angularJS的语法，加上大名鼎鼎的移动应用开发框架cordova的核心。它的特点是跨平台、入门简单、可以减少开发周期。实质上，ionic就是用制作网页的技术来开发移动app。 下面使用ionic中ion-slide-box实现移动app轮播特效。 一、基本结构 其基本结构就是用ion-slide-box标签包含若干个标签：
ionic5 轮播图
wmburst
07-06 305
slides 实现轮播图 slidesType = { effect: 'flip', speed: 400, loop:true, autoplay: { delay: 2000 } } <ion-slides pager="true" [options]="slidesType"> <ion-slide> 第一个 </ion-slide> <
ionic5中轮播图ion-slides、ion-slide的使用
u010574271的博客
04-11 1674
这里写目录标题参考文档准备新建页面图片准备简单轮播图实现实现自动轮播的功能定义参数界面上使用该参数自动轮播干扰时停止问题的解决定义名称#slide引入ViewChild获取slide对象实现点击结束自动轮播实现点击按钮上下轮播图切换 参考文档 对于轮播图的实现，我们可以参考https://ionicframework.com/docs/api/slides的相关文档，这里有 属性： 事件： 方法： 准备 新建页面 首先我们在项目中使用ionic g page slides命令来创建一个用于展示轮播图的页面
Ionic + Angular.js实现图片轮播的方法示例
10-19
本文将介绍如何使用Ionic框架结合Angular.js实现一个图片轮播功能。Ionic是一款基于Angular.js构建混合移动应用的框架，它提供了丰富的组件，包括图片轮播（ion-slides）。 首先，我们需要创建一个新的页面来承载...
IonicCarouselDemo:该存储库中有一个Ionic轮播演示
05-13
本文将深入探讨“IonicCarouselDemo”项目，它是一个基于 Ionic 的轮播演示，展示了如何在 Ionic 应用中实现动态、交互式的轮播效果。我们将围绕JavaScript编程语言，讲解该项目的核心知识点，并探讨其在实际开发中...
ionic学习记录总结
09-21
如果你的应用需要轮播图功能，可以考虑使用slick-carousel这个库。安装方法如下： ```bash npm install jquery --save npm install slick-carousel ``` **2. 安装videogular2：** 为了支持视频播放功能，可以使用...
解决ionic2/ionic3轮播图切换页面或者点击过后不自动轮图
zh296108631的博客
07-05 1043
我们在使用ionic2/ionic轮播图组件的时候，会出现切换页面或者点击手动滑动后，组件就不自动轮播了，那么我们需要解决此类问题需要做一下步骤需要先引用Viewchild模块，同时声明此sildesimport {Component, ViewChild } from '@angular/core';import {Slides} from 'ionic-angular';export clas...
ionic3学习笔记(六)--轮播图
Dan_2017
12-25 4936
下面是轮播图的实现 1，页面模板 <!-- 轮播: autoplay:2s之后开始轮播 loop:循环播放 pager:分页器（小圆点） pager=true --> 2，ts文件里对数据的初始化 // 初始化slides initSlides(){ this.slidesItems=
ionic实现动态轮播图
田成荣
01-20 1024
温馨提示 Ionic和angular在不断发展，项目也在不断更新迭代，此文档必然是有时效性的，继而温馨提示读者在使用此文档时，注意项目架构。如有变化，请持续更新此文档。 一.所需资源 Ionic4 二.集成具体步骤 2.html代码 &lt;ion-slide *ngFor="let option of data ; let i=index "&gt; &lt;ion-card...
ionic1 轮播图各种问题 解决方案
阿龙的博客
10-26 1737
ionic 轮播图组件大家一般都会用下面这个，这个组件存在的问题想必大家都是知道的。 on-slide-changed="slideHasChanged(index)"> class="box pink">PINK 普遍的bug问题我不说了 我遇到最变态的问题是 首页跳到详情再跳回来 轮播图惊奇的没了，然后手动更变浏览器大小又出来了，总之不管什么问
ionic3 Slides 给轮播加点击事件，准确获取图片下标
Lsy_kg
09-22 1345
ionic3 Slides 给轮播加点击事件，准确获取图片下标 直接给ion-slide加click事件，会出现某些图片点击事件无响应的情况，这是因为在loop=true的情况下，动态生成ion-slide元素，而你在模版里面写的click事件并没有加上。因此，考虑在ion-slides上加ionSlideTap事件，来替代在img上得click事件。获取真实下标的代码如下： import ...
ionic3中轮播组件 单个ion-slide滚动项 宽度只适应（不是全屏）设置方法。
千叶祥龙
11-05 4947
1、效果图： （1）、html部分代码： {{item.name}} （2）、ts控制部分代码： 先通过angularjs核心库和ionic-angular组件库分贝引入VidewChild模块和Slides组件。如图： import {Component, ViewChild} from '@angul
使用ionic中ion-slide-box实现移动app轮播特效
全栈软件工程师-陈征峰的博客
03-06 5522
使用ionic中ion-slide-box实现移动app轮播特效。
【前端】Ionic 4 轮播图自动播放功能
冯浩月
01-16 3378
前言     小编目前的项目需要将前端框架升级到ionic4，同时遇到了将广播消息进行轮播展示的功能需求，在ionic官网查找和博客的指引下，小编最终实现了这个功能效果。 HTML使用Ion-slides组件     具体使用如下 ，其中click事件写在了P标签中，ion-slide标签中不能响应click事件。   &lt;ion-slides pager &gt; &lt;...
ionic之ion-slide-box实现图片轮播
柠檬加冰
08-09 7492
实现效果我是代码html代码 <ion-slide-box on-slide-changed="slideHasChanged($index)" auto-play="true" does-continue="true" slide-interval=2000 show-pager="true" pager-click="pageClick(index)
精通Ionic 2：权威指南
"Mastering Ionic 2: The Definitive Guide 是一本由James Griffiths编写的，由SaintsatPlay Limited出版的关于Ionic 2框架的深入指南。这本书于2017年1月出版，旨在帮助读者从基础到高级逐步掌握Ionic 2，通过3个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值