apiclound实现底部导航

最新推荐文章于 2022-08-24 22:09:15 发布
最新推荐文章于 2022-08-24 22:09:15 发布
阅读量551 收藏 2
点赞数
分类专栏： apiclound 文章标签： 导航 apiclound
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/admin_web/article/details/102479642
版权

方法一：使用openTabLayout方法(没实现点击第二次时刷新页面功能)

实现效果图
在这里插入图片描述

在根目录下index.html中写入代码:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>demo</title>
    <link rel="stylesheet" type="text/css" href="./css/api.css"/>
    <link rel="stylesheet" type="text/css" href="./css/style.css"/>
    <style>
        html {
            height: 100%;
            background-color: #fff;
        }
        body {
            background-color: #fff;
            padding: 0;
            margin: 0;
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            height: 100%;
            -webkit-box-orient: vertical;
            -webkit-flex-flow: column;
            flex-flow: column;
        }

    </style>
</head>
<body>


</body>
<script type="text/javascript" src="script/api.js"></script>
<script>
    apiready = function () {
        openNavTabWin();
    }
    function openNavTabWin(){
            var param = {
                name: 'nav-tab',
                title:'nav-tab',
                bgColor:'#fff',
                slidBackEnabled: false,
                hideNavigationBar: true, // 是否隐藏顶部导航，默认false
                // navigationBar: { // 顶部navigationBar导航栏配置信息
                //     hideBackButton: true
                // },
                tabBar: {
                    animated: true,
                    scrollEnabled: false, // //（可选项）标签栏每项对应的页面间是否能够左右滚动切换，默认值true。布尔类型
                    list: [
                        {
                            text: "首页",
                            iconPath: "widget://image/footer/shouye2.png",
                            selectedIconPath: "widget://image/footer/shouye.png"
                        }, {
                            text: "菜谱",
                            iconPath: "widget://image/footer/caipu.png",
                            selectedIconPath: "widget://image/footer/caipu2.png"
                        }, {
                            text: "社区",
                            iconPath: "widget://image/footer/shequ.png",
                            selectedIconPath: "widget://image/footer/shequ2.png"
                        },
                        {
                            text: "购物车",
                            iconPath: "widget://image/footer/spcart.png",
                            selectedIconPath: "widget://image/footer/spcart2.png"
                        },
                        {
                            text: "我的",
                            iconPath: "widget://image/footer/wd.png",
                            selectedIconPath: "widget://image/footer/wd2.png"
                        }
                    ],
                    frames: [
                        {
                            title: "首页",//tab切换时对应的标题
                            name: "index",
                            url: "widget://html/index.html",
                            //其他继承自openFrame的参数
                        }, {
                            title: "菜谱",
                            name: "tab_frm_2",
                            url: "widget://html/menu.html"
                            //其他继承自openFrame的参数
                        }, {
                            title: "社区",
                            name: "tab_frm_3",
                            url: "widget://html/community.html"
                            //其他继承自openFrame的参数
                        },
                        {
                            title: "购物车",
                            name: "tab_frm_3",
                            url: "widget://html/shopcart.html"
                            //其他继承自openFrame的参数
                        },
                        {
                            title: "我的",
                            name: "tab_frm_4",
                            url: "widget://html/my.html"
                            //其他继承自openFrame的参数
                        }
                    ]
                }
            }
            api.openTabLayout(param);
        }
</script>
</html>

使用api: openTabLayout // 打开tabLayout布局
官方文档：https://docs.apicloud.com/Client-API/Func-Ext/api
相关论坛： https://community.apicloud.com/bbs/thread-123685-1-1.html

方法二：openFrameGroup + aui框架（该方法实现了点击某个页面可以刷新的功能）

根目录index.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="./css/api.css" />
    <style type="text/css">
   
    </style>
</head>
<body>
   
</body>
<script type="text/javascript" src="./script/api.js" ></script>
<script type="text/javascript" src="./script/aui-tab.js" ></script>
<script type="text/javascript" src="./script/mylib.js"></script>
<script type="text/javascript">
apiready = function(){
	api.parseTapmode();
	funIniGroup()
	function funIniGroup(){
	    var frame_name=['index','menu','community','shopcart','my'],
	        frames = [];
	    for (var i = 0,len = frame_name.length; i < len; i++) {
	        frames.push( {
	            name: frame_name[i],
	            url: './html/'+frame_name[i]+'.html',
	            bgColor : '#fff',
	            scrollEnabled: true,
	            bounces:false,
	            
	        })
	    }
	    api.openFrameGroup({
	        name: 'group',
	        index: 0,
	        frames: frames
	    }, function (ret, err) {
	
	    });
	
	}

}
</script>
</html>

mylib.js

function select_footer(id){
	// 设置 frame 组当前可见 frame
    api.setFrameGroupIndex({
        name: 'group',
        index: id,
    });
    if(id == 3){
      api.setFrameGroupIndex({
        name: 'group',
        index: 3,
        reload:true
      });
    }
}

html/home.html

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta charset="utf-8" />
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <title>主页</title>
    <link rel="stylesheet" type="text/css" href="../css/aui/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../css/index.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui/aui-slide.css" />
    <link rel="stylesheet" type="text/css" href="../font/iconfont.css">

    <style type="text/css">
       
    </style>
</head>
<body>

<footer class="aui-bar aui-bar-tab" id="footer" style="border-top: 1px solid #e1e1e1">
    <div class="aui-bar-tab-item" tapmode >
        <!-- <i class="aui-iconfont aui-icon-cart select"></i> -->
        <img src="../image/footer/index2.png" alt="首页" />
        <div class="aui-bar-tab-label aui-active">首页</div>
    </div>
    <div class="aui-bar-tab-item" tapmode onclick="select_footer(1);">
        <!-- <i class="aui-iconfont aui-icon-cart"></i> -->
        <img src="../image/footer/menu.png" alt="菜谱" />
        <div class="aui-bar-tab-label">菜谱</div>
    </div>
    <div class="aui-bar-tab-item" tapmode onclick="select_footer(2);">
        <!-- <i class="aui-iconfont aui-icon-cart"></i> -->
        <img src="../image/footer/community.png" alt="社区" />
        <div class="aui-bar-tab-label">社区</div>
    </div>
    <div class="aui-bar-tab-item" tapmode onclick="select_footer(3);">
        <!-- <i class="aui-iconfont aui-icon-cart"></i> -->
        <img src="../image/footer/shopcart.png" alt="购物车" />
        <div class="aui-bar-tab-label">购物车</div>
    </div>
    <div class="aui-bar-tab-item" tapmode onclick="select_footer(4);">
        <!-- <i class="aui-iconfont aui-icon-cart"></i> -->
        <img src="../image/footer/my.png" alt="我的" />
        <div class="aui-bar-tab-label">我的</div>
    </div>
</footer>
   
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/mylib.js"></script>
<script type="text/javascript" src="../script/aui/aui-tab.js"></script>
<script>
  apiready = function () {
    

    }
</script>

</html>
if时光重来
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用APICloud从0开始写脉脉(二) 底部导航栏
11-07
使用APICloud从0开始写脉脉(二) 底部导航栏
APIClound_入门.ppt
09-02
ApiClound 入门教程。ppt 包含各种基础教程。包含代码。
api.setFrameGroupIndex
weixin_30677073的博客
02-16 601
设置 frame 组当前可见 frame setFrameGroupIndex({params}) params name： 类型：字符串 默认值：无 描述：frame 组名字 index： 类型：数字 默认值：无 描述：frame 索引 scroll： 类型：布尔 默认值：false 描述：（可选项）是否平滑滚动至目标窗口，即是否带有动画 r...
html frame 菜单切换,官方底部导航如何通过frame0.html的JS控制切换
weixin_31695145的博客
06-09 188
官方建立的默认底部导航窗口，在frame0里写了function jump(id){api.setFrameGroupIndex({name: 'group',index: 1,scroll:true});}页面跳转了，但是index.html的随意切换按钮默认项不动，怎么能让index.html默认变化// 随意切换按钮function randomSwitchBtn( tag ) {if(...
强大的APIClound云修复——告别繁琐的编译打包流程
热门推荐
官方推荐
10-21 3万+
小编接到一项目的二期开发任务，拉下代码开始熟悉大概的框架、技术、上线流程等前期工作，本app是通过vue技术进行开发，使用ui是 vant 库，打包上线则是使用的 APIClound 平台； 在我们的app上线后，如果我们改动了app的内容还需要重新打包然后让用户进行重新下载或者是手机上面的强制更新，如果是很小的改动比如我们的样式、文字等小的改动也是需要打包云编译、签名、加固等繁琐步骤 今天小编给大家介绍一下APIClound进行云修复，可以不用重新打包，只需要我们将改变的文件上传到 APIClound 就
APICloud介绍
u010035154的专栏
12-09 3万+
在APICloud创建了应用之后，应用的包结构如下图所示： 其中“config.xml”和 “index.html” 必须包含，其它均为可选。“config.xml”是配置文件，“index.html”是启动页面，“icon”为图标文件目录，“launch”为启动图片目录 actionSheet底部弹出框：api.actionSheet({ title: '底部弹出框测试'
apicloud 导航菜单获取数据库数据
10-08
当然，实际应用可能需要更复杂的UI组件，如侧滑菜单或者底部导航栏，这时可以利用APICloud的UI模块（如`$api.createView`）来创建自定义视图。 此外，为了优化用户体验，我们可能还需要处理网络状态变化、数据缓存...
TemplateApp.zip
09-02
在ApiCloud中，开发者可以通过API调用来实现各种功能，如访问硬件设备、网络通信、数据存储等。此压缩包中的"TemplateApp"很可能是提供了一个基础模板，帮助初学者快速搭建应用框架。接下来，我们将深入探讨如何利用...
apicloud开发app案例 生成QQ和微信的聊天界面.zip
07-13
本教程以“apicloud开发app案例 生成QQ和微信的聊天界面.zip”为例，深入探讨如何利用APICloud实现类似微信和QQ的聊天界面，包括输入法、表情包、图片选择和发送等功能。 首先，我们来看项目中的核心文件结构。在...
ElasticsearchinAction全文检索
08-19
ElasticsearchinAction全文检索
软键盘 android keydown,【apicloud】实现APP底部导航适应软键盘高度
weixin_42400643的博客
05-29 329
apicloud开发APP时遇到需求，在页面底部加入一个输入导航，需要能适应软键盘，在软键盘弹出时自动浮于软键盘上方。apicloud提供的解决方案：安卓：于config.xml中加入IOS：于openWin、openFrame时加入参数softInputMode: 'resize'api.openWin({name:'main',url:'main.html',softInputMode:'...
APICLOUD实现沉浸式导航栏在Android和ios上的兼容
LLDD2014425程序猿
01-16 5952
最近在使用apicloud开发一款APP，项目没有使用安卓和ios开发人员，选择APICLOUD开发，犹豫UI设计的导航栏是沉浸式，在Android和ios上的效果是不一样的，ios上导航栏会浮在内容上面，将内容部分遮挡，如图： 我要达到的是不希望导航栏遮挡住内容部分，经过不懈的努力和各种尝试，终于解决了这个问题，具体步骤如下： 1、在config文件里面配置 "statusBarA
小程序 底部导航栏(tabBar)图标的正确做法
黄河爱浪的博客-专注CSS,jQuery,uni-app领域
05-13 2万+
许多人都认为小程序系统的底部导航栏特别不好看，为了美观而选择自定义，从此身陷漩涡无法自拔。其实真正的原因是图标的图片处理不当（说白了就是前端和设计太菜了），导致会有线条变粗，间距不当的视觉感受。 除小程序外 uni-app框架开发的 app也可参照本篇文章中的方法进行调整 小程序中自定义底部导航是非常不明确的选择，小编有发布过一篇《说一说要求 小程序自定义导航栏 的产品有多沙雕》，文章地址：https://blog.csdn.net/u013350495/article/details/105645..
Apiclound3 后端自定义Table+自定义查询
最新发布
℡メ㏑╭ァ小凯
08-24 345
2、调用数据库配置的接口地址得到dataList。1、获取数据库定义的列头：dataFiled。1、表头、请求地址直接从数据库配置读取。3、传入查询分页参数。
APICloud教程
weixin_34149796的博客
06-09 1万+
一、通过APICloud进行App前端布局和数据交互App前端布局：Window ：窗口Frame：子窗口FrameGroup：一组子窗口的集合 window+frame+html代码的布局方式整个页面最外面是一个window，头部和导航固定不变，为一个frame，下方内容区域又是一个frame，整个frame里面就是具体的页面内容了，里面嵌套了html\css代码 打开新窗口的过程，就是在一组w...
API cloud的基本用法
qq_41619567的博客
11-11 439
api cloud在新创建一个项目后如果需要真机预览 首先先配置好IP和端口 然后运行 找到要运行的页面然后右键 wifi实时预览 同时开发studio2上 控制台会打印log 尽量使用真机预览，开发工具上实时预览效果显示有问题。 基本用法是结合api的原生工具 和 $api的js封装方法（类似jq）来控制原生组件的实现 页面的配置以及所需数据的格式按照文档给的格式写 页面开始时...
使用TabLayout快速实现一个导航栏
weixin_30780221的博客
12-12 137
在没有Material Design的年代，要实现一个类似微信主页面的效果，我们有以下几种解决方案：1.Fragment + ViewPager + RadioGroup自定义固定导航条2.Fragment + ViewPager 带滑动导航条3.Fragment + ViewPager + HorizontalScrollView自定义滑动导航条当然，除了这些之外，还有许多已经被Go...
apicloud之导航栏切换
weixin_37595711的博客
12-27 1340
&lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,init
TabLayout的用法进行总结和归纳
LinWei的博客
04-22 1万+
TabLayout的用法进行总结和归纳

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值