BUG记录-组件的样式问题(scoped)

项目场景：

在App中对公司的活动进行分析与统计

---

问题描述：

自定义了一个导航组件，三个页面可以互相跳转，但是发现中间的页面出现了样式问题，其他页面没有问题，并且在电脑上没有问题，只有在手机上调试的时候才会出现问题

// 子组件
<template>
	<view>
		<view class="bottomNav">
			<view class="list" v-for="(item,index) in list" @click="jumpAnalysis(item,index)">
				<image :src="imgIndex == index ? item.imgShow : item.img" mode=""></image>
				<h4>{{item.name}}</h4>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"workSelect",
		props: ['imgIndex','activityId'], // 接收参数
		data() {
			return {
				img: '../static/workbench/activity.png',
				list: [
					{img:'../../static/workbench/activity.png' ,name:'活动分析',imgShow: '../../static/workbench/activitySelect.png',url: '../activeAnalysis/activeAnalysis'},
					{img:'../../static/workbench/customer.png' ,name:'客户分析',imgShow: '../../static/workbench/customerSelect.png',url: '../CustomerProfiling/CustomerProfiling'},
					{img:'../../static/workbench/house.png' ,name:'房源分析',imgShow: '../../static/workbench/houseSelect.png',url: '../saleChart/saleChart'}
				]
			};
		},
		methods: {
		// 带着参数跳转不同页面
			jumpAnalysis(item,index) {
			// 根据imgIndex判断跳转哪一个页面
				if(index !== this.imgIndex){
					uni.redirectTo({
						url: item.url+'?activityId='+this.activityId
					})
				}
			},
		}
	}
</script>

<style lang="scss">
// 样式
	.bottomNav {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 120rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-around;
		align-items: center;
		border-top: 1px solid #dddddd;
		.list {
			display: table-cell;
			text-align: center;
			image {
				width: 39rpx;
				height: 40rpx;
			}
			h4 {
				font-size: 20rpx;
				font-weight: 400;
				color: #666666;
			}
		}
	}
</style>

// 父组件
<work-select :imgIndex='1' :activityId='activityId'></work-select>

<script>
// 引入组件
	import workSelect from '../../components/workSelect.vue'
	export default {
		data() {
			return {
				activityId: '',// 活动ID
			};
		},
		onLoad(options) {
		// 获取活动ID参数
			this.activityId = options.activityId
		},
		components: {
			workSelect
		}
	}
</script>

<style lang="scss">
.list {
		margin-top: 40rpx;
		padding: 0 30rpx;

		.one {
			width: 360rpx;

			.name {
				font-size: 32rpx;
				color: #222;
			}

			.tel {
				font-size: 24rpx;
				color: #999999;
			}
		}

		.two {
			width: 90rpx;
			height: 45rpx;
			line-height: 45rpx;
			text-align: center;
			font-size: 24rpx;
			border-radius: 8rpx;
			border: 1px solid #ccc;
			margin-right: 60rpx;
		}

		.three {
			width: 150rpx;
		}

		image {
			width: 60rpx;
			height: 60rpx;
		}
	}

</style>

解决方案：

因为只有那一个页面出现问题，所以我相信肯定是样式问题，我搜索发现在父组件里面也有list这个属性，那么肯定是这个属性给我的子组件样式覆盖了，只要给父组件的style加上scoped这个参数就可以了

<style lang="scss" scoped></style>