ionic轮播

来源：互联网发布：淘宝买家秀活动规则编辑：程序博客网时间：2024/06/08 14:30
<!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>
阅读全文
0 0