MUI实现顶部可滑动选项卡

最新推荐文章于 2023-03-16 09:29:33 发布
最新推荐文章于 2023-03-16 09:29:33 发布
阅读量1.3k 收藏 2
点赞数
分类专栏： MUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lwqBrell/article/details/100113452
版权

实现效果

 

案例源码

<!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>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<script type="text/javascript" charset="utf-8">
			mui.init();
		</script>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">出行记</h1>
		</header>
		<div class="mui-content">
			<div id="slider" class="mui-slider mui-fullscreen">
				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll">
						<a class="mui-control-item mui-active" href="#item1mobile">
							推荐
						</a>
						<a class="mui-control-item" href="#item2mobile">
							运动
						</a>
						<a class="mui-control-item" href="#item3mobile">
							玩乐
						</a>
						<a class="mui-control-item" href="#item4mobile">
							游记
						</a>
						<a class="mui-control-item" href="#item5mobile">
							电影
						</a>
						<a class="mui-control-item" href="#item6mobile">
							美食
						</a>
					</div>
				</div>
				<div class="mui-slider-group">
					<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
						<div id="scroll1" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								推荐
							</div>
						</div>
					</div>
					<div id="item2mobile" class="mui-slider-item mui-control-content">
						<div id="scroll2" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								运动
							</div>
						</div>
					</div>
					<div id="item3mobile" class="mui-slider-item mui-control-content">
						<div id="scroll3" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								玩乐
							</div>
						</div>
					</div>
					<div id="item4mobile" class="mui-slider-item mui-control-content">
						<div id="scroll3" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								游记
							</div>
						</div>
					</div>
					<div id="item5mobile" class="mui-slider-item mui-control-content">
						<div id="scroll3" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								电影
							</div>
						</div>
					</div>
					<div id="item6mobile" class="mui-slider-item mui-control-content">
						<div id="scroll3" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								美食
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			// 点击北京回到原点
			document.querySelectorAll('.mui-control-item')[2].addEventListener('tap', function() {
				mui('.mui-scroll-wrapper').scroll().scrollTo(0, 0, 900);
			});
			// 点击游记左滑80px
			document.querySelectorAll('.mui-control-item')[3].addEventListener('tap', function() {
				mui('.mui-scroll-wrapper').scroll().scrollTo(-80, 0, 900);
			});
		</script>
	</body>
</html>

 

GitHub：

https://github.com/lwqbrell/top_scroll_tab

Trevor Lan
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
MUI顶部选项卡的用法(tab-top-webview-main)详解
11-28
前  言  　MUI是一款最接近原生APP体验的高性能前端框架，它的比较重要的功能是：下拉刷新、侧滑导航、滑动触发操作菜单和顶部(底部)选项卡等 最近用MUI做手机app应用的时候，遇到的小bug。顺便研究了一下这个tab-top-webview-main，这里给大家分享一下。 1主页代码 <!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,mi
mui上拉加载+选项卡+ajax
12-25
首先，`mui`框架提供了丰富的组件和API，使得开发者能够轻松实现滑动、下拉刷新、上拉加载等触摸交互功能。在"上拉加载"这一特性中，当用户滚动到页面底部时，会触发加载更多数据的事件，这对于展示大量数据的列表或...
MUI 顶部选项卡-可左右拖动(div)
WhoWrongsWhere的专栏
12-28 2万+
顶部选项卡-可左右拖动 .mui-control-content { background-color: white; min-height: 215px; } .mui-control-content .mui-loading { margin-top: 50px; } 顶部选项卡-可左右拖动(div) 待办公文
mui顶部nav导航栏代码
pickinguptrash的博客
03-16 469
元素使用时需遵循一个规则：放在.mui-content元素之前，即使是底部工具条和底部选项卡，也要放在.mui-content之前，否则固定栏会遮住部分主内容；常见组件包括：顶部导航栏（.mui-bar-nav）、底部工具条(.mui-bar-footer)、底部选项卡（.mui-bar-tab）所谓的固定栏，也就是带有.mui-bar属性的节点，都是基于fixed定位的元素；顶部导航栏（.mui-bar-nav）建议：先看一下MUI注意事项。
基于mui框架选项卡列表下拉滑动加载代码
12-14
本教程将详细讲解如何利用Mui框架实现一个带有选项卡切换功能的列表，同时支持触屏滑动下拉加载数据进行列表刷新。 首先，我们从"demo.html"开始。这个文件是整个应用的核心，它包含HTML结构，以及对Mui框架和其他...
MUI 实现侧滑菜单及其主体部分上下滑动的方法
08-28
本文将详细介绍如何使用MUI实现侧滑菜单以及主体部分的上下滑动功能。 首先，我们要了解MUI侧滑菜单的基本结构。侧滑菜单通常用于移动端应用，提供一种隐藏的导航方式，用户可以通过从屏幕边缘向内滑动来显示或隐藏...
详解MUI顶部选项卡(tab-top-webview-main)的用法
weixin_30437337的博客
05-14 894
　　最近用MUI做手机app的时候，遇到了一点问题。然后就对这个tab-top-webview-main的源码做了点研究，接下来我将和大家详解一下 tab-top-webview-main的用法和应该注意的方法。 　　接下来先发一个应用的实例： <!doctype html> <html> <head> <met...
微信小程序----导航栏选项卡（MUI顶部选项卡）
止于至善
12-29 6354
DEMO下载 效果图 WXML import src=&amp;quot;../../template/list.wxml&amp;quot;/&amp;gt; view class=&amp;quot;tui-tabbar-content&amp;quot;&amp;gt; view class=&amp;quot;tui-tabbar-group&amp;quot;&amp;gt
仿微信顶部选项卡
07-17
仿微信5.0顶部滑动选项卡
简单实现底部标签栏切换和顶部选项卡功能
12-07
底部标签栏是通过FragmentTabHost实现的 顶部选项卡是通过2015谷歌新推的TabLayout实现的
原生tab拖动切换
11-28
mui实现原生的选项卡，以及拖动界面实现切换选项卡界面效果，以及点击选项卡按钮的动画，下载在即可运行
HBuilder mui入门教程——（2）含tab选项卡的首页
热门推荐
永远行进
07-02 3万+
在上一篇文章中简单介绍了mui框架，并创建了第一个mui项目。在APP中，底部的选项卡菜单一般是各个APP都有的，在mui中怎样创建呢，下面就简单说下。极速创建【文件】->【新建】->【HTML文件】，然后在弹出窗口下面的“选择模板组：”中选中“mui底部选项卡（Webview模式）”。点击完成，就会自动创建一个带有默认页面的模板。 打开tab-webview-main.html可以在右侧看到
MUI顶部选项卡的用法(tab-top-webview-main)
weixin_30502965的博客
10-08 572
前 言 　MUI是一款最接近原生APP体验的高性能前端框架，它的比较重要的功能是：下拉刷新、侧滑导航、滑动触发操作菜单和顶部(底部)选项卡等 最近用MUI做手机app应用的时候，遇到的小bug。顺便研究了一下这个tab-top-webview-main，这里给大家分享一下。 1主页代码 <!doctype html&...
mui底部选项卡切换功能
wJulio的博客
07-08 2780
mui底部选项卡实现切换功能 <!-- main.html 入口文件 --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=devi...
dcloud------mui 点击底部选项卡，获取文本内容
u010978381的博客
06-15 3578
dcloud------mui 点击底部选项卡，获取文本内容 1.点击选项卡，触发的事件，我们用mui('.mui-bar-tab').on('tap', 'a', function(e) {   }); 2.点击之后，采用 this  关键词，获取该对象，例如以下情况： 首页 9 消息 通讯录 设置
mui底部选项卡实现跳转
最新发布
07-13
在实现 MUI 底部选项卡的跳转功能时，可以使用 `<BottomNavigation>` 和 `<BottomNavigationAction>` 组件来创建底部导航栏和选项卡。 首先，你需要导入相关的组件： ```jsx import React, { useState } from 'react'; import { BottomNavigation, BottomNavigationAction } from '@mui/material'; import { Home, Explore, Favorite } from '@mui/icons-material'; ``` 然后，你可以创建一个函数组件，并在组件中添加底部导航栏和选项卡的代码： ```jsx function BottomTabs() { const [value, setValue] = useState(0); // 用于保存当前选中的选项卡索引 const handleTabChange = (event, newValue) => { setValue(newValue); // 更新选中的选项卡索引 }; return ( <BottomNavigation value={value} onChange={handleTabChange}> <BottomNavigationAction label="Home" icon={<Home />} /> <BottomNavigationAction label="Explore" icon={<Explore />} /> <BottomNavigationAction label="Favorite" icon={<Favorite />} /> </BottomNavigation> ); } ``` 在上面的代码中，我们使用 `useState` 钩子来创建一个名为 `value` 的状态变量，用于保存当前选中的选项卡索引。`handleTabChange` 函数用于处理选项卡变动事件，并更新 `value` 的值。 最后，将 `BottomTabs` 组件添加到你的页面中即可： ```jsx function App() { return ( <div> {/* 其他内容 */} <BottomTabs /> </div> ); } ``` 这样，你就实现了 MUI 底部选项卡的跳转功能。当用户点击不同的选项卡时，会触发 `handleTabChange` 函数，并更新 `value` 的值，从而实现页面的跳转效果。你可以根据自己的需求，在每个选项卡的 `onClick` 事件中添加相应的跳转逻辑。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值