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

最新推荐文章于 2020-05-25 18:13:40 发布
最新推荐文章于 2020-05-25 18:13:40 发布
阅读量675 收藏
点赞数
版权声明：本文为博主原创文章，遵循 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
    评论
ionic2长列表返回顶端控件的一个简单实现
kingbaron的博客
07-07 1703
简介ionic2有组件可以让我们方便的实现移动端的分页查询逻辑（上拉加载更多操作）。可是在列表很长的时候，我们还需要一个可以快速返回列表顶部的空间。
ionic点击回到顶部
菠菜盼娣
11-26 301
$ionicScrollDelegate $ionicScrollDelegate.scrollTop();
ionic 视图滚动到顶部
weixin_34349320的博客
12-09 106
问题描述 进入页面, 滚动到底部 点击一个连接, 当前视图内容更新了 内容滚动到了上次的位置导致底部的内容没显示 需要控制自动回滚到顶部 &lt;ion-content delegate-handle="dashboard"&gt; ...... &lt;/ion-content&gt; $timeout(function(){ $ionicScrollDelegate.$getB...
ionic 的fab按钮和回到顶部的方法
凉快
05-07 666
秉着革命是块砖，哪里需要哪里搬的原则，我又来到前端的这块土地。 提出的功能是：希望列表下拉太多时，能有一个按钮一直悬浮，同时点击就会回到界面顶部。 分步解决： 1. 首先找到一个可以一直悬浮的按钮，ionic官方就给提供了，他就是fab。官方传送门 比较重要的属性就是： 一个是水平位置，一个是垂直位置（这里的位置是大致位置）。 由于之前界面已经存在一个fab按钮，所以我...
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
ionic-framework-master.zip
08-06
ionic-framework-master
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返回顶部
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轴...
Web开发学习笔记:Ionic4中根据滚动条滚动的距离设置返回顶部按钮显示与隐藏
JustWantToFly的博客
12-09 715
以下代码使用IDE:vscode; 语言模式:TypeScript 1.在HTML页 中使用悬浮按钮当做返回顶部的按钮,并绑定ion-content的ionScroll事件 <ion-content padding (ionScroll)="ionScroll()" scroll-events='true' id='Content' > <!-- slot="fixe...
Ionic4—回到顶部功能
雷雨天的雷胖子
11-29 579
如果ViewChild提示需要两个参数，则修改如下代码所示。 @ViewChild(IonContent, {static: true}) content: IonContent;
点击返回顶部
M_SSY的博客
05-29 480
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; .box { width: 200px; heigh
js实现回到顶部
蒲小若的博客
08-22 225
.toTop{ display: none; position: fixed; width: 80px; height: 60px; line-height: 60px; text-align: center; right: 50px; bottom: 100px; border: 1px solid #000000;
ionic使用（二）：顶部、底部导航及返回顶部或底部
07-06 493
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中的返回按钮--$ionicHistory
weixin_33895604的博客
06-12 276
2019独角兽企业重金招聘Python工程师标准>>> ...
ionic3二级页面tabs菜单、修改返回按钮
qq_38904099的博客
06-15 809
首先 我们找到 app.module.ts 修改下面代码然后呢，更改下面的
ionic 返回首页
weixin_34363171的博客
05-11 239
2019独角兽企业重金招聘Python工程师标准>>> ...
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、付费专栏及课程。

余额充值