小程序初始提交

cool-unix/pages/demo/data/banner.uvue

@@ -0,0 +1,59 @@
+<template>
+	<cl-page>
+		<view class="p-3">
+			<demo-item :label="t('基础用法')">
+				<cl-banner :list="list"></cl-banner>
+			</demo-item>
+
+			<demo-item :label="t('禁用手势')">
+				<cl-banner :list="list" :disable-touch="true"></cl-banner>
+			</demo-item>
+
+			<demo-item :label="t('自定义样式')">
+				<cl-banner
+					:list="list"
+					:pt="{
+						className: 'mx-[-12rpx] !rounded-none',
+						item: {
+							className: parseClass(['scale-y-80 !px-[12rpx]'])
+						},
+						itemActive: {
+							className: parseClass(['!scale-y-100'])
+						},
+						image: {
+							className: '!rounded-none'
+						}
+					}"
+					:previous-margin="40"
+					:next-margin="40"
+				></cl-banner>
+			</demo-item>
+
+			<demo-item :label="t('自定义样式2')">
+				<cl-banner
+					:list="list"
+					:pt="{
+						className: 'mx-[-12rpx]',
+						item: {
+							className: parseClass(['px-[12rpx]'])
+						}
+					}"
+					:next-margin="40"
+				></cl-banner>
+			</demo-item>
+		</view>
+	</cl-page>
+</template>
+
+<script lang="ts" setup>
+import { t } from "@/locale";
+import DemoItem from "../components/item.uvue";
+import { ref } from "vue";
+import { parseClass } from "@/cool";
+
+const list = ref<string[]>([
+	"https://unix.cool-js.com/images/demo/bg1.png",
+	"https://unix.cool-js.com/images/demo/bg2.png",
+	"https://unix.cool-js.com/images/demo/bg3.png"
+]);
+</script>