HBuilder开发词典app（二）--实现点击和手指拖动变更页面

最新推荐文章于 2024-05-20 10:50:29 发布

焗个面包

最新推荐文章于 2024-05-20 10:50:29 发布

阅读量965

点赞数 1

本文链接：https://blog.csdn.net/sureSand/article/details/81089642

版权

本文介绍了如何使用HBuilder开发一款词典App，重点讲解了如何实现通过点击选项和手指拖动来变更页面的功能。通过创建sub1到sub4四个HTML页面，并利用mui.init进行页面间联系的建立。拖动页面的逻辑主要在每个子页面中实现，例如sub1.html，拖动时根据方向切换到相邻页面。完整代码可在GitHub找到。

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

首先建四个html，分别为sub1.html,sub2.html,sub3.html,sub4.html,分别对应底部四个选项卡，通过mui.init来建立联系：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <link href="css/mui.css" rel="stylesheet"/>

</head>
<body>
    <header class="mui-bar mui-bar-nav hBg">
     <div id="logo">
       <img src="imgs/logo.png"/>
     </div>
     <div id="searchBut">请输入要翻译的文本</div>
    </header>

    <nav class="mui-bar mui-bar-tab" id = "navFooter">
        <a class="mui-tab-item mui-active" id="nav1">
            <span class="mui-icon mui-icon-home"></span>
            <span class="mui-tab-label">首页</span>
        </a>
        <a class="mui-tab-item" id="nav2">
            <span class="mui-icon mui-icon-compose"></span>
            <span class="mui-tab-label">词典</span>
        </a>
        <a class="mui-tab-item" id="nav3">
            <span class="mui-icon mui-icon-star"></span>
            <span class="mui-tab-label">热点</span>
        </a>
        <a class="mui-tab-item" id="nav4">
            <span class="mui-icon mui-icon-gear"></span>
            <span class="mui-tab-label"&