vue mui mui-scroll 横向 滑动嵌套

                                             vue mui mui-scroll 横向 滑动嵌套

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

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

 

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

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

 

主要处理代码是这里一块

	<div id="mui-scroll-wrapper-download">
		<div class="mui-scroll-wrapper-horizontal">
			<div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
				<div class="mui-scroll">
					<ul>
						<li v-for="item in gameListDownload" :key=item.name v-on:click="onDownItem(item)">
							<img :src=item.IconUrl style="width: 0.9rem;" alt="" v-on:onerror="nofind(this)" />
							<p>{{item.GameName}}</p>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>

这里用到的 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,
});