test 列表刷新

pages.json

@@ -262,6 +262,12 @@
 						"navigationBarTitleText": "ListView 列表视图"
 					}
 				},
+				{
+					"path": "data/list-view-refresh",
+					"style": {
+						"navigationBarTitleText": "ListViewRefresh 列表刷新"
+					}
+				},
 				{
 					"path": "data/waterfall",
 					"style": {

pages/demo/components/goods-item.uvue

@@ -0,0 +1,29 @@
+<template>
+	<view class="w-full p-3 bg-white rounded-xl mb-3 dark:bg-surface-800">
+		<cl-image :src="item.image" mode="widthFix" width="100%" height="250rpx"></cl-image>
+		<cl-text :pt="{ className: 'mt-2' }">{{ item.title }}</cl-text>
+	</view>
+</template>
+
+<script lang="ts" setup>
+import { computed, type PropType } from "vue";
+import { useParent } from "@/cool";
+
+defineOptions({
+	name: "goods-item"
+});
+
+type GoodsItem = {
+	id: number;
+	likeCount: number;
+	title: string;
+	image: string;
+};
+
+const props = defineProps({
+	item: {
+		type: Object as PropType<GoodsItem>,
+		default: () => ({})
+	}
+});
+</script>

pages/demo/data/list-view-refresh.uvue

@@ -0,0 +1,77 @@
+<template>
+	<cl-page>
+		<view class="p-3">
+			<cl-list-view :data="data" :virtual="false">
+				<template #item="{ value }">
+					<goods-item :item="value"></goods-item>
+				</template>
+			</cl-list-view>
+		</view>
+	</cl-page>
+</template>
+
+<script lang="ts" setup>
+import { useListView } from "@/uni_modules/cool-ui";
+import { ref } from "vue";
+import { random } from "@/cool";
+import GoodsItem from "../components/goods-item.uvue";
+
+let id = 0;
+
+const data = useListView([
+	{
+		id: id++,
+		likeCount: random(100, 1000),
+		title: "春日樱花盛开时节，粉色花瓣如诗如画般飘洒",
+		image: "https://unix.cool-js.com/images/demo/1.jpg"
+	},
+	{
+		id: id++,
+		likeCount: random(100, 1000),
+		title: "夕阳西下的海滩边，金色阳光温柔地洒在波光粼粼的海面上，构成令人心旷神怡的日落美景",
+		image: "https://unix.cool-js.com/images/demo/2.jpg"
+	},
+	{
+		id: id++,
+		likeCount: random(100, 1000),
+		title: "寒冬腊月时分，洁白雪花纷纷扬扬地覆盖着整个世界，感受冬日的宁静与美好",
+		image: "https://unix.cool-js.com/images/demo/3.jpg"
+	},
+	{
+		id: id++,
+		likeCount: random(100, 1000),
+		title: "都市夜景霓虹闪烁，五彩斑斓光芒照亮城市营造梦幻般景象",
+		image: "https://unix.cool-js.com/images/demo/5.jpg"
+	},
+	{
+		id: id++,
+		likeCount: random(100, 1000),
+		title: "云雾缭绕的山间风光如诗如画让人心旷神怡，微风轻抚树梢带来阵阵清香，鸟儿在林间自由歌唱",
+		image: "https://unix.cool-js.com/images/demo/6.jpg"
+	},
+	{
+		id: id++,
+		likeCount: random(100, 1000),
+		title: "古老建筑与现代摩天大楼交相辉映，传统与现代完美融合创造独特城市景观",
+		image: "https://unix.cool-js.com/images/demo/7.jpg"
+	},
+	{
+		id: id++,
+		likeCount: random(100, 1000),
+		title: "广袤田野绿意盎然风光无限，金黄麦浪在微风中轻柔摇曳，农家炊烟袅袅升起",
+		image: "https://unix.cool-js.com/images/demo/8.jpg"
+	},
+	{
+		id: id++,
+		likeCount: random(100, 1000),
+		title: "璀璨星空下银河横跨天际，繁星闪烁神秘光芒营造浪漫夜空美景",
+		image: "https://unix.cool-js.com/images/demo/9.jpg"
+	},
+	{
+		id: id++,
+		likeCount: random(100, 1000),
+		title: "雄伟瀑布从高耸悬崖飞流直下激起千层浪花，彩虹在水雾中若隐若现如梦如幻",
+		image: "https://unix.cool-js.com/images/demo/10.jpg"
+	}
+]);
+</script>

pages/index/home.uvue

@@ -43,7 +43,7 @@
 								class="item dark:!bg-surface-800"
 								hover-class="opacity-80"
 								:hover-stay-time="50"
-								@tap="toPath(child.path!)"
+								@tap="toPath(child)"
 							>
 								<cl-icon :name="child.icon" :size="36"></cl-icon>
 								<cl-text
@@ -80,6 +80,7 @@ type Item = {
 	label: string;
 	icon?: string;
 	path?: string;
+	disabled?: boolean;
 	children?: Item[];
 };
 
@@ -140,7 +141,7 @@ const data = computed<Item[]>(() => {
 				},
 				{
 					label: t("口令输入"),
-					icon: "t-box-line",
+					icon: "input-method-line",
 					path: "/pages/demo/form/input-otp"
 				},
 				{
@@ -258,6 +259,12 @@ const data = computed<Item[]>(() => {
 					icon: "list-view",
 					path: "/pages/demo/data/list-view"
 				},
+				{
+					label: t("列表刷新"),
+					icon: "refresh-line",
+					path: "/pages/demo/data/list-view-refresh",
+					disabled: true
+				},
 				{
 					label: t("瀑布流"),
 					icon: "layout-column-line",
@@ -373,6 +380,12 @@ const data = computed<Item[]>(() => {
 					icon: "crop-line",
 					path: "/pages/demo/other/cropper"
 				},
+				{
+					label: t("富文本"),
+					icon: "text-snippet",
+					path: "/pages/demo/other/rict-text",
+					disabled: true
+				},
 				{
 					label: "DayUts",
 					icon: "timer-2-line",
@@ -388,8 +401,14 @@ const data = computed<Item[]>(() => {
 	];
 });
 
-function toPath(path: string) {
-	router.to(path);
+function toPath(item: Item) {
+	if (item.disabled == true) {
+		return ui.showToast({
+			message: t("该功能正在开发中")
+		});
+	}
+
+	router.to(item.path!);
 }
 
 function setLocale() {

uni_modules/cool-ui/components/cl-list-view/cl-list-view.uvue

@@ -18,7 +18,10 @@
 			direction="vertical"
 			@scroll="onScroll"
 		>
-			<view class="cl-list-view__virtual-list" :style="{ height: listHeight + 'px' }">
+			<view
+				class="cl-list-view__virtual-list"
+				:style="{ height: virtual ? listHeight + 'px' : 'auto' }"
+			>
 				<view class="cl-list-view__spacer-top" :style="{ height: spacerTopHeight + 'px' }">
 					<slot name="top"></slot>
 				</view>
@@ -54,14 +57,12 @@
 							},
 							pt.item?.className
 						]"
-						:hover-class="parseClass([[isDark, '!bg-surface-800', '!bg-surface-50']])"
-						:hover-stay-time="50"
 						:style="{
-							height: itemHeight + 'px'
+							height: virtual ? itemHeight + 'px' : 'auto'
 						}"
 						@tap="onItemTap(item)"
 					>
-						<slot name="item" :data="item.data" :item="item">
+						<slot name="item" :item="item" :data="item.data" :value="item.data.value">
 							<view class="cl-list-view__item-inner">
 								<cl-text> {{ item.data.label }} </cl-text>
 							</view>
@@ -133,7 +134,7 @@ defineSlots<{
 	// 分组头部插槽
 	header(props: { index: string }): any;
 	// 列表项插槽
-	item(props: { data: ClListViewItem; item: VirtualItem }): any;
+	item(props: { data: ClListViewItem; item: VirtualItem; value: any | null }): any;
 	// 底部插槽
 	bottom(): any;
 	// 索引插槽
@@ -490,6 +491,10 @@ onMounted(() => {
 		}
 	);
 });
+
+defineExpose({
+	data
+});
 </script>
 
 <style lang="scss" scoped>

uni_modules/cool-ui/components/cl-picker-view/props.ts

@@ -7,5 +7,4 @@ export type ClSelectPickerViewProps = {
 	columns?: ClSelectOption[][];
 	itemHeight?: number;
 	height?: number;
-	resetOnChange?: boolean;
 };

uni_modules/cool-ui/hooks/component.ts

@@ -2,7 +2,12 @@ import { parse } from "@/cool";
 import type { ClCascaderOption, ClListViewItem } from "../types";
 
 export function useListView(data: UTSJSONObject[]) {
-	return data.map((e) => parse<ClListViewItem>(e)!);
+	return data.map((e) => {
+		return parse<ClListViewItem>({
+			...e,
+			value: e
+		})!;
+	});
 }
 
 export function useCascader(data: UTSJSONObject[]) {

uni_modules/cool-ui/types/component.d.ts

@@ -126,6 +126,10 @@ declare type ClListItemComponentPublicInstance = {
 	initSwipe: () => void;
 };
 
+declare type ClListViewComponentPublicInstance = {
+	data: ClListViewItem[];
+};
+
 declare type ClCascaderComponentPublicInstance = {
 	open: () => void;
 	close: () => void;

uni_modules/cool-ui/types/index.ts

@@ -105,7 +105,7 @@ export type ClListItem = {
 };
 
 export type ClListViewItem = {
-	label: string;
+	label?: string;
 	value?: any;
 	index?: string;
 	children?: ClListViewItem[];