AngularJS+页面切换+侧滑

最新推荐文章于 2021-06-05 05:18:02 发布
最新推荐文章于 2021-06-05 05:18:02 发布
阅读量1.4k 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Logitech12/article/details/78315064
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0 auto;
        }
        body{
            position: relative;
        }
        .ul1{
            width: 320px;
            height: 70px;
            border: solid 1px #000;
            margin-bottom: 20px;
        }
        p{
            display: inline-block;
            line-height: 40px;
            float: left;
            padding: 20px;
        }
        .cont{
            width: 800px;
            height: 200px;
            border: solid 1px #000;
        }
        li{
            list-style: none;
            line-height: 40px;
        }
    </style>
    <script src="angular-1.5.5/angular.min.js"></script>
    <script src="angular-1.5.5/angular-route.min.js"></script>
    <script>
        var app = angular.module("myapp",[]);
        app.controller("mycont",function ($scope) {
            $scope.goods = function () {
                $scope.show1 = true;
                $scope.show2 = false;
                $scope.show3 = false;
            }
            $scope.user = function () {
                $scope.show2 = true;
                $scope.show1 = false;
                $scope.show3 = false;
            }
            $scope.address = function () {
                $scope.show3 = true;
                $scope.show1 = false;
                $scope.show2 = false;
            }
        })
    </script>
</head>
<body ng-app="myapp" ng-controller="mycont">
    <div class="ul1">
        <p ng-click="goods()">商品列表</p>
        <p ng-click="user()">用户信息</p>
        <p ng-click="address()">地址信息</p>
    </div>
    <div class="cont" ng-show="show1">
        <ul>
            <li>外星人电脑</li>
            <li>联想电脑</li>
            <li>华硕电脑</li>
            <li>神州笔记本</li>
        </ul>
    </div>
    <div class="cont" ng-show="show2">
        <ul>
            <li>张三</li>
            <li>李四</li>
            <li>王五</li>
            <li>赵六</li>
        </ul>
    </div>
    <div class="cont" ng-show="show3">
        <ul>
            <li>上地一街</li>
            <li>上地二街</li>
            <li>上地三街</li>
            <li>上地四街</li>
        </ul>
    </div>
</body>
</html>




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ionic</title>
    <style>
        .bar-positive{
            float: left;
        }
        img{
            float: right;
        }
    </style>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <script src="angular-1.5.5/angular.min.js"></script>
    <link rel="stylesheet" href="lib/css/ionic.min.css">
    <script src="lib/js/ionic.bundle.min.js"></script>
    <script>
        var app = angular.module('myapp', ['ionic']);
        app.controller("mycont",function ($scope) {

        })

    </script>
</head>
<body ng-app="myapp" ng-controller="mycont">
    <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-list>
            <ion-item>文件夹一<img src="a.png"></ion-item>
            <ion-item>文件夹二<img src="b.png"></ion-item>
            <ion-item>文件夹三<img src="a.png"></ion-item>
            <ion-item>文件夹四<img src="b.png"></ion-item>
            <ion-item>文件夹五<img src="a.png"></ion-item>
            <ion-item>文件夹六<img src="b.png"></ion-item>
            <ion-item>文件夹七<img src="a.png"></ion-item>
            <ion-item>文件夹八<img src="b.png"></ion-item>
        </ion-list>
    </ion-content>
</body>
</html>




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>APP-侧滑</title>
    <script src="angular-1.5.5/angular.min.js"></script>
    <link rel="stylesheet" href="lib/css/ionic.min.css">
    <style>
        i{
            float: right;
        }
        .item{
            height: 65px;
            font-size: 20px;
        }
    </style>
    <script src="lib/js/ionic.bundle.min.js"></script>
    <script>
        var app = angular.module("myapp",["ionic"]);
        app.controller("mycont",function ($scope,$ionicSideMenuDelegate) {
            $scope.toggleLeft = function() {
                $ionicSideMenuDelegate.toggleLeft();
            };
        })
    </script>
</head>
<body ng-app="myapp">
    <ion-side-menus>
        <!-- 中间内容 -->
        <ion-side-menu-content ng-controller="mycont">
            <ion-header-bar align-title="center" class="bar-positive">
                <div class="buttons">
                    <button class="button" ng-click="toggleLeft()">三</button>
                </div>
                <h1 class="title">Silde me!</h1>
            </ion-header-bar>
            <ion-content>
                <h1>Content</h1>
            </ion-content>
        </ion-side-menu-content>
    
        <!-- 左侧菜单 -->
        <ion-side-menu side="left">
            <p style="text-align: center; height: 40px; line-height: 40px; font-size: 25px">left</p>
            <ion-list>
                <ion-item>item 0<i class="icon ion-chevron-right"></i></ion-item>
                <ion-item>item 1<i class="icon ion-chevron-right"></i></ion-item>
                <ion-item>item 2<i class="icon ion-chevron-right"></i></ion-item>
                <ion-item>item 3<i class="icon ion-chevron-right"></i></ion-item>
                <ion-item>item 4<i class="icon ion-chevron-right"></i></ion-item>
                <ion-item>item 5<i class="icon ion-chevron-right"></i></ion-item>
                <ion-item>item 6<i class="icon ion-chevron-right"></i></ion-item>
                <ion-item>item 7<i class="icon ion-chevron-right"></i></ion-item>
                <ion-item>item 8<i class="icon ion-chevron-right"></i></ion-item>
                <ion-item>item 9<i class="icon ion-chevron-right"></i></ion-item>
                <ion-item>item 10<i class="icon ion-chevron-right"></i></ion-item>
            </ion-list>
        </ion-side-menu>
    </ion-side-menus>
</body>
</html>




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>Title</title>
    <script src="angular-1.5.5/angular.min.js"></script>
    <script src="angular-1.5.5/angular-route.min.js"></script>
    <link rel="stylesheet" href="lib/css/ionic.min.css">
    <style>
        .bar .title{
            display: block;
            font-size: 20px;
        }
        .bar-header{
            height: 50px;
        }
        ion-item:first-child{
            margin-top: 50px;
        }
        .ion-ios-arrow-right{
            float: right;
        }
        .div{
            width: 33.33%;
            text-align: center;
        }
        i{
            font-size: 40px;
        }
        .bar-footer{
            height: 70px;
        }
    </style>
    <script src="lib/js/ionic.bundle.min.js"></script>
    <script>
        var app = angular.module("myapp",["ionic"]);
    </script>
</head>
<body ng-app="myapp" ng-controller="mycont">
    <ion-header-bar align-title="center">
        <h1 class="title">Chats</h1>
    </ion-header-bar>
    <ion-content>
        <ion-list>
            <ion-item class="item-avatar"><img src="img/a.jpg">Ben Sparrow<i class="ion-ios-arrow-right"></i></ion-item>
            <ion-item class="item-avatar"><img src="img/b.jpg">Max Lynx<i class="ion-ios-arrow-right"></i></ion-item>
            <ion-item class="item-avatar"><img src="img/c.jpg">Adam Bradleyson<i class="ion-ios-arrow-right"></i></ion-item>
            <ion-item class="item-avatar"><img src="img/d.jpg">Peyyy Governor<i class="ion-ios-arrow-right"></i></ion-item>
            <ion-item class="item-avatar"><img src="img/a.jpg">Mike Harrinqton<i class="ion-ios-arrow-right"></i></ion-item>
        </ion-list>
    </ion-content>
    <ion-footer-bar align-title="left">
        <div class="div">
            <i class="ion-ios-pulse-strong"></i>
            <p>status</p>
        </div>
        <div class="div">
            <i class="ion-chatboxes"></i>
            <p>Chats</p>
        </div>
        <div class="div">
            <i class="ion-gear-a"></i>
            <p>Account</p>
        </div>
    </ion-footer-bar>
</body>
</html>
Logitech12
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
angularJS的页面加载切换效果
01-01
angularJS的页面加载切换效果。实现各路由页面加载的时候出现动画。
angularJs自定义实现侧滑指令
martsforever的博客
06-29 785
老样纸，先上图：先上代码：html模板代码：&lt;div class="slide-item-wrapper"&gt; &lt;div class="slide-item" ref="slide"&gt; &lt;div class="content" ref="content"&gt;
angular框架中html画面跳转,AngularJS页面切换问题
weixin_30873333的博客
06-05 308
刚开始学习，想用angular+ionic写一个页面切换的效果。点击page1中的一个图片，页面切换为page2。因为页面太多不想写那么多html，所以使用ng-show。代码如下：html： js:var bindDevice = angular.module('bind',['ionic']);bindDevice.controll...
AngularJs轻松入门（七）多视图切换
weixin_34203426的博客
05-04 146
在AngularJs应用中，我们可以將html碎片写在一个单独的文件中，然后在其他页面中將该段碎片加载进来。如果有多个碎片文件，我们还可以在控制器中根据用户的操作动态的加载不同的碎片，从而达到切换视图的效果。 先来看看笔者写好的一个案例吧： 这两首词实际上是两个html碎片，分别写在page1.html和page2.html。下面是这两个文件的内容： <!-...
angular1 + jquery实现仿饿了么滚动切换菜单功能
u010172505的专栏
10-17 1549
jq实现仿饿了么滑动切换菜单
AngularJs-zhrb:用angular+ionic仿知乎日报
05-19
在"AngularJs-zhrb"这个项目中，开发者使用AngularJS作为后端数据处理和页面逻辑控制的主要工具，而Ionic则负责构建用户界面和提供移动设备的适配功能。通过集成这两者，实现了类似知乎日报的APP功能，包括新闻浏览...
myTodoApp:使用 AngularJS 和 Ionic 的简单 Todo 应用程序
06-03
4. **状态管理**：可能包括完成/未完成状态切换，使用 AngularJS 的表达式和方法实现。 5. **本地存储**：为了持久化数据，应用可能会使用 AngularJS 的 $localStroage 服务或 Ionic 的 Storage 模块。 6. **路由*...
formula1-racing-result
05-11
3. 路由和导航：Ionic内置的NavController管理页面间的导航，使得在查看不同赛段或车手成绩时能流畅切换。 项目中的控制器、服务和自定义指令是实现特定业务逻辑的关键。控制器是AngularJS中的一个概念，用于处理...
2015-ThatConference-Ionic-Presentation:2015年那届大会的离子演示和代码-不是离子吗？
05-16
2. 动画和过渡效果：Ionic支持CSS3动画和过渡，使得页面切换更加流畅，提升用户体验。 3. 数据管理：通过AngularJS的$resource和$http服务，可以方便地进行AJAX请求，与服务器进行数据交互。 4. 跨平台兼容性：Ionic...
OnsenUI-router:带有ui-router的OnsenUI示例应用程序
05-25
`<ons-navigator>`用于实现页面间的推送和弹出效果，而`<ons-tabbar>`则用于创建底部标签栏，便于在多个页面间切换。在ui-router中，这些组件可以与`ui-sref`指令一起使用，根据路由导航。 5. **嵌套路由**：ui-...
手机网页版angularjs上拉加载下拉刷新，左滑右滑
12-27
单页网页版angular手机应用，angular 结合 ng-infinite-scroll上拉加载数据，angular 结合 angular-pull-to-refresh下拉刷新新数据，angular 结合 swiper左滑右滑操作
angularJS自定义指令——N个DIV左右滑动
牟云飞的博客
12-24 1123
angularJS自定义指令——N个DIV左右滑动 效果： 应用：   示例代码 .swipe-container { width: 100%; height: 100%; overflow: hidden; position: relative; } .swipe-container .swipe-wrapper { width:...
angular跳转指定页面_如何使用AngularJS重定向到另一个页面？
weixin_39912250的博客
12-22 789
I am using ajax call to perform functionality in a service file and if the response is successful, I want to redirect the page to another url. Currently, I am doing this by using simple js "window.loc...
html5_ionic路由+侧滑栏
Android___vv的博客
10-20 609
路由-标签切换             var app = angular.module("myApp", ["ionic"]);         app.config(function ($stateProvider, $urlRouterProvider) {             $stateProvider.state("home", {              
AngularJS通过$location获取及改变当前页面的URL
沈斯明技术博客
03-02 6624
本文中获取与修改的URL以 ‘http://172.16.0.88:8100/#/homePage?id=10&a=100' 这个路径为例: 一. 获取url的相关方法（不修改URL）: 1.获取当前完整的url路径   ? 1 2 var absurl = $location.absUrl(); /
angular ionic 侧滑
xiaozhang0414的博客
12-15 244
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/ionic.bundle.min.js" type="text/javascript" charset="utf-8"></script> <link rel
ionic的侧滑和下拉刷新效果
热门推荐
superjunjin的专栏
04-03 4万+
一，侧滑效果 主要涉及到三个地方 1，菜单页面 主要分为主页面和侧滑页面两部分，又分别都包含顶部bar和主要内容部分 注意：主页面内容部分，关键的菜单内容name要对应到是菜单内容的页面（在app.js中，下面会贴出）           item href的构成：1，#本页面  2，app本页面链接   3，todolist/{{menu.groupId}}列表页面链接（没有冒号）
angularJs实现动态控制侧边栏菜单
砂糖葫芦娃的博客
12-16 6832
应项目的不同所以菜单的层级也不固定，所以在这里我写了5层菜单，哈哈。首先是html代码。//菜单html代码<ul class="page-sidebar-menu"> <li ng-repeat="menu in menus"> <a ui-sref={{menu.router}} style="cursor: pointer" ng-click="getMenuName
angularjs中切换显示/隐藏
sinat_36944265的博客
12-19 3644
应用列表 aa aa aa
js+html5实现侧滑页面效果
最新发布
07-01
要实现侧滑页面效果，你可以使用...这是一个简单的示例，可以让页面1和页面2在水平方向上进行侧滑。你可以根据自己的需求进行样式和交互的定制。记得在实际项目中做一些额外的处理，例如处理边界情况和动画效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值