一、使用框架
本文使用Agile Lite框架实现头部滑动导航。点击下载框架,导入框架如下:
<link rel="stylesheet" href="../assets/agile/css/agile.layout.css">
<link rel="stylesheet" href="../assets/third/seedsui/plugin/seedsui/seedsui.min.css">
<script type="text/javascript" src="../assets/third/amd/require.js"></script>
<script id="entry" type="text/javascript" src="../assets/app/js/app.require.js"></script>
二、导航具体代码的实现
如果导航栏内容超出设置的宽度,要实现头部导航栏内容可以进行水平滑动,则设置data-scroll=”horizontal”,在js增加A.Component.scroll(‘#tabbarOuter’);进行启动滑动。以下是使用slider+tab+page组件进行实现左右滑动切换页面内容,滑动组件不会自动启动,需要使用A.Slider(‘#sliderPage’, {dots : ‘hide’});进行启动滑动组件。导航的data-toggle的值要与article的页面内容的data-role的值一致。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>index</title>
<link rel="stylesheet" href="../assets/agile/css/agile.layout.css">
<link<