|
@@ -6,7 +6,7 @@
|
|
|
<div class="h-[60px] flex justify-between items-center">
|
|
|
<div
|
|
|
class="flex-1 h-full pr-[10px] flex items-center justify-between cursor-pointer overflow-hidden">
|
|
|
- <div
|
|
|
+ <div @click="handleLeftClick"
|
|
|
class="text-[#999] shrink-0 flex items-center justify-center h-[34px] w-[44px] border border-[#e6e6e6] rounded-[12px]">
|
|
|
<el-icon>
|
|
|
<ArrowLeft />
|
|
@@ -35,7 +35,7 @@
|
|
|
<img :src="product.image" :alt="product.name" class="w-25 h-25 my-1 object-cover rounded-full" />
|
|
|
</div>
|
|
|
<div class="text-left px-2">
|
|
|
- <h3 class="text-gray-800 font-medium text-sm mb-2 h-8">{{ product.name }}</h3>
|
|
|
+ <h3 class="text-gray-800 font-medium text-sm mb-2 text-container w-full text-nowrap line-clamp-2 sm:line-clamp-1 md:line-clamp-2 lg:line-clamp-3">{{ product.name }}</h3>
|
|
|
<p class="text-orange-500 font-semibold">${{ product.price.toFixed(2) }}</p>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -58,8 +58,21 @@ import rightOrder from './components/rightOrder/rightOrder.vue'
|
|
|
const { t } = useI18n()
|
|
|
const store = useStore()
|
|
|
const { count } = storeToRefs(store)
|
|
|
+// 响应式数据
|
|
|
+const currentIndex = ref(0)
|
|
|
+const itemWidth = ref(0)
|
|
|
const scrollRef = ref(null)
|
|
|
|
|
|
+// 计算元素宽度
|
|
|
+const calculateItemWidth = () => {
|
|
|
+ nextTick(() => {
|
|
|
+ const element = scrollRef.value?.children[0]
|
|
|
+ if (element) {
|
|
|
+ const style = window.getComputedStyle(element)
|
|
|
+ itemWidth.value = element.offsetWidth + parseInt(style.marginRight)
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
onMounted(() => {
|
|
|
|
|
|
})
|
|
@@ -113,36 +126,33 @@ const products = ref([
|
|
|
image: 'https://ai-public.mastergo.com/ai/img_res/210debe79bb22fec1944cab575f2759f.jpg'
|
|
|
}
|
|
|
]);
|
|
|
+// 生命周期钩子
|
|
|
+onMounted(() => {
|
|
|
+ calculateItemWidth()
|
|
|
+})
|
|
|
+
|
|
|
+// 左按钮点击
|
|
|
const handleLeftClick = () => {
|
|
|
- if (!scrollRef.value) return;
|
|
|
- const target = findTargetElement(scrollRef.value);
|
|
|
- const leftSibling = target.previousElementSibling;
|
|
|
- if (leftSibling) {
|
|
|
- scrollRef.value.scrollLeft = leftSibling.offsetLeft - (scrollRef.value.offsetWidth - leftSibling.offsetWidth) / 2;
|
|
|
- }
|
|
|
-};
|
|
|
+ if (currentIndex.value <= 0) return
|
|
|
+ currentIndex.value--
|
|
|
+ scrollToPosition()
|
|
|
+}
|
|
|
|
|
|
+// 右按钮点击
|
|
|
const handleRightClick = () => {
|
|
|
- if (!scrollRef.value) return;
|
|
|
- const target = findTargetElement(scrollRef.value);
|
|
|
- const rightSibling = target.nextElementSibling;
|
|
|
- if (rightSibling) {
|
|
|
- scrollRef.value.scrollLeft = rightSibling.offsetLeft - (scrollRef.value.offsetWidth - rightSibling.offsetWidth) / 2;
|
|
|
- }
|
|
|
-};
|
|
|
+ // 假设products通过props传入
|
|
|
+ if (currentIndex.value >= products.value.length - 1) return
|
|
|
+ currentIndex.value++
|
|
|
+ scrollToPosition()
|
|
|
+}
|
|
|
|
|
|
-const findTargetElement = (scrollContainer) => {
|
|
|
- const scrollLeft = scrollContainer.scrollLeft;
|
|
|
- const children = scrollContainer.children[0].children;
|
|
|
- for (let i = 0; i < children.length; i++) {
|
|
|
- const child = children[i];
|
|
|
- const childEnd = child.offsetLeft + child.offsetWidth;
|
|
|
- if (child.offsetLeft <= scrollLeft + scrollContainer.offsetWidth && childEnd > scrollLeft) {
|
|
|
- return child;
|
|
|
- }
|
|
|
- }
|
|
|
- return children[0];
|
|
|
-};
|
|
|
+// 执行滚动
|
|
|
+const scrollToPosition = () => {
|
|
|
+ scrollRef.value?.scrollTo({
|
|
|
+ left: itemWidth.value * currentIndex.value,
|
|
|
+ behavior: 'smooth'
|
|
|
+ })
|
|
|
+}
|
|
|
</script>
|
|
|
<style scoped>
|
|
|
::-webkit-scrollbar-thumb {
|
|
@@ -157,4 +167,9 @@ const findTargetElement = (scrollContainer) => {
|
|
|
::-webkit-scrollbar-track {
|
|
|
display: none;
|
|
|
}
|
|
|
+.text-container {
|
|
|
+ width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
</style>
|