优化细节
This commit is contained in:
@@ -21,14 +21,17 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
|
// #ifdef APP
|
||||||
import { shareWithSystem } from "@/uni_modules/cool-share";
|
import { shareWithSystem } from "@/uni_modules/cool-share";
|
||||||
|
// #endif
|
||||||
import DemoItem from "../components/item.uvue";
|
import DemoItem from "../components/item.uvue";
|
||||||
import { t } from "@/locale";
|
import { t } from "@/locale";
|
||||||
|
|
||||||
function shareText() {
|
function shareText() {
|
||||||
|
// #ifdef APP
|
||||||
shareWithSystem({
|
shareWithSystem({
|
||||||
type: "text",
|
type: "text",
|
||||||
title: "Cool Unix 是一个高效的项目脚手架",
|
title: "Cool Unix",
|
||||||
summary: "Cool Unix 是一个高效的项目脚手架",
|
summary: "Cool Unix 是一个高效的项目脚手架",
|
||||||
success: () => {
|
success: () => {
|
||||||
console.log("success");
|
console.log("success");
|
||||||
@@ -37,9 +40,11 @@ function shareText() {
|
|||||||
console.log("fail", error);
|
console.log("fail", error);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
// #endif
|
||||||
}
|
}
|
||||||
|
|
||||||
function shareImage() {
|
function shareImage() {
|
||||||
|
// #ifdef APP
|
||||||
shareWithSystem({
|
shareWithSystem({
|
||||||
type: "image",
|
type: "image",
|
||||||
url: "https://cool-js.com/logo.png",
|
url: "https://cool-js.com/logo.png",
|
||||||
@@ -47,9 +52,11 @@ function shareImage() {
|
|||||||
console.log("success");
|
console.log("success");
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
// #endif
|
||||||
}
|
}
|
||||||
|
|
||||||
function shareFile() {
|
function shareFile() {
|
||||||
|
// #ifdef APP
|
||||||
shareWithSystem({
|
shareWithSystem({
|
||||||
type: "file",
|
type: "file",
|
||||||
url: "https://show.cool-admin.com/用户导入模版.xlsx",
|
url: "https://show.cool-admin.com/用户导入模版.xlsx",
|
||||||
@@ -57,9 +64,11 @@ function shareFile() {
|
|||||||
console.log("success");
|
console.log("success");
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
// #endif
|
||||||
}
|
}
|
||||||
|
|
||||||
function shareLink() {
|
function shareLink() {
|
||||||
|
// #ifdef APP
|
||||||
shareWithSystem({
|
shareWithSystem({
|
||||||
type: "link",
|
type: "link",
|
||||||
url: "https://cool-js.com/",
|
url: "https://cool-js.com/",
|
||||||
@@ -67,6 +76,7 @@ function shareLink() {
|
|||||||
console.log("success");
|
console.log("success");
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
// #endif
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -52,7 +52,8 @@
|
|||||||
|
|
||||||
<view class="list">
|
<view class="list">
|
||||||
<cl-row :gutter="10">
|
<cl-row :gutter="10">
|
||||||
<cl-col :span="6" v-for="child in item.children" :key="child.label">
|
<template v-for="child in item.children" :key="child.label">
|
||||||
|
<cl-col :span="6" v-if="child.hidden != true">
|
||||||
<view
|
<view
|
||||||
class="item dark:!bg-surface-800"
|
class="item dark:!bg-surface-800"
|
||||||
hover-class="opacity-80"
|
hover-class="opacity-80"
|
||||||
@@ -68,6 +69,7 @@
|
|||||||
>
|
>
|
||||||
</view>
|
</view>
|
||||||
</cl-col>
|
</cl-col>
|
||||||
|
</template>
|
||||||
</cl-row>
|
</cl-row>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@@ -85,7 +87,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { isMp, router, useRefs } from "@/cool";
|
import { isApp, isMp, router, useRefs } from "@/cool";
|
||||||
import { t } from "@/locale";
|
import { t } from "@/locale";
|
||||||
import { computed } from "vue";
|
import { computed } from "vue";
|
||||||
import { useUi } from "@/uni_modules/cool-ui";
|
import { useUi } from "@/uni_modules/cool-ui";
|
||||||
@@ -102,6 +104,7 @@ type Item = {
|
|||||||
icon?: string;
|
icon?: string;
|
||||||
path?: string;
|
path?: string;
|
||||||
disabled?: boolean;
|
disabled?: boolean;
|
||||||
|
hidden?: boolean;
|
||||||
children?: Item[];
|
children?: Item[];
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -475,7 +478,8 @@ const data = computed<Item[]>(() => {
|
|||||||
{
|
{
|
||||||
label: "Share",
|
label: "Share",
|
||||||
icon: "share-line",
|
icon: "share-line",
|
||||||
path: "/pages/demo/other/share"
|
path: "/pages/demo/other/share",
|
||||||
|
hidden: !isApp()
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -4,17 +4,16 @@
|
|||||||
>Apple/苹果 iPhone 15 (A3092) 128GB 黑色 支持移动联通电信5G 双卡双待手机</cl-text
|
>Apple/苹果 iPhone 15 (A3092) 128GB 黑色 支持移动联通电信5G 双卡双待手机</cl-text
|
||||||
>
|
>
|
||||||
|
|
||||||
<view class="flex flex-row items-center mb-3 overflow-visible">
|
<view class="flex flex-row items-center mb-3">
|
||||||
<view class="flex flex-row items-end overflow-visible">
|
<view class="flex flex-row items-end">
|
||||||
<cl-text color="error" :pt="{ className: 'font-bold text-sm' }">¥</cl-text>
|
<cl-text color="error" :pt="{ className: 'font-bold text-sm' }">¥</cl-text>
|
||||||
<cl-text
|
<cl-text
|
||||||
type="amount"
|
type="amount"
|
||||||
:value="8499"
|
:value="8499"
|
||||||
color="error"
|
color="error"
|
||||||
:size="44"
|
|
||||||
currency=""
|
currency=""
|
||||||
:pt="{
|
:pt="{
|
||||||
className: 'font-bold ml-1'
|
className: 'font-bold ml-1 text-2xl'
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
</cl-text>
|
</cl-text>
|
||||||
|
|||||||
@@ -302,9 +302,9 @@ function startAutoplay() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// 触摸起始Y坐标
|
// 触摸起始Y坐标
|
||||||
let touchStartY = 0
|
let touchStartY = 0;
|
||||||
// 横向滑动参数
|
// 横向滑动参数
|
||||||
let touchHorizontal = 0
|
let touchHorizontal = 0;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 处理触摸开始事件
|
* 处理触摸开始事件
|
||||||
@@ -328,7 +328,7 @@ function onTouchStart(e: TouchEvent) {
|
|||||||
isAnimating.value = false;
|
isAnimating.value = false;
|
||||||
touchStartPoint.value = e.touches[0].clientX;
|
touchStartPoint.value = e.touches[0].clientX;
|
||||||
touchStartY = e.touches[0].clientY;
|
touchStartY = e.touches[0].clientY;
|
||||||
touchHorizontal = 0
|
touchHorizontal = 0;
|
||||||
touchStartTimestamp.value = Date.now();
|
touchStartTimestamp.value = Date.now();
|
||||||
initialOffset.value = slideOffset.value;
|
initialOffset.value = slideOffset.value;
|
||||||
}
|
}
|
||||||
@@ -341,24 +341,24 @@ function onTouchStart(e: TouchEvent) {
|
|||||||
function onTouchMove(e: TouchEvent) {
|
function onTouchMove(e: TouchEvent) {
|
||||||
if (props.list.length <= 1 || props.disableTouch || !isTouching.value) return;
|
if (props.list.length <= 1 || props.disableTouch || !isTouching.value) return;
|
||||||
|
|
||||||
const x = touchStartPoint.value - e.touches[0].clientX
|
const x = touchStartPoint.value - e.touches[0].clientX;
|
||||||
if (touchHorizontal == 0) {
|
if (touchHorizontal == 0) {
|
||||||
// 只在horizontal=0时判断一次
|
// 只在horizontal=0时判断一次
|
||||||
const y = touchStartY - e.touches[0].clientY
|
const y = touchStartY - e.touches[0].clientY;
|
||||||
|
|
||||||
if (Math.abs(x) > Math.abs(y)) {
|
if (Math.abs(x) > Math.abs(y)) {
|
||||||
// 如果x轴移动距离大于y轴移动距离则表明是横向移动手势
|
// 如果x轴移动距离大于y轴移动距离则表明是横向移动手势
|
||||||
touchHorizontal = 1
|
touchHorizontal = 1;
|
||||||
}
|
}
|
||||||
if (touchHorizontal == 1) {
|
if (touchHorizontal == 1) {
|
||||||
// 如果是横向移动手势,则阻止默认行为(防止页面滚动)
|
// 如果是横向移动手势,则阻止默认行为(防止页面滚动)
|
||||||
e.preventDefault()
|
e.preventDefault();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 横向移动时才处理
|
// 横向移动时才处理
|
||||||
if (touchHorizontal != 1) {
|
if (touchHorizontal != 1) {
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 计算手指移动距离,实时更新偏移量
|
// 计算手指移动距离,实时更新偏移量
|
||||||
@@ -442,7 +442,7 @@ onMounted(() => {
|
|||||||
defineExpose({
|
defineExpose({
|
||||||
onTouchStart,
|
onTouchStart,
|
||||||
onTouchMove,
|
onTouchMove,
|
||||||
onTouchEnd,
|
onTouchEnd
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user