0
点赞
收藏
分享

微信扫一扫

uni-app实现小程序踩坑记录

沪钢木子 2022-03-15 阅读 104

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>
举报

相关推荐

0 条评论