html_ionic 表头表底下拉

最新推荐文章于 2021-06-03 09:29:40 发布

Cometsinthenightsky

最新推荐文章于 2021-06-03 09:29:40 发布

阅读量414

点赞数

本文链接：https://blog.csdn.net/qq_39443545/article/details/79038069

版权

本文介绍了如何在Ionic HTML应用程序中实现动态表头和表底的下拉效果，包括设置下拉菜单、响应式布局以及与Angular数据绑定的集成，帮助开发者提升用户交互体验。

摘要由CSDN通过智能技术生成

	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="UTF-8">
	<title></title>
	<meta name="viewport" content="width=device-width" />
	<link href="lib/css/ionic.css" rel="stylesheet" />
	<script src="lib/js/ionic.bundle.js"></script>
	<script>
	angular.module("gaoyn", ["ionic"]).controller("democ", function($scope) {})
	.controller("items1", function($scope) {
	$scope.items = [1, 2, 3];

	});
	</script>
	</head>

	<body ng-app="gaoyn" ng-controller="democ">
	<ion-tabs class="tabs-positive tabs-icon-only">

	<ion-tab title="首页" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">
	<!-- 标签 1 内容 -->
	<ion-header-bar class="bar-positive">
	<button class="button button-icon">左侧按钮</button>
	<h2 class="title">八维商城</h2>
	<button class="button button-icon">右按钮</button>
	</ion-header-bar>

	<!-- 内容区域 ion-content:div -->
	<ion-content ng-controller="items1">
	<ion-refresher pulling-text="下拉刷新..." on-refresh="ref()">
	</ion-refresher>
	<ion-list>
	<ion-item ng-repeat="i in items">
	{{i}}
	</ion-item>
	</ion-list>

	</ion-content>
	</ion-tab>

	<ion-tab title="关于" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline">
	<!-- 标签 2 内容 -->
	<ion-header-bar style="background:red">
	<h2 class="title">标签2</h2>
	</ion-header-bar>
	</ion-tab>

	<ion-tab title="设置" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline">
	<!-- 标签 3 内容 -->
	</ion-tab>

	</ion-tabs>
	</body>

	</html>