Uniapp组件、插件推荐-CSDN博客

本文链接：https://blog.csdn.net/Acffcz/article/details/148140599

1.Uniapp组件使用及推荐

问题及解决方案
当遇到上图这种双层导航情况时推荐使用uView中tabs 标签+Subsection 分段器
地址：
- tabs 标签
- Subsection 分段器
使用方式

<template>
	<view class="main">
		<u-tabs :list="tabslist" :is-scroll="false" v-model="tabcurrent" @change="tabchange"></u-tabs>
		<view class="subsection">
			<u-subsection :list="sublist" v-model="subcurrent" @change="subchange" font-size:20px></u-subsection>
		</view>
	</view>
</template>
<script setup>
	import {
		ref
	} from 'vue';
	const tabslist = ref([{
		name: '进厂预约记录'
	}, {
		name: '出厂预约记录',
		count: 0
	}])
	const tabcurrent = ref(0)
	const sublist = ref([{
		name: '待审核'
	}, {
		name: '已审核',
		count: 0
	}])
	const subcurrent = ref(0)
//tabs点击切换事件
	const tabchange = (index) => {
		console.log("index", index);
		subcurrent.value = 0  //将subsection 恢复默认
	}
//subsctibe点击切换事件
	const subscribeInfo = (item) =>{
		console.log(item)
	}

</script>

实现效果
注意事项
代码中使用的时vue3+uView插件
其中要注意在切换tabs时要将Subsection分段器恢复到初始状态，不然会导致后面调用接口获取数据时，产生异常情况

2.插件推荐，日期选择、下拉框数据选择

日期选择插件

地址：wht-datetime-picker 功能强大的移动端日期时间选择器 - DCloud 插件市场

使用方式

<template>
	<view class="main">
		<view class="top">
		</view>
		<view class="main_view">
			<view class="item">
				<view class="left">
					<text>开始日期：</text>
				</view>
				<view class="right">
					<view class="demo-cell" @click="showBasic('datetime')">
						<text class="cell-label"></text>
						<view class="cell-value">
							<text>{{formatDate(basicValue) || '请选择'}}</text>
							<text class="cell-arrow">></text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	<wht-datetime-picker ref="basicPicker" :mode="basicMode" :show-seconds="true" @confirm="handleBasicConfirm" />
</template>
<script setup>
    import {ref,nextTick} from 'vue'
	const basicValue = ref(null)
	const basicMode = ref('datetime')
	const basicPicker = ref(null)

	// 日期选择方法
	const showBasic = (mode) => {
		basicMode.value = mode
		nextTick(() => {
			basicPicker.value?.show(basicValue.value)
		})
	}

	// 确认回调
	const handleBasicConfirm = (value, formatted) => {
		basicValue.value = value.value
		frontInfo.value.StartTime = formatDate(basicValue.value)
	}

	// 格式化方法
	const formatDate = (date) => {
		if (!date) return '请选择日期'
		try {
			const d = new Date(date)
			return `${d.getFullYear()}-${(d.getMonth()+1).toString().padStart(2,'0')}-${d.getDate().toString().padStart(2,'0')} ${d.getHours().toString().padStart(2,'0')}:${d.getMinutes().toString().padStart(2,'0')}:${d.getSeconds().toString().padStart(2,'0')}`;
		} catch {
			return '日期格式错误'
		}
	}
</script>

实现效果

注意事项
- 在官方的基础上，对于我这的需求将格式化数据方法进行了修改使其数据返回格式为2025-05-22 14:41:25
- 官方文档中还支持默认时间，快捷选择，日期范围选择等功能

下拉框选择插件

<template>
	<view class="main">
		<view class="top">
		</view>
		<view class="main_view">
			<view class="item">
				<view class="left">
					<text style="color: red;">*</text>
					<text>类型：</text>
				</view>
				<view class="right">
					<!-- <input type="text" v-model="frontInfo.name"> -->
					<view class="selectC">
						<uni-forms-item label="类型" required name="name">
							<zxz-uni-data-select v-model="frontInfo.name" filterable :localdata="range" />
						</uni-forms-item>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script setup>
	import {
		ref,
		nextTick
	} from 'vue'

	const range = ref([{
			"value": 0,
			"text": "A01",
			"disable": true
		},
		{
			"value": 1,
			"text": "A02"
		},
		{
			"value": 2,
			"text": "A03"
		}
	])
//选择事件
const change = (e) => {
		console.log('e:', e);
	}
</script>