mui 选项卡tab页实现区域滚动，Ajax函数渲染数据（选项卡+scroll滚动+折叠面板）

山岫

已于 2022-03-03 14:58:40 修改

阅读量1k

点赞数

分类专栏： MUI 前端文章标签： json html css 前端 ajax

于 2022-03-03 14:55:52 首次发布

本文链接：https://blog.csdn.net/shanxiu_/article/details/123253781

版权

前端同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

MUI

1 篇文章 0 订阅

订阅专栏

效果图预览

一、HTML

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>news</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!--标准mui.css-->
		<link rel="stylesheet" href="css/mui.min.css">
		<style>
			/* 选项卡 */
			.mui-card .mui-control-content {
				padding: 10px;
			}

			/* 折叠面板 */
			.mui-content>.mui-table-view:first-child {
			    margin-top: 0rem;
			}
			.mui-navigate-right,.mui-push-right{
				font-size: 16px!important;
			}
			p{
				font-size: 15px;
			}
		</style>
	</head>

	<body>

		<div class="mui-content mui-slider">
			<div style="padding: 8px 0px;">
				<div  class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
				<div id="segmentedControl" class="mui-scroll">
					<!-- <a class="mui-control-item" href="#item1">已办公文</a> -->
					
				</div>
				</div>
			</div>
			<div id="segmentedControlContents">
				<!-- <div id="item1" class="mui-control-content mui-active">
					<ul class="mui-table-view" id="content">
						<li class="mui-table-view-cell mui-collapse">
							<a class="mui-navigate-right" href="#">测试1</a>
							<div class="mui-collapse-content">
								测试
							</div>
						</li>
						<li class="mui-table-view-cell">
							<a class="mui-push-right" href="javascript();" target="_blank">Activation exception FAQ</a>
						</li>
					</ul>
				</div> -->
			</div>
		</div>
	

		<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
		<script src="js/mui.min.js"></script>
		<script>
			mui.init({
				swipeBack: false //启用右滑关闭功能
			});
			
			var controls = document.getElementById("segmentedControl");
			var contents = document.getElementById("segmentedControlContents");
				
			var html1 = [];
			var html2 = [];
			
			mui.getJSON("content.json",{category:'data'},function(result){
				var list = result['data'];
				for(var i = 0 ;i< list.length;i++){
					html1.push('<a class="mui-control-item" href="#item'+i+'">'+list[i]['menu']+'</a>');
					var contentList = list[i]['content'];
					html2.push('<div id="item'+i+'" class="mui-control-content">');
					for(var j=0;j<contentList.length;j++){
						html2.push('<ul class="mui-table-view" id="content"><li class="mui-table-view-cell mui-collapse"><a class="mui-navigate-right" href="#">'+contentList[j]['title']+'</a><div class="mui-collapse-content">'+contentList[j]['web_view']+'</div></li></ul>');					
					}
					html2.push('</div>');
				}
				
				// 打印
				// console.log(html1.join(''));
				// console.log(html2.join(''))
				
				controls.innerHTML = (html1.join(''));
				contents.innerHTML = (html2.join(''));
				//默认选中第一个
				controls.querySelector('.mui-control-item').classList.add('mui-active');
				contents.querySelector('.mui-control-content').classList.add('mui-active');
				}
			);
			
			(function($) {
				$('#scroll').scroll({
					indicators: true //是否显示滚动条
				});
			})(mui);
		</script>
	</body>
</html>

二、新建一个content.json文件模拟服务端传的json数据。

{
    "message": "success",
    "data": [
		{
			"menu":"新闻",
			"content":[
				{
				    "title": "1xxx",
					"web_view":"这是新闻内容"
				},
				{
				    "title": "2xxx",
					"web_view":"这是新闻内容"
				},
				{
				    "title": "3xxx",
					"web_view":"这是新闻内容"
				},
				{
				    "title": "4xxx",
					"web_view":"这是新闻内容"
				}
			]
		},
		{
			"menu":"军事",
			"content":[
				{
				    "title": "1xxx",
					"web_view":"这是军事内容"
				}
			]
		},
		{
			"menu":"娱乐",
			"content":[
				{
				    "title": "1xxx",
					"web_view":"这是娱乐内容"
				},
				{
				    "title": "2xxx",
					"web_view":"这是娱乐内容"
				},
				{
				    "title": "3xxx",
					"web_view":"这是娱乐内容"
				},
				{
				    "title": "4xxx",
					"web_view":"这是娱乐内容"
				}
			]
		},
		{
			"menu":"美食",
			"content":[
				{
				    "title": "1xxx",
					"web_view":"螺蛳粉真滴好吃"
				},
				{
				    "title": "2xxx",
					"web_view":"青椒炒肉yyds"
				}
			]
		},
        {
        	"menu":"音乐",
        	"content":[
        		{
        		    "title": "1xxx",
        			"web_view":"下潜"
        		},
        		{
        		    "title": "2xxx",
        			"web_view":"嚣张"
        		},
				{
				    "title": "3xxx",
					"web_view":"撒野"
				}
        	]
        },
		{
			"menu":"旅游",
			"content":[
				{
				    "title": "1xxx",
					"web_view":"博物馆"
				},
				{
				    "title": "2xxx",
					"web_view":"园博园"
				},
				{
				    "title": "3xxx",
					"web_view":"植物园"
				}
			]
		},
		{
			"menu":"摄影",
			"content":[
				{
				    "title": "1xxx",
					"web_view":"这是摄影标签"
				}
				
			]
		},
		{
			"menu":"动漫",
			"content":[
				{
				    "title": "1xxx",
					"web_view":"一人之下"
				},
				{
				    "title": "2xxx",
					"web_view":"大王饶命"
				}
			]
		},
		{
			"menu":"电视剧",
			"content":[
				{
				    "title": "1xxx",
					"web_view":"姻缘大人请留步"
				},
				{
				    "title": "2xxx",
					"web_view":"一闪一闪亮晶晶"
				}
			]
		}
    ],
    "code": 1000
}

更多操作可以参考MUI文档 UI组件‘ MUI

UI组件 · MUI

山岫

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
mui 选项卡tab页实现区域滚动，Ajax函数渲染数据（选项卡+scroll滚动+折叠面板）

效果图预览一、HTML<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>news</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /&
复制链接

扫一扫