2021-10-28

uniapp中scrollview横向滚动超出宽度导致背景色渲染不上问题。

今天在做一个手机端app需要做一个可以横向滑动的表格，但是给表格content部分设置了行背景色时，只可以渲染到屏幕可以展现的部分。向后滑动就不可以了。
上网查了一下就一个文章。还他喵的要收费，，，，，，，醉了

好了，废话不多说。直接放代码

<template>
	<!-- 党员教育 -->
	/*这里使用一个scrollview盒子进行包裹*/
		<scroll-view class="sort" scroll-x="true" :show-scrollbar="false">
		/*表头*/
			<view class="area">
				<view class="main" v-for="(item, index) in titleList" :key="index">
					<text>{{item}}</text>
				</view>
			</view>
			/*content*/
			<view class="dataMain" :style="{width: lengthWidth +'rpx'}">
				<view 
					class="main" 
					v-for="(item, index) in mainList" :key="index">
					<view class="mainList" v-for=" (mItem, mIndex) in item" :key="mIndex">
						<text>{{mItem}}</text>
					</view>
				</view>
			</view>

		</scroll-view>
	</view>

</template>

<script>
	let serv = require('../../../utils/call_service.js');
	export default {
		data() {
			return {
				
				titleList: [
					"单位", "党员大会", "支委会议", "党小组会", "党课", "民主生活会", "理论中心组学习", "理论中心组学习",
				],
				mainList: [{
					q: "定西公路局思想建设和组织建设落实情况统计表",
					a: "dsf",
					ji: "jkl",
					d: "党员大会",
					h: "党员大会",
					l: "民主生活会",
					ll: "支委会议"
				}, {
					q: "dsf",
					a: "dsf",
					ji: "jkl",
					d: "党员大会",
					h: "党员大会",
					l: "民主生活会",
					ll: "支委会议"
				}, {
					q: "dsf",
					a: "dsf",
					ji: "jkl",
					d: "党员大会",
					h: "党员大会",
					l: "民主生活会",
					ll: "支委会议"
				}]

			}
		},
</script>

<style lang="less">
	
	.sort {
		font-size: 12px;
		
		.area {
			display: flex;
			
			.main {
				background-color: #ffe75d;

				text {
					display: inline-block;
					width: 200rpx;

					height: 30px;
					line-height: 30px;
					text-align: center;
					/* white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden; */
				}
			}
		}

		.dataMain {
			.main {
				display: flex;
				background-color: #e8e8e8;
				align-items: center;

				text {
					display: inline-block;
					width: 200rpx;
					text-align: center;
				}
				
			}

			.main:nth-child(even) {
				background-color: #edff25;
			}

			.main:nth-child(odd) {
				background-color: #C0C0C0;
			}
		}
	}

</style>

• 其实如果只需要做出这么一个效果。到此就好啦。cv大法搞起来。

现在就说一下我的解决思路吧。
其实给.main{ 来一个宽度就可以渲染了}。
但是这样又有了一个问题。如果表头的中的td是变化的呢？这样就不能给他固定的宽度了。但是这不就可以用到js了嘛。vue将dom操作变成了操作数据。

• 使用data中的数据 titleList 来动态的确定个数。
• 给表头的每个盒子给一个宽度。来与titleList.length 相乘。
• 然后就是动态给content的行来设置宽度啦。

我确定我很优秀啦。。。