ionic-----布局 返回顶部

最新推荐文章于 2020-05-25 18:13:40 发布
最新推荐文章于 2020-05-25 18:13:40 发布
阅读量676 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Guiyide/article/details/79068487
版权
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
        <link rel="stylesheet" href="css/ionic.css" />
        <script type="text/javascript" src="js/ionic.bundle.min.js" ></script>
        <script>
            var app = angular.module("myApp",["ionic"]);
            app.controller("myCtrl",function($scope,$ionicScrollDelegate){
                $scope.scrollToTop = function(){
                    $ionicScrollDelegate.scrollTop();
                }
                
                $scope.aclick = function(){
                    alert("您点击了 A按钮");
                }
            });
        </script>
        
    </head>
    <body ng-app="myApp" ng-controller="myCtrl">
        <ion-header-bar align-title="center" class="bar-positive">
            <div class="buttons">
                <button class="button" ng-click="aclick();">A按钮</button>
            </div>
            <h1 class="title">1511k--ionic案例</h1>
            <div class="buttons">
                <button class="button" >B按钮</button>
            </div>
            
        </ion-header-bar>
        <ion-content>
            我是内容部分
            <div>
                    <a href="http://www.baidu.com">百度</a><br />
                    <a href="http://www.taobao.com">淘宝</a><br />
                    <a href="http://www.jd.com">京东</a><br />
                </div>
            <pre>
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                BBBBBB
                
                
                
                
                
                
                
                
                
                
                
                cccccc
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                dddd
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                <button ng-click="scrollToTop();">滚动到顶部</button>
            </pre>
        </ion-content>
        
        
        <ion-footer-bar align-title="center" class="bar-positive">
            <div class="buttons">
                <button class="button">C按钮</button>
            </div>
            <h1 class="title">我是底部</h1>
            <div class="buttons">
                <button class="button" >D按钮</button>
            </div>
            
        </ion-footer-bar>
    </body>

</html>














Guiyide
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ionic-framework-master.zip
08-06
ionic-framework-master
ionic中如何隐藏头部的返回按钮
涂涂
07-26 1145
方法两种： 1. hideBackButton="true" hideBackButton="true"> 我的 2. .button-inner{ display: none !important; }
ionic2长列表返回顶端控件的一个简单实现
kingbaron的博客
07-07 1704
简介ionic2有组件可以让我们方便的实现移动端的分页查询逻辑（上拉加载更多操作）。可是在列表很长的时候，我们还需要一个可以快速返回列表顶部的空间。
ionic中的返回按钮--$ionicHistory
weixin_33895604的博客
06-12 276
2019独角兽企业重金招聘Python工程师标准>>> ...
ionic3二级页面tabs菜单、修改返回按钮
qq_38904099的博客
06-15 811
首先 我们找到 app.module.ts 修改下面代码然后呢，更改下面的
ionic3监听滚动事件回到顶部
qq_37012533的博客
05-25 369
<ion-content scrollEvents="true" (ionScroll)="onScroll($event)"> scrollEvents="true"必须加，否则不生效。 topTimer = null; onScroll(event){ this.topTimer && clearTimeout(this.topTimer); this.topTimer = setTimeout(function(){ event.detai
ionic3实现三种回顶部操作
qq993284758的博客
11-09 5362
第一种： 用id获取模板中content中最高的那个元素，给元素设置id： id="topest" 然后触发方法： toView(){ let element = document.getElementById("topest"); if(element){ element.scrollIntoView(); } 这也就是我们常说的锚点，这种方法是直接...
ionic使用（二）：顶部、底部导航及返回顶部或底部
07-06 494
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>
ionic返回顶部
qq_38990521的博客
05-27 599
1、引入content模块：import { content } from "ionic-angular";2、实例化：@ViewChild （Content）content:Content ;//括号内是页面内容哪一个部分， 第二个content为名字，第三个为实例化的模块；3、用法：this.content.scrollTo(0,0,3000);第一个和第二个分别是需要到达页面模块的x轴与y轴...
ionic-emoji-picker：适用于Ionic 3的Emoji选择器
02-05
离子3表情符号选择器该项目是由创建的 项目安装通过NPM安装模块npm i ionic-emoji-picker --save将其导入到您应用的模块中在应用程序的主模块中导入EmojiPickerModule.forRoot() app.module.ts import { ...
ionic-datepicker-oysq
06-02
这是一个封装好的ionic日期选择器，下载解压，点击date.html即可查看效果。
ionic-stepper:离子ionic2的步进器组件
05-02
入门先决条件ionic-angular: ^3.x @angular/animations: ^4.x正在安装$ npm install ionic-stepper# or$ yarn add ionic-stepper用法导入your-root.module.ts import { BrowserModule } from '@angular/platform-...
cordova-plugin-ionic-webview:用于Cordova的Web View插件，专门用于Ionic应用程序
05-04
注意：此存储库及其文档适用于cordova-plugin-ionic-webview @ 5.x ，它使用的新功能可能不适用于所有应用程序。 请参阅和 2.x文档可以在找到。 :open_book: 文档： : :megaphone: 支持/问题？ 有关常规支持...
ionic回到页面顶部
zyf_baby的博客
08-17 1140
在带有tab选项卡的列表页，点击不同的tab需要回到顶部，此时会发现用scrollTo(0,0)不起效果 1.原因：dom元素中有fixed,absolute, 此时scroll失效， 2.解决办法： html:  给ion-content 加上delegate-handle="toTop" ，属性名字随便起 js:注入$ionicScrollDelegate, 点击tab时加上$io
Ionic 顶部贴附效果的实现
待花开花谢的博客
09-03 3748
当我们在实际应用开发中会遇到这样的一个问题：在我们进行页面滚动的时候需要将页面顶部或者页面中部的筛选栏不会随着内容的滚动而消失，而是当筛选栏的位置到达顶部的时候就固定在顶部，这样即使页面内容滚动到了底部，我们依旧可以点击处于页面顶部或中部的筛选栏进行筛选。为了解决这样的问题，我们可以采用ion-affix的方法对它进行贴附。 首先我们需要在index.html中引入 script src="h
Ionic4—回到顶部功能
雷雨天的雷胖子
11-29 579
如果ViewChild提示需要两个参数，则修改如下代码所示。 @ViewChild(IonContent, {static: true}) content: IonContent;
ionic/angular 滚动到顶部
weixin_33922672的博客
12-05 325
ionic/angular 滚动到顶部 1、ionic滚动到顶部 ionic使用 ionicScrollDelegate 服务 ionicScrollDelegate的详细用法：www.ionic.wang/js_doc-inde…. $scope.gotop = function(){ //页面里的ion-scroll或ion-content都...
Angularjs 回到顶部指令
timeless的博客
01-22 5419
#gotoTop {         display: none;         position: fixed;         top: 80%;         left: 90%;         cursor: pointer;         padding: 4px 4px;         width: 50px;         border: 1px soli
SecondactivityMainActivity.java
最新发布
06-24
SecondactivityMainActivity.java
ionic-vue打包apk
10-11
要打包 Ionic-Vue 应用程序的 APK，需要遵循以下步骤： 1. 在项目根目录下执行以下命令安装 Cordova-Android 插件：`npm install cordova-android@8.1.0 --save-dev` 2. 添加 Android 平台：`ionic capacitor add ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值