ionic滑动

最新推荐文章于 2021-06-08 15:13:22 发布

墨明棋妙呀

最新推荐文章于 2021-06-08 15:13:22 发布

阅读量268

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Wangmengyao1115/article/details/78554985

本文介绍如何在Ionic框架中利用Angular模块实现页面内容的滚动功能，并演示了如何通过按钮点击使页面滚动回顶部。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<title></title>
<link rel="stylesheet" href="../ionic/css/ionic.css" />
<script type="text/javascript" src="../ionic/js/ionic.bundle.min.js" ></script>
<script>
var app = angular.module("myApp",['ionic']);
app.controller("myCtrl",function($scope,$ionicScrollDelegate){
$scope.name = "张三";
$scope.scrollTop = function(){
$ionicScrollDelegate.scrollTop();
};
});
</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="doSomething()">Left Button</button>
</div>
<h1 class="title">Title!</h1>
<div class="buttons">
<button class="button">Right Button</button>
</div>
</ion-header-bar>
<ion-content padding="true" scroll='true'>
Some content!
<pre>
最上

123

最下
<button ng-click="scrollTop()">滚动到顶部!</button>
</pre>
</ion-content>
</body>