ionic使用（二）：顶部、底部导航及返回顶部或底部

来源：互联网发布：尚学堂大数据视频下载编辑：程序博客网时间：2024/05/21 18:48

1、demo.html

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">    <title></title>    <link href="lib/ionic/css/ionic.css" rel="stylesheet">    <link href="css/style.css" rel="stylesheet">    <!-- IF using Sass (run gulp sass first), then remove the CSS include above    <link href="css/ionic.app.css" rel="stylesheet">    -->    <!-- ionic/angularjs js -->    <script src="lib/ionic/js/ionic.bundle.js"></script>    <!-- cordova script (this will be a 404 during development) -->    <script src="cordova.js"></script>    <!-- your app's js -->    <script src="js/app.js"></script>  </head>  <body ng-app="starter" ng-controller="ctrl">    <!-- <div class="bar bar-header bar-positive">      <h1 class="title">顶部导航</h1>    </div>     -->    <ion-header-bar class="bar-positive">      <h1 class="title">title</h1>    </ion-header-bar>     <ion-content>      <ul class="list">        <li class="item">春1</li>        <li class="item">夏</li>        <li class="item">秋</li>        <li class="item">秋</li>        <li class="item">秋</li>        <li class="item">秋</li>        <li class="item">秋</li>        <li class="item">秋</li>        <li class="item">秋</li>        <li class="item">秋</li>        <li class="item">秋</li>        <li class="item">秋</li>        <li class="item">秋</li>        <li class="item">秋</li>        <li class="item">冬9</li>      </ul>   </ion-content>    <ion-footer-bar class="bar-royal">    <button class="button" ng-click="top()">top</button>      <h1 class="title">footer</h1>    <button class="button" ng-click="bottom()">bottom</button>    </ion-footer-bar>    </body>  <script>    angular.module('starter',['ionic'])    .controller('ctrl',function ($scope,$ionicScrollDelegate) {        $scope.top=function () {          $ionicScrollDelegate.scrollTop(true);        }         $scope.bottom=function () {          $ionicScrollDelegate.scrollBottom(true);        }    });  </script></html>

2、访问后如下：

这里写图片描述

阅读全文

0 0