<!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>tabs</title> <link href="lib/css/ionic.css" rel="stylesheet"> <style> img{ width: 100%; height: auto; } .slider-pager .slider-pager-page{ color:#fff; } </style> <script src="lib/js/ionic.bundle.js"></script> <script> var myapp=angular.module("myapp",["ionic"]); myapp.controller("myCtrl",function ($scope,$http) { $http({ url:"data.json" }).then(function (data) { console.log(data) $scope.data=data.data; console.log( $scope.data); }) }) </script> </head> <body ng-app="myapp"> <ion-tabs class="tabs-positive tabs-icon-top"> <ion-tab title="首页" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline" ng-controller="myCtrl"> <!-- 标签 1 内容 --> <ion-header-bar align-title="center" class="bar-positive"> <div class="buttons"> <button class="button" ng-click="doSomething()">左侧按钮</button> </div> <h1 class="title">欢迎你!</h1> <div class="buttons"> <button class="button">右侧按钮</button> </div> </ion-header-bar> <ion-content> <ion-slide-box auto-play="true" does-continue="true" slide-interval="2500"> <ion-slide> <div class="box blue"><img src="img/community_02.jpg"></div> </ion-slide> <ion-slide> <div class="box yellow"><img src="img/community_04.jpg"></div> </ion-slide> <ion-slide> <div class="box pink"><img src="img/community_06.jpg"> </div> </ion-slide> </ion-slide-box> <ion-list> <ion-item ng-repeat="item in data"> <h2>{{item.title}}</h2> <img ng-src="{{item.pic}}"> <p>{{item.text}}</p> </ion-item> </ion-list> </ion-content> </ion-tab> <ion-tab title="关于" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline"> <!-- 标签 2 内容 --> <p>这个是第二个选项卡</p> </ion-tab> <ion-tab title="设置" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline"> <!-- 标签 3 内容 --> <p>这个是第三个选项卡</p> </ion-tab> </ion-tabs> </body> </html>
ionic+做了一个头布尾+自动轮播图+最下面做了一个tab可以进行页面切换
最新推荐文章于 2020-07-06 16:07:06 发布