javascript - ionic怎样定位一个html元素?
PHP中文网
PHP中文网 2017-04-11 13:22:15
[JavaScript讨论组]

需要在页面的右下角放一个“返回顶部”的按键。

但页面的调试是不确定的。

用fixed定位后,并不能实现浮动的效果。

页面的调试是不确定的,会随着上拉后加载更多。

应该怎样定位一个“返回顶部”的按键?

PHP中文网
PHP中文网

认证高级PHP讲师

全部回复(3)
阿神

翻了各个手机应用,还没有发现哪个手机应用有使用显示出“返回顶部”的设计的。

微信朋友圈是双击最上边可以返回顶部,当然这就不会涉及到定位元素的问题。

我现在使用的方案是:
1.元素设置为:

position: fixed;top:{{hh}}px;right:1.5rem;z-index: 99;

在pc浏览器定位的时候是一般用bottom,用top的话就需要监听滚动条,动态设置top了。

2.控制器中获取滚动条的高度:(监听的事件是:on-drag)

$scope.showtp=function(){
    var h=$ionicScrollDelegate.getScrollPosition();
    var wh=0.75*window.innerHeight;
    $scope.hh=h.top+wh;
    $scope.wh=wh*2;
}

3.html 最终是这样的:

<p style="font-size: 2rem;position: fixed;top:{{hh}}px;right:1.5rem;z-index: 99;border:1px solid #999;border-radius: 50%;padding:0 0.4rem;" ng-show="hh>wh"><i class="ion-android-arrow-up" ng-click="totop()" style="color:#999;"></i></p>

现在就做到这样,能用是通用,但不够理解。
当你上下滑动后放手时,滚动条会自动滑动,这里不知监听什么事件好; 所以现在的情况是放手后“返回顶部“的图标可能跑到中间或者是不见了,而不能一直定位到右下角。

更新:
其实有个更为简单的方法:
就是把要定位的html元素放到<ion-content>外边来,用fixed定定位就可以了。
如果放到<ion-content>里面的话,就会像我上面那样比较麻烦。

ringa_lee

把元素设置为绝对定位不就好了么

伊谢尔伦

第一点你的返回按钮不能放在

ion-content

里面,不然在页面滑动的时候会跟着滑动。并且fixed不起作用。

所以放在ion-contention-view

另外,返回顶部用$ionicScrollDelegate.$getByHandle(handle).anchorScroll()
或者 $ionicScrollDelegate.$getByHandle(handle).scrollTop();

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号