SwtTt29
/
Mini-Program
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

修改详情内容页面图片点击方法，使用买蛋标签页的实现方式避免双指放大卡顿

pull/1/head
徐飞洋 3 months ago
parent
5cc9cc2069
commit
fd24a7604c
3 changed files with 137 additions and 176 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 40
      app.wxss
  2. 127
      pages/goods-detail/goods-detail.js
  3. 118
      pages/seller/index.wxml

40
app.wxss
View File

@ -1,44 +1,4 @@
/**app.wxss**/
/* 隐藏全局滚动条 - 全面覆盖 */
::-webkit-scrollbar,
*::-webkit-scrollbar {
display: none !important;
width: 0 !important;
height: 0 !important;
color: transparent !important;
background: transparent !important;
}
/* 隐藏所有可滚动元素的滚动条 */
page,
view,
scroll-view,
textarea,
picker-view,
::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-button,
::-webkit-scrollbar-corner {
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
-webkit-scrollbar: none !important;
}
/* 确保页面级滚动条隐藏 */
page {
overflow: auto !important;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
}
/* 针对iOS设备的特殊处理 */
@media screen and (max-width: 768px) {
::-webkit-scrollbar {
display: none !important;
}
}
.container {
display: flex;
flex-direction: column;

127
pages/goods-detail/goods-detail.js
View File

@ -81,9 +81,9 @@ Page({
productId: productIdStr,
name: product.productName,
price: product.price,
minOrder: product.quantity,
minOrder: product.minOrder || product.quantity,
yolk: product.yolk,
spec: product.specification,
spec: product.spec || product.specification,
region: product.region,
contact_phone: product.contact_phone || product.contactPhone,
product_contact: product.product_contact || product.contactName,
@ -169,9 +169,9 @@ Page({
productId: productIdStr,
name: product.productName,
price: product.price,
minOrder: product.quantity,
minOrder: product.minOrder || product.quantity,
yolk: product.yolk,
spec: product.specification,
spec: product.spec || product.specification,
region: product.region,
contact_phone: product.contact_phone || product.contactPhone,
product_contact: product.product_contact || product.contactName,
@ -222,24 +222,30 @@ Page({
this.setData({
showImagePreview: true,
previewImageUrls: urls,
previewImageIndex: index || 0,
// 重置图片缩放状态
scale: 1,
offsetX: 0,
offsetY: 0,
isScaling: false
previewImageIndex: parseInt(index || 0)
});
this.resetZoom();
},
// 关闭图片预览
closeImagePreview() {
this.setData({
showImagePreview: false,
// 重置图片缩放状态
showImagePreview: false
});
this.resetZoom();
},
// 重置缩放状态
resetZoom() {
this.setData({
scale: 1,
offsetX: 0,
offsetY: 0,
isScaling: false
lastScale: 1,
startDistance: 0,
isScaling: false,
initialTouch: null,
lastTapTime: 0
});
},
@ -247,74 +253,78 @@ Page({
onPreviewImageChange(e) {
console.log('图片预览切换:', e);
this.setData({
previewImageIndex: e.detail.current,
// 重置当前图片的缩放状态
scale: 1,
offsetX: 0,
offsetY: 0,
isScaling: false
previewImageIndex: e.detail.current
});
// 切换图片时重置缩放状态
this.resetZoom();
},
// 处理图片点击事件（双击放大/缩小）
// 处理图片点击事件（单击/双击判断）
handleImageTap(e) {
console.log('图片点击事件:', e);
const now = Date.now();
const DOUBLE_TAP_DELAY = 300;
const currentTime = Date.now();
const lastTapTime = this.data.lastTapTime || 0;
// 检查是否为双击
if (now - this.lastTapTime < DOUBLE_TAP_DELAY) {
// 判断是否为双击（300ms内连续点击）
if (currentTime - lastTapTime < 300) {
// 双击事件
if (this.doubleTapTimer) {
clearTimeout(this.doubleTapTimer);
if (this.data.doubleTapTimer) {
clearTimeout(this.data.doubleTapTimer);
}
// 切换缩放状态
// 切换放大/缩小状态
const newScale = this.data.scale === 1 ? 2 : 1;
this.setData({
scale: newScale,
isScaling: false
lastScale: newScale,
offsetX: 0,
offsetY: 0,
lastTapTime: 0 // 重置双击状态
});
} else {
// 单击事件，设置双击计时器
if (this.doubleTapTimer) {
clearTimeout(this.doubleTapTimer);
// 单击事件，设置延迟来检测是否会成为双击
if (this.data.doubleTapTimer) {
clearTimeout(this.data.doubleTapTimer);
}
this.doubleTapTimer = setTimeout(() => {
// 单击后300毫秒内没有第二次点击，视为单击
// 可以在这里添加单击事件的处理逻辑
}, DOUBLE_TAP_DELAY);
this.setData({
lastTapTime: currentTime,
doubleTapTimer: setTimeout(() => {
// 确认是单击，关闭图片预览
this.closeImagePreview();
}, 300)
});
}
this.lastTapTime = now;
},
// 计算两点之间的距离
getDistance(point1, point2) {
const dx = point2.clientX - point1.clientX;
const dy = point2.clientY - point1.clientY;
calculateDistance(touch1, touch2) {
const dx = touch2.clientX - touch1.clientX;
const dy = touch2.clientY - touch1.clientY;
return Math.sqrt(dx * dx + dy * dy);
},
// 处理触摸开始事件
handleTouchStart(e) {
console.log('触摸开始事件:', e);
if (e.touches.length === 2) {
// 双指触摸，计算初始距离
this.setData({
startDistance: this.getDistance(e.touches[0], e.touches[1]),
lastScale: this.data.scale,
isScaling: true
});
} else if (e.touches.length === 1) {
// 单指触摸，记录初始位置
const touches = e.touches;
if (touches.length === 1) {
// 单指：准备拖动
this.setData({
initialTouch: {
x: e.touches[0].clientX,
y: e.touches[0].clientY
x: touches[0].clientX,
y: touches[0].clientY
}
});
} else if (touches.length === 2) {
// 双指：记录起始距离，准备缩放
const distance = this.calculateDistance(touches[0], touches[1]);
this.setData({
startDistance: distance,
isScaling: true,
lastScale: this.data.scale
});
}
},
@ -351,7 +361,7 @@ Page({
});
} else if (touches.length === 2) {
// 双指缩放
const currentDistance = this.getDistance(touches[0], touches[1]);
const currentDistance = this.calculateDistance(touches[0], touches[1]);
const scale = (currentDistance / this.data.startDistance) * this.data.lastScale;
// 限制缩放范围在0.5倍到3倍之间
@ -367,22 +377,11 @@ Page({
// 处理触摸结束事件
handleTouchEnd(e) {
console.log('触摸结束事件:', e);
if (e.touches.length === 0) {
// 触摸结束，更新最后缩放比例
this.setData({
lastScale: this.data.scale,
isScaling: false,
lastScale: this.data.scale,
initialTouch: null
});
} else if (e.touches.length === 1) {
// 单指触摸结束，保留初始触摸点
this.setData({
initialTouch: {
x: e.touches[0].clientX,
y: e.touches[0].clientY
}
});
}
},
// 拨打电话

118
pages/seller/index.wxml
View File

@ -55,58 +55,72 @@
<block wx:if="{{isPublishedExpanded}}">
<block wx:if="{{publishedSupplies.length > 0}}">
<view wx:for="{{publishedSupplies}}" wx:key="id" class="supply-card">
<!-- 图片和信息1:1比例并排显示 -->
<view style="display: flex; width: 100%; border-radius: 8rpx; overflow: hidden; background-color: #f5f5f5;">
<!-- 左侧图片区域 50%宽度 -->
<view style="width: 50%; position: relative;">
<!-- 第一张图片 -->
<view wx:if="{{item.imageUrls && item.imageUrls.length > 0}}" style="width: 100%; height: 100%;">
<image src="{{item.imageUrls[0]}}" mode="aspectFill" style="width: 100%; height: 100%;" bindtap="previewImage" data-urls="{{item.imageUrls}}" data-index="0"></image>
</view>
<view wx:else style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #999;">
<text>暂无图片</text>
</view>
<!-- 剩余图片可滑动区域 -->
<view wx:if="{{item.imageUrls && item.imageUrls.length > 1}}" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
<!-- 垂直布局：图片在上，信息在下 -->
<view class="card-image-section">
<!-- 图片展示区域 -->
<view class="image-container">
<!-- 图片轮播 -->
<swiper
class="image-swiper"
style="width: 100%; height: 100%; --swiper-navigation-size: 0;"
current="{{item.currentImageIndex || 0}}"
bindchange="swiperChange"
data-id="{{item.id}}"
indicator-dots="false"
show-indicators="false">
data-id="{{item.id}}">
<block wx:for="{{item.imageUrls}}" wx:for-item="img" wx:for-index="idx" wx:key="idx">
<swiper-item>
<image src="{{img}}" mode="aspectFill" style="width: 100%; height: 100%;" bindtap="previewImage" data-urls="{{item.imageUrls}}" data-index="{{idx}}"></image>
<image src="{{img}}" mode="aspectFill" class="supply-image" bindtap="previewImage" data-urls="{{item.imageUrls}}" data-index="{{idx}}"
loading="lazy"
fallback-src="../../images/logo.svg"></image>
</swiper-item>
</block>
</swiper>
<!-- 无图片占位 -->
<view wx:if="{{!item.imageUrls || item.imageUrls.length === 0}}" class="no-image">
<text>暂无图片</text>
</view>
<!-- 显示页码指示器 -->
<view style="position: absolute; bottom: 10rpx; right: 10rpx; background-color: rgba(0,0,0,0.5); color: white; padding: 5rpx 10rpx; border-radius: 15rpx; font-size: 20rpx;">
<view wx:if="{{item.imageUrls && item.imageUrls.length > 1}}" class="swiper-pagination">
{{(item.currentImageIndex || 0) + 1}}/{{item.imageUrls.length}}
</view>
</view>
</view>
<!-- 右侧信息区域 50%宽度 -->
<view style="width: 50%; padding: 15rpx; display: flex; flex-direction: column; justify-content: space-between; background-color: white; border-left: 1rpx solid #f0f0f0;">
<view bindtap="showGoodsDetail" data-item="{{item}}">
<view style="font-size: 28rpx; font-weight: bold; word-break: break-word;">{{item.name}}
<view style="display: inline-block; margin-left: 10rpx; font-size: 18rpx; color: #fff; background-color: #52c41a; padding: 2rpx 8rpx; border-radius: 10rpx;">已上架</view>
<!-- 信息区域 -->
<view class="card-info-section" bindtap="showGoodsDetail" data-item="{{item}}">
<view class="supply-name-row">
<view class="supply-name">{{item.name}}</view>
<view class="supply-status published">已上架</view>
</view>
<view class="supply-details">
<view class="detail-item">
<text class="detail-label">蛋黄:</text>
<text class="detail-value">{{item.yolk || '无'}}</text>
</view>
<view class="detail-item">
<text class="detail-label">规格:</text>
<text class="detail-value">{{item.spec || '无'}}</text>
</view>
<view class="detail-item">
<text class="detail-label">件数:</text>
<text class="detail-value">{{item.minOrder}}件</text>
</view>
<view class="detail-item">
<text class="detail-label">斤重:</text>
<text class="detail-value">{{item.grossWeight || ''}}斤</text>
</view>
<view class="detail-item">
<text class="detail-label">地区:</text>
<text class="detail-value">{{item.region || '未设置'}}</text>
</view>
<view class="detail-item">
<text class="detail-label">创建时间:</text>
<text class="detail-value">{{item.formattedCreatedAt}}</text>
</view>
<view style="font-size: 24rpx; color: #666; margin-top: 8rpx;">蛋黄: {{item.yolk || '无'}}</view>
<view style="font-size: 24rpx; color: #666; margin-top: 8rpx;">规格: {{item.spec || '无'}}</view>
<view style="color: #f5222d; font-size: 24rpx; margin-top: 8rpx;">件数: {{item.minOrder}}件</view>
<view style="color: #1677ff; font-size: 24rpx; margin-top: 8rpx;">斤重: {{item.grossWeight || ''}}斤</view>
<view style="color: #722ed1; font-size: 24rpx; margin-top: 8rpx;">地区: {{item.region || '未设置'}}</view>
<view style="font-size: 22rpx; color: #999; margin-top: 8rpx;">创建时间: {{item.formattedCreatedAt}}</view>
</view>
<!-- 按钮区域 -->
<view style="display: flex; justify-content: space-around; margin-top: 10rpx; gap: 10rpx;">
<view class="card-actions">
<button
style="background-color: #f5222d; color: white; font-size: 22rpx; padding: 0 15rpx; line-height: 60rpx;"
class="action-btn unpublish-btn"
catchtap="unpublishSupply"
data-id="{{item.id}}"
>
@ -115,7 +129,6 @@
</view>
</view>
</view>
</view>
<!-- 已上架货源加载更多 -->
<view class="load-more" wx:if="{{pagination.published.hasMore}}">
@ -165,12 +178,10 @@
<view wx:if="{{item.imageUrls && item.imageUrls.length > 1}}" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
<swiper
class="image-swiper"
style="width: 100%; height: 100%; --swiper-navigation-size: 0;"
style="width: 100%; height: 100%;"
current="{{item.currentImageIndex || 0}}"
bindchange="swiperChange"
data-id="{{item.id}}"
indicator-dots="false"
show-indicators="false">
data-id="{{item.id}}">
<block wx:for="{{item.imageUrls}}" wx:for-item="img" wx:for-index="idx" wx:key="idx">
<swiper-item>
<image src="{{img}}" mode="aspectFill" style="width: 100%; height: 100%;" bindtap="previewImage" data-urls="{{item.imageUrls}}" data-index="{{idx}}"></image>
@ -268,12 +279,10 @@
<view wx:if="{{item.imageUrls && item.imageUrls.length > 1}}" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
<swiper
class="image-swiper"
style="width: 100%; height: 100%; --swiper-navigation-size: 0;"
style="width: 100%; height: 100%;"
current="{{item.currentImageIndex || 0}}"
bindchange="swiperChange"
data-id="{{item.id}}"
indicator-dots="false"
show-indicators="false">
data-id="{{item.id}}">
<block wx:for="{{item.imageUrls}}" wx:for-item="img" wx:for-index="idx" wx:key="idx">
<swiper-item>
<image src="{{img}}" mode="aspectFill" style="width: 100%; height: 100%;" bindtap="previewImage" data-urls="{{item.imageUrls}}" data-index="{{idx}}"></image>
@ -375,12 +384,10 @@
<view wx:if="{{item.imageUrls && item.imageUrls.length > 1}}" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
<swiper
class="image-swiper"
style="width: 100%; height: 100%; --swiper-navigation-size: 0;"
style="width: 100%; height: 100%;"
current="{{item.currentImageIndex || 0}}"
bindchange="swiperChange"
data-id="{{item.id}}"
indicator-dots="false"
show-indicators="false">
data-id="{{item.id}}">
<block wx:for="{{item.imageUrls}}" wx:for-item="img" wx:for-index="idx" wx:key="idx">
<swiper-item>
<image src="{{img}}" mode="aspectFill" style="width: 100%; height: 100%;" bindtap="previewImage" data-urls="{{item.imageUrls}}" data-index="{{idx}}"></image>
@ -469,7 +476,7 @@
<!-- 固定的关闭按钮 -->
<view style="position: absolute; top: 20rpx; right: 20rpx; background-color: #f5f5f5; color: #666; width: 60rpx; height: 60rpx; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 36rpx; z-index: 10;" bindtap="hideModal">×</view>
<scroll-view scroll-y="true" scrollbar-style="none" style="height: 100vh; padding: 40rpx; box-sizing: border-box; overflow-y: scroll; -webkit-overflow-scrolling: touch; transform: translateZ(0); -webkit-transform: translateZ(0); -webkit-scrollbar: none; scrollbar-width: none;" catchtouchmove="true" bindtouchstart="onModalTouchStart" bindtouchmove="onModalTouchMove">
<scroll-view scroll-y="true" style="height: 100vh; padding: 40rpx; box-sizing: border-box; overflow-y: scroll; -webkit-overflow-scrolling: touch; transform: translateZ(0); -webkit-transform: translateZ(0); -webkit-scrollbar: none; scrollbar-width: none;" catchtouchmove="true" bindtouchstart="onModalTouchStart" bindtouchmove="onModalTouchMove">
<view class="title" style="text-align: center; font-size: 36rpx; font-weight: bold; color: #333; margin-bottom: 30rpx; margin-top: 10rpx;">创建货源</view>
<!-- 照片上传区域 -->
@ -553,7 +560,7 @@
<view bindtap="saveEdit" style="font-size: 32rpx; color: #07c160;">提交</view>
</view>
<scroll-view scroll-y="true" scrollbar-style="none" style="height: calc(100vh - 90rpx); overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 40rpx 60rpx; box-sizing: border-box; -webkit-scrollbar: none; scrollbar-width: none; transform: translateZ(0); -webkit-transform: translateZ(0);">
<scroll-view scroll-y="true" style="height: calc(100vh - 90rpx); overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 40rpx 60rpx; box-sizing: border-box;">
<view>
<!-- 照片上传区域 -->
@ -632,13 +639,12 @@
<view class="image-preview-mask" wx:if="{{showImagePreview}}" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.9); display: flex; justify-content: center; align-items: center; z-index: 9999;" catchtouchmove="true" bindtap="closeImagePreview">
<view style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;">
<swiper
style="width: 100%; height: 100%; --swiper-navigation-size: 0;"
style="width: 100%; height: 100%;"
current="{{previewImageIndex}}"
bindchange="onPreviewImageChange"
indicator-dots="true"
indicator-color="rgba(255,255,255,0.5)"
indicator-active-color="#fff"
show-indicators="false">
indicator-active-color="#fff">
<block wx:for="{{previewImageUrls}}" wx:key="*this">
<swiper-item>
<image
@ -693,8 +699,7 @@
<!-- 蛋黄列表 -->
<scroll-view
scroll-y="true"
scrollbar-style="none"
style="max-height: 60vh; padding: 0; -webkit-overflow-scrolling: touch; -webkit-scrollbar: none; scrollbar-width: none; transform: translateZ(0); -webkit-transform: translateZ(0);"
style="max-height: 60vh; padding: 0; -webkit-overflow-scrolling: touch; -webkit-scrollbar: none; scrollbar-width: none;"
enable-back-to-top="false"
>
<view
@ -723,8 +728,7 @@
<!-- 商品名称列表 -->
<scroll-view
scroll-y="true"
scrollbar-style="none"
style="max-height: 60vh; padding: 0; -webkit-overflow-scrolling: touch; -webkit-scrollbar: none; scrollbar-width: none; transform: translateZ(0); -webkit-transform: translateZ(0);"
style="max-height: 60vh; padding: 0; -webkit-overflow-scrolling: touch;"
enable-back-to-top="false"
>
<view
@ -774,8 +778,7 @@
<!-- 规格列表 -->
<scroll-view
scroll-y="true"
scrollbar-style="none"
style="max-height: 60vh; padding: 0; -webkit-overflow-scrolling: touch; -webkit-scrollbar: none; scrollbar-width: none; transform: translateZ(0); -webkit-transform: translateZ(0);"
style="max-height: 60vh; padding: 0; -webkit-overflow-scrolling: touch;"
enable-back-to-top="false"
>
<view
@ -894,9 +897,8 @@
<!-- 搜索结果区域 -->
<scroll-view
wx:if="{{showSearchResults}}"
style="max-height: 200rpx; border-bottom: 1rpx solid #eee; -webkit-scrollbar: none; scrollbar-width: none; transform: translateZ(0); -webkit-transform: translateZ(0);"
style="max-height: 200rpx; border-bottom: 1rpx solid #eee; -webkit-scrollbar: none; scrollbar-width: none;"
scroll-y
scrollbar-style="none"
>
<view
wx:for="{{filteredRegionOptions}}"

Write Preview
Loading…
Cancel
Save