ZF sun
7a76824fcf
1. 重构两个组件的H5端鼠标事件绑定逻辑，改用document级别capture监听解决uni-app自定义元素事件拦截问题 2. 添加拖拽阈值检测，避免点击误触发滚动 3. 新增click拦截逻辑，拖拽结束后自动屏蔽后续一次click事件防止误跳转 4. 优化滚动容器获取方式，兼容uni-app编译后的嵌套DOM结构
461 lines
15 KiB
Vue
461 lines
15 KiB
Vue
<template>
|
|
<view :style="componentStyle" data-component-name="diy-image-nav">
|
|
<scroll-view :class="['image-nav', value.showStyle == 'fixed' ? 'fixed-layout' : value.showStyle]"
|
|
:scroll-x="value.showStyle == 'singleSlide'">
|
|
<view class="uni-scroll-view-content">
|
|
<view v-for="(item, index) in value.list" :key="index" :class="['image-nav-item', value.mode]"
|
|
style="margin-right: 28rpx;">
|
|
<!-- 图片部分 -->
|
|
<view v-if="value.mode != 'text'" class="image-img" :style="{
|
|
'font-size': (value.imageSize * 2 + 'rpx') + ';',
|
|
'width': (item.imgWidth / 2 + 'rpx') + ';',
|
|
'height': (item.imgHeight / 2 + 'rpx') + ';'
|
|
}">
|
|
<image v-if="item.link.wap_url" :style="{
|
|
'width': (item.imgWidth / 2 + 'rpx') + ';',
|
|
'height': (item.imgHeight / 2 + 'rpx') + ';'
|
|
}" :src="$util.img(item.imageUrl) || $util.img('public/uniapp/default_img/goods.png')"
|
|
show-menu-by-longpress @tap.stop="redirectTo(item.link)"></image>
|
|
<image v-else :style="{
|
|
'width': (item.imgWidth / 2 + 'rpx') + ';',
|
|
'height': (item.imgHeight / 2 + 'rpx') + ';'
|
|
}" :src="$util.img(item.imageUrl) || $util.img('public/uniapp/default_img/goods.png')"
|
|
show-menu-by-longpress @tap.stop="previewImg(item.imageUrl)"></image>
|
|
</view>
|
|
|
|
<!-- 文字部分 -->
|
|
<text class="image-text" :style="{
|
|
'width': (item.imgWidth / 2 + 'rpx') + ';',
|
|
'font-size': (value.font.size * 2 + 'rpx') + ';',
|
|
'font-weight': value.font.weight + ';',
|
|
'color': value.font.color + ';'
|
|
}">{{ item.title }}</text>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
<ns-login ref="login"></ns-login>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import DiyMinx from './minx.js'
|
|
|
|
export default {
|
|
name: 'diy-image-nav',
|
|
props: {
|
|
value: {
|
|
type: Object,
|
|
default: () => ({})
|
|
}
|
|
},
|
|
mixins: [DiyMinx],
|
|
data() {
|
|
return {
|
|
pageWidth: '',
|
|
indicatorDots: false,
|
|
swiperCurrent: 0,
|
|
// H5 鼠标拖拽状态(singleSlide 模式专用)
|
|
slideIsDragging: false,
|
|
slideDidDrag: false, // 5px 阈值后置 true,用于判断 mouseup 后是否拦截 click
|
|
slideStartX: 0,
|
|
slideStartScrollLeft: 0,
|
|
_suppressNextClick: false // 拖拽结束后拦截一次 click,防止误触发跳转
|
|
}
|
|
},
|
|
created() {
|
|
// 组件创建时的逻辑
|
|
},
|
|
mounted() {
|
|
// H5 端:为 singleSlide 模式的 scroll-view 手动绑定 mouse/wheel 事件
|
|
// 原因:模板里写 @mousedown/@wheel 在小程序/鸿蒙端会产生"未知事件"警告,
|
|
// 所以 H5 专属事件全部在 mounted 中通过 addEventListener 绑定。
|
|
// $nextTick 是为了确保 ref 在 DOM 中已就绪(滚动容器总是存在的,无 v-if)。
|
|
// #ifdef H5
|
|
var self = this;
|
|
this.$nextTick(function() {
|
|
self.bindSlideMouseEvents();
|
|
});
|
|
// #endif
|
|
},
|
|
beforeDestroy() {
|
|
// #ifdef H5
|
|
this.unbindSlideMouseEvents();
|
|
// #endif
|
|
},
|
|
watch: {
|
|
componentRefresh(newValue) {
|
|
// 监听组件刷新
|
|
}
|
|
},
|
|
computed: {
|
|
componentStyle() {
|
|
let style = '';
|
|
style += 'background-color:' + this.value.componentBgColor + ';';
|
|
|
|
if (this.value.componentAngle == 'round') {
|
|
style += 'border-top-left-radius:' + (2 * this.value.topAroundRadius) + 'rpx;';
|
|
style += 'border-top-right-radius:' + (2 * this.value.topAroundRadius) + 'rpx;';
|
|
style += 'border-bottom-left-radius:' + (2 * this.value.bottomAroundRadius) + 'rpx;';
|
|
style += 'border-bottom-right-radius:' + (2 * this.value.bottomAroundRadius) + 'rpx;';
|
|
}
|
|
|
|
style += 'box-shadow:' + (this.value.ornament.type == 'shadow' ? '0 0 10rpx ' + this.value.ornament.color : '') + ';';
|
|
style += 'border:' + (this.value.ornament.type == 'stroke' ? '2rpx solid ' + this.value.ornament.color : '') + ';';
|
|
|
|
return style;
|
|
},
|
|
|
|
swiperHeight() {
|
|
let height = 0;
|
|
|
|
if (this.value.mode == 'graphic') {
|
|
height = (49 + this.value.imageSize) * this.value.pageCount;
|
|
} else if (this.value.mode == 'img') {
|
|
height = (22 + this.value.imageSize) * this.value.pageCount;
|
|
} else if (this.value.mode == 'text') {
|
|
height = 43 * this.value.pageCount;
|
|
}
|
|
|
|
return 'height:' + (2 * height) + 'rpx';
|
|
},
|
|
|
|
isIndicatorDots() {
|
|
return this.value.carousel.type != 'hide' &&
|
|
1 != Math.ceil(this.value.list.length / (this.value.pageCount * this.value.rowCount));
|
|
}
|
|
},
|
|
methods: {
|
|
// 页面跳转
|
|
redirectTo(link) {
|
|
if (!link.wap_url || this.$util.getCurrRoute() != this.$util.MEMBER_PAGE_URL || this.storeToken) {
|
|
this.$util.diyRedirectTo(link);
|
|
} else {
|
|
this.$refs.login.open(link.wap_url);
|
|
}
|
|
},
|
|
|
|
// 轮播切换
|
|
swiperChange(event) {
|
|
this.swiperCurrent = event.detail.current;
|
|
},
|
|
|
|
// ========== H5 singleSlide 鼠标拖拽支持 ==========
|
|
// 背景:uni-app 的 scroll-view 在 H5 端被编译为 div,虽然 overflow-x: auto 可让
|
|
// 浏览器渲染横向滚动条,但 scrollLeft 不响应鼠标拖拽(uni 的滚动逻辑不监听 mouse)。
|
|
// 因此 H5 下需要手动绑定 mousedown/mousemove/mouseup,模拟拖拽改变 scrollLeft。
|
|
// 同时绑定 wheel,让鼠标滚轮也能横向滚动(浏览器默认滚轮是垂直,需 preventDefault 后手动改 scrollLeft)。
|
|
// 仅在 singleSlide 模式下生效;fixed / pageSlide 走原逻辑。
|
|
//
|
|
// 关键设计:H5 专属事件全部在 mounted 中通过 addEventListener 绑定,而不是写在模板上,
|
|
// 避免小程序/鸿蒙端产生"未知事件"编译警告。所有端共用同一份模板。
|
|
bindSlideMouseEvents() {
|
|
// #ifdef H5
|
|
// 防止重复绑定
|
|
if (this._slideEventsBound) return;
|
|
var outerEl = this.getSlideOuterEl();
|
|
var innerEl = this.getSlideContainer();
|
|
if (!outerEl || !innerEl) return;
|
|
// 关键发现:uni-app 的 <uni-scroll-view> web component 内部用了 BetterScroll,
|
|
// 它会拦截 touch/mouse 事件;绑到 scroll-view 自身的 mousedown 收不到(目标被重定向到 HTML)。
|
|
// 解决:document 级别 capture 阶段监听 + 用 clientX/clientY 落在容器 bounding box 内才处理。
|
|
this._slideOuterEl = outerEl;
|
|
this._slideEl = innerEl;
|
|
this._slideEventsBound = true;
|
|
// document 级别 capture 阶段,先于 uni-app 内部的滚动库触发
|
|
document.addEventListener('mousedown', this.onSlideMouseDown, true);
|
|
document.addEventListener('wheel', this.onSlideWheel, { passive: false, capture: true });
|
|
// click 拦截:如果在 mousemove 中真的拖动了容器(mousedown 后 deltaX > 5),
|
|
// mouseup 时进入"忽略接下来一次 click"状态,防止拖拽结束后误触发跳转。
|
|
document.addEventListener('click', this.onSlideMaybeClick, true);
|
|
window.addEventListener('mousemove', this.onSlideMouseMove);
|
|
window.addEventListener('mouseup', this.onSlideMouseUp);
|
|
// #endif
|
|
},
|
|
unbindSlideMouseEvents() {
|
|
// #ifdef H5
|
|
document.removeEventListener('mousedown', this.onSlideMouseDown, true);
|
|
document.removeEventListener('wheel', this.onSlideWheel, true);
|
|
document.removeEventListener('click', this.onSlideMaybeClick, true);
|
|
window.removeEventListener('mousemove', this.onSlideMouseMove);
|
|
window.removeEventListener('mouseup', this.onSlideMouseUp);
|
|
this._slideOuterEl = null;
|
|
this._slideEventsBound = false;
|
|
// #endif
|
|
},
|
|
getSlideContainer() {
|
|
// #ifdef H5
|
|
// uni-app 的 scroll-view 在 H5 端编译为 <uni-scroll-view> web component,
|
|
// 嵌套结构:
|
|
// <uni-scroll-view> ← 自定义元素
|
|
// <div class="uni-scroll-view"> ← 第1层,visible
|
|
// <div class="uni-scroll-view"> ← 第2层,overflowX=auto (真滚动容器)
|
|
// 真正能响应 scrollLeft 的是第 2 层 div。
|
|
// 通过 data-component-name 找到本组件根 view,然后向下找 .uni-scroll-view。
|
|
var componentRoot = document.querySelector('[data-component-name="diy-image-nav"]');
|
|
if (!componentRoot) return null;
|
|
// 找 overflowX:auto 的 div.uni-scroll-view
|
|
var candidates = componentRoot.querySelectorAll('.uni-scroll-view');
|
|
for (var i = 0; i < candidates.length; i++) {
|
|
var s = getComputedStyle(candidates[i]).overflowX;
|
|
if (s === 'auto' || s === 'scroll') {
|
|
return candidates[i];
|
|
}
|
|
}
|
|
// 兜底:取最后一个 .uni-scroll-view(经验上最后一个就是真滚动容器)
|
|
return candidates.length > 0 ? candidates[candidates.length - 1] : null;
|
|
// #endif
|
|
},
|
|
getSlideOuterEl() {
|
|
// #ifdef H5
|
|
// 用于判断 mousedown/wheel 是否落在容器内(用最外层 <uni-scroll-view> 的 bounding box)
|
|
var componentRoot = document.querySelector('[data-component-name="diy-image-nav"]');
|
|
if (!componentRoot) return null;
|
|
var sc = componentRoot.querySelector('uni-scroll-view');
|
|
return sc || null;
|
|
// #endif
|
|
},
|
|
onSlideMouseDown(e) {
|
|
// #ifdef H5
|
|
if (this.value.showStyle != 'singleSlide') return;
|
|
// document 级别监听,只处理落在容器内的事件
|
|
// 关键:e.target 可能是 HTML 本身(BetterScroll 内部 stopPropagation 导致),
|
|
// 所以用 clientX/clientY 判断是否落在容器 bounding box 内。
|
|
if (!this._slideOuterEl) return;
|
|
var rect = this._slideOuterEl.getBoundingClientRect();
|
|
if (!rect) return;
|
|
var x = e.clientX, y = e.clientY;
|
|
if (x < rect.left || x > rect.right || y < rect.top || y > rect.bottom) return;
|
|
var el = this.getSlideContainer();
|
|
if (!el) return;
|
|
this.slideIsDragging = true;
|
|
this.slideStartX = x;
|
|
this.slideStartScrollLeft = el.scrollLeft;
|
|
this.slideDidDrag = false; // mousedown 时清零:5px 阈值后才置 true
|
|
this._suppressNextClick = false;
|
|
if (e.preventDefault) e.preventDefault();
|
|
// 注意:这里不调 stopPropagation,否则纯点击也不能触发 click/tap → 跳转
|
|
// #endif
|
|
},
|
|
onSlideMouseMove(e) {
|
|
// #ifdef H5
|
|
if (!this.slideIsDragging) return;
|
|
var el = this.getSlideContainer();
|
|
if (!el) return;
|
|
var x = (e.clientX != null) ? e.clientX : 0;
|
|
var deltaX = x - this.slideStartX;
|
|
// 5px 阈值:超过后标记已经拖动,后续 mouseup 会忽略接下来一次 click
|
|
if (!this.slideDidDrag && Math.abs(deltaX) >= 5) {
|
|
this.slideDidDrag = true;
|
|
}
|
|
// 反向:手指/鼠标往右拖 → 内容向右滚 → scrollLeft 减小
|
|
el.scrollLeft = this.slideStartScrollLeft - deltaX;
|
|
if (e.preventDefault) e.preventDefault();
|
|
// #endif
|
|
},
|
|
onSlideMouseUp() {
|
|
// #ifdef H5
|
|
this.slideIsDragging = false;
|
|
// 如果确实拖动过,标记接下来一次 click 应当被拦截(防止拖拽结束后误触发跳转)
|
|
if (this.slideDidDrag) {
|
|
this._suppressNextClick = true;
|
|
}
|
|
// #endif
|
|
},
|
|
// click 拦截:如果 mouseup 时设置了 _suppressNextClick,就拦截这一次 click 并清除标记
|
|
onSlideMaybeClick(e) {
|
|
// #ifdef H5
|
|
if (!this._suppressNextClick) return;
|
|
if (!e.target) return;
|
|
var outer = this._slideOuterEl;
|
|
if (!outer || !outer.contains(e.target)) return;
|
|
this._suppressNextClick = false;
|
|
if (e.preventDefault) e.preventDefault();
|
|
if (e.stopPropagation) e.stopPropagation();
|
|
if (e.stopImmediatePropagation) e.stopImmediatePropagation();
|
|
// #endif
|
|
},
|
|
onSlideWheel(e) {
|
|
// #ifdef H5
|
|
if (this.value.showStyle != 'singleSlide') return;
|
|
if (!this._slideOuterEl) return;
|
|
// 同 mouseDown:用 clientX/clientY 判断 wheel 是否落在容器内
|
|
var rect = this._slideOuterEl.getBoundingClientRect();
|
|
if (!rect) return;
|
|
var x = e.clientX, y = e.clientY;
|
|
if (x < rect.left || x > rect.right || y < rect.top || y > rect.bottom) return;
|
|
var el = this.getSlideContainer();
|
|
if (!el) return;
|
|
// 浏览器 wheel 事件的 deltaY 是垂直方向;此处把垂直滚轮映射到横向滚动
|
|
var dx = e.deltaX || 0;
|
|
var dy = e.deltaY || 0;
|
|
// 优先用 deltaX(触控板横向 / Shift+滚轮),否则用 deltaY(普通滚轮 → 转横向)
|
|
var step = dx !== 0 ? dx : dy;
|
|
el.scrollLeft += step;
|
|
if (e.preventDefault) e.preventDefault();
|
|
if (e.stopPropagation) e.stopPropagation();
|
|
// #endif
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.image-nav {
|
|
padding: 16rpx;
|
|
box-sizing: border-box;
|
|
|
|
&.fixed-layout {
|
|
.uni-scroll-view-content {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
}
|
|
|
|
&.singleSlide {
|
|
.uni-scroll-view-content {
|
|
display: flex;
|
|
}
|
|
|
|
.image-nav-item {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
// ========== H5 singleSlide 鼠标拖拽支持:横向滚动 ==========
|
|
// uni-app 在 H5 端会把 scroll-view 编译为 div,但默认样式不一定是
|
|
// overflow-x:auto → 横向内容溢出后无法滚动。需要显式声明。
|
|
// #ifdef H5
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
// 隐藏滚动条,视觉上仍保持单页布局;用户用鼠标拖拽/滚轮即可滚动
|
|
scrollbar-width: none; // Firefox
|
|
-ms-overflow-style: none; // IE/Edge legacy
|
|
&::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
// 禁止鼠标选中文字(拖拽时选中会显得很别扭)
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
// 拖拽时关闭过渡,避免 Chrome 的惯性滚动与 JS 抢控制权
|
|
-webkit-overflow-scrolling: touch;
|
|
// #endif
|
|
}
|
|
|
|
&.pageSlide {
|
|
position: relative;
|
|
|
|
.uni-swiper-dots-horizontal {
|
|
bottom: 0rpx;
|
|
}
|
|
|
|
&.straightLine {
|
|
.uni-swiper-dot {
|
|
width: 30rpx;
|
|
border-radius: 0;
|
|
height: 8rpx;
|
|
}
|
|
}
|
|
|
|
&.circle {
|
|
.uni-swiper-dot {
|
|
width: 14rpx;
|
|
height: 14rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.image-nav-wrap {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.image-nav-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 14rpx 0;
|
|
box-sizing: border-box;
|
|
|
|
.image-text {
|
|
padding-top: 12rpx;
|
|
line-height: 1.5;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
text-align: center;
|
|
|
|
&.alone {
|
|
padding-top: 0;
|
|
}
|
|
}
|
|
|
|
&.text {
|
|
.image-text {
|
|
padding-top: 0;
|
|
}
|
|
}
|
|
|
|
.image-img {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 90rpx;
|
|
|
|
.tag {
|
|
position: absolute;
|
|
top: -10rpx;
|
|
right: -24rpx;
|
|
color: #fff;
|
|
border-radius: 24rpx;
|
|
border-bottom-left-radius: 0;
|
|
-webkit-transform: scale(0.8);
|
|
transform: scale(0.8);
|
|
padding: 8rpx 16rpx;
|
|
line-height: 1;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.icon {
|
|
font-size: 50rpx;
|
|
color: #606266;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.swiper-dot-box {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-top: -20rpx;
|
|
padding-bottom: 8rpx;
|
|
|
|
.swiper-dot {
|
|
background-color: rgba(0, 0, 0, 0.3);
|
|
margin: 8rpx;
|
|
|
|
&.active {
|
|
background-color: #000;
|
|
}
|
|
}
|
|
|
|
&.straightLine {
|
|
.swiper-dot {
|
|
width: 30rpx;
|
|
border-radius: 0;
|
|
height: 8rpx;
|
|
}
|
|
}
|
|
|
|
&.circle {
|
|
.swiper-dot {
|
|
width: 15rpx;
|
|
border-radius: 50%;
|
|
height: 15rpx;
|
|
}
|
|
}
|
|
}
|
|
</style> |