兼容 ios
This commit is contained in:
@@ -6,18 +6,18 @@
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('不同类型')">
|
||||
<view class="flex flex-row flex-wrap mb-2">
|
||||
<view class="flex flex-row flex-wrap mb-2 overflow-visible">
|
||||
<cl-button type="primary">{{ t("主要") }}</cl-button>
|
||||
<cl-button type="success">{{ t("成功") }}</cl-button>
|
||||
<cl-button type="warn">{{ t("警告") }}</cl-button>
|
||||
</view>
|
||||
|
||||
<view class="flex flex-row mb-2">
|
||||
<view class="flex flex-row mb-2 overflow-visible">
|
||||
<cl-button type="error">{{ t("危险") }}</cl-button>
|
||||
<cl-button type="info">{{ t("信息") }}</cl-button>
|
||||
</view>
|
||||
|
||||
<view class="flex flex-row">
|
||||
<view class="flex flex-row overflow-visible">
|
||||
<cl-button type="light">{{ t("浅色") }}</cl-button>
|
||||
<cl-button type="dark">{{ t("深色") }}</cl-button>
|
||||
</view>
|
||||
|
||||
@@ -1,6 +1,12 @@
|
||||
<template>
|
||||
<cl-page>
|
||||
<view class="p-3 overflow-visible">
|
||||
<view class="p-3">
|
||||
<demo-item>
|
||||
<cl-text color="info">
|
||||
{{ t("长按项即可拖动排序") }}
|
||||
</cl-text>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('单列排序')">
|
||||
<cl-draggable v-model="list">
|
||||
<template #item="{ item, index }">
|
||||
@@ -16,6 +22,18 @@
|
||||
</cl-draggable>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('不需要长按')">
|
||||
<cl-draggable v-model="list5" :long-press="false">
|
||||
<template #item="{ item }">
|
||||
<view
|
||||
class="flex flex-row items-center p-3 bg-surface-100 rounded-lg mb-2 dark:!bg-surface-700"
|
||||
>
|
||||
<cl-text>{{ (item as UTSJSONObject).label }}</cl-text>
|
||||
</view>
|
||||
</template>
|
||||
</cl-draggable>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('结合列表使用')">
|
||||
<cl-list border>
|
||||
<cl-draggable v-model="list2">
|
||||
@@ -26,8 +44,12 @@
|
||||
arrow
|
||||
:pt="{
|
||||
inner: {
|
||||
className:
|
||||
dragging && dragIndex == index ? '!bg-surface-100' : ''
|
||||
className: parseClass([
|
||||
[
|
||||
dragging && dragIndex == index,
|
||||
isDark ? '!bg-surface-700' : '!bg-surface-100'
|
||||
]
|
||||
])
|
||||
}
|
||||
}"
|
||||
></cl-list-item>
|
||||
@@ -75,41 +97,57 @@
|
||||
import { t } from "@/locale";
|
||||
import DemoItem from "../components/item.uvue";
|
||||
import { ref } from "vue";
|
||||
import { isDark, parseClass } from "@/cool";
|
||||
|
||||
// list:李白《将进酒》
|
||||
const list = ref<UTSJSONObject[]>([
|
||||
{
|
||||
label: "明月几时有,把酒问青天"
|
||||
label: "君不见黄河之水天上来"
|
||||
},
|
||||
{
|
||||
label: "不知天上宫阙,今夕是何年",
|
||||
label: "奔流到海不复回",
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
label: "我欲乘风归去,又恐琼楼玉宇"
|
||||
label: "君不见高堂明镜悲白发"
|
||||
},
|
||||
{
|
||||
label: "高处不胜寒,起舞弄清影"
|
||||
label: "朝如青丝暮成雪"
|
||||
},
|
||||
{
|
||||
label: "何似在人间"
|
||||
label: "人生得意须尽欢"
|
||||
}
|
||||
]);
|
||||
|
||||
// list5:杜甫《春望》
|
||||
const list5 = ref<UTSJSONObject[]>([
|
||||
{
|
||||
label: "国破山河在"
|
||||
},
|
||||
{
|
||||
label: "城春草木深"
|
||||
},
|
||||
{
|
||||
label: "感时花溅泪"
|
||||
}
|
||||
]);
|
||||
|
||||
// list2:王之涣《登鹳雀楼》
|
||||
const list2 = ref<UTSJSONObject[]>([
|
||||
{
|
||||
label: "明月几时有,把酒问青天"
|
||||
label: "白日依山尽"
|
||||
},
|
||||
{
|
||||
label: "不知天上宫阙,今夕是何年"
|
||||
label: "黄河入海流"
|
||||
},
|
||||
{
|
||||
label: "我欲乘风归去,又恐琼楼玉宇"
|
||||
label: "欲穷千里目"
|
||||
},
|
||||
{
|
||||
label: "高处不胜寒,起舞弄清影"
|
||||
label: "更上一层楼"
|
||||
},
|
||||
{
|
||||
label: "何似在人间"
|
||||
label: "一览众山小"
|
||||
}
|
||||
]);
|
||||
|
||||
|
||||
@@ -19,7 +19,11 @@
|
||||
|
||||
<template #bottom>
|
||||
<view class="py-3">
|
||||
<cl-loadmore :loading="loading" v-if="list.length > 0"></cl-loadmore>
|
||||
<cl-loadmore
|
||||
v-if="list.length > 0"
|
||||
:loading="loading"
|
||||
safe-area-bottom
|
||||
></cl-loadmore>
|
||||
</view>
|
||||
</template>
|
||||
</cl-list-view>
|
||||
|
||||
@@ -36,7 +36,7 @@
|
||||
</template>
|
||||
</cl-waterfall>
|
||||
|
||||
<cl-loadmore :loading="true"></cl-loadmore>
|
||||
<cl-loadmore :loading="true" safe-area-bottom></cl-loadmore>
|
||||
</view>
|
||||
</cl-page>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user