vue mui mui-scroll 横向 滑动嵌套

                                             vue mui mui-scroll 横向 滑动嵌套

页面主要 有三个部分的滑动

• 顶端是一个  "mui-slider"
• 然后是一个 横向 的 "mui-scroll-wrapper"
• 然后是一个整体的 的 纵向 "mui-scroll-wrapper"

 

顶端的 "mui-slider"  和  整体 纵向的  "mui-scroll-wrapper" 挺好 实现的

下载专区 "mui-scroll-wrapper" 横向的滑动 找了好多资料 都没有找到 后来终于找到了点 功夫不负有心人哇 爬了许多坑之后 实现了

 

主要处理代码是这里一块

	

		

			

				

					

						

							
							
{{item.GameName}}
						
					
				
			
		
	

这里用到的 CSS 样式

	#mui-scroll-wrapper-download {
		position: absolute;
		height: 1.5rem;
		/* 	//background: dimgrey; */
		left: 0.3rem;
		right: 0.3rem;
		margin-top: 0.2rem;
	}

	/* 横向滑动的头部 */
	.mui-scroll-wrapper-horizontal .mui-segmented-control-inverted {
		height: 1.5rem;
		/* background: darkred; */
	}

	.mui-scroll-wrapper-horizontal .mui-segmented-control-inverted .mui-scroll {
		height: 1.5rem;
	}

	.mui-scroll-wrapper-horizontal .mui-segmented-control-inverted .mui-scroll li {
		display: inline-block;
		width: 1.6rem;

		/* 		//background:yellow; */
	}

然后在 js 代码中  初始化  所有的  ".mui-scroll-wrapper"  并且 隐藏滑动条

this.mui(".mui-scroll-wrapper").scroll({
	indicators: false,
});