[JavaScript知识库]uni-app实现小程序踩坑记录

1.微信小程序不支持动态插槽名

在封装tab组件时，要实现以下效果：


对于上面那个展示数量，我想着给他留一个具名插槽，把插槽的名字动态化，通过父组件传配置项传给子组件，配置项里面有slotName就展示一个<slot :name='item.slotName'></slot>,没有就不展示。结果这样写过后编译直接报错，界面都不展示，才知道小程序不支持动态插槽名，但是支持具名插槽。
解决方案：
由于点击选项卡，就分别请求，所以让后端加一个接口，获取每个选项卡的数据条数，我包装成一个数组numArr=[2,5,8]，传给子组件，然后子组件通过循环配置项拿到index，根据numArr[index]展示这个条数就可以了。
这里需要注意的是，配置项和条数数组要一一对应，要不然通过index去拿取的数据有可能是错乱的。

<template>
	<view class="u-tab">
		<view class="tab-header">
			<view  v-for="(item, index) in config" :key="index" :class=" currentIndex == item.idd? 'tab-header-item, item-active' : 'tab-header-item'" @click="selected(item.idd)">
				<text>{{item.title}}</text>
				<template v-if="item.showSlot">
					<text class="tab-header-number">({{numArr[index] || 0}}笔)</text>
				</template>
			</view>
		</view>
		<view class="tab-content">
			<slot></slot>
		</view>
	</view>
</template>

<script>
	export default {
		name: "u-tab",
		props: {
			/*
			tab配置项[{
				title 标题名
				idd   标题id
				showSlot 是否展示具名插槽
			}]
			*/
			config: {
				type: Array,
				required: true
			},
			numArr: {
				type: Array,
				required: false
			}
		},
		data() {
			return {
				currentIndex: 0, // 当前选中的tab
			};
		},
		methods: {
			selected(idd) {
				this.currentIndex = idd
				this.$emit("selected", idd)
			}
		}
	}
</script>

2.修改uni-ui组件的默认样式

这个网上很多，我只是做个记录。
你可以多写一个style，在style标签上加scoped，同时使用deep穿透，这里注意，自己自定义的样式class,style标签不用加scoped,有些样式会失效：

<style scoped>
	/* 修改组件默认样式 */
	/deep/ .input-value {
		line-height: 25px;
	}
</style>