ZF sun
75bc8876b5
1. 给diy-image-nav组件新增singleSlide模式下H5端鼠标拖拽和滚轮横向滚动功能，修复uni-app scroll-view在H5端不支持鼠标拖拽的问题，同时添加对应样式优化 2. 给diy-article组件的跑马灯列表新增H5端鼠标拖拽和滚轮滚动支持，复用原有触摸事件逻辑适配鼠标操作，优化拖拽交互体验 3. 统一采用mounted绑定H5专属事件的方式，避免小程序/鸿蒙端出现未知事件编译警告
393 lines
11 KiB
Vue
393 lines
11 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'"
|
|
ref="scrollContainer">
|
|
<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,
|
|
slideStartX: 0,
|
|
slideStartScrollLeft: 0
|
|
}
|
|
},
|
|
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 el = this.getSlideContainer();
|
|
if (!el) return;
|
|
// 容器上绑定 mousedown/wheel;mouseup/mousemove 挂在 window,避免鼠标移出容器后丢失
|
|
this._slideEl = el;
|
|
this._slideEventsBound = true;
|
|
el.addEventListener('mousedown', this.onSlideMouseDown);
|
|
el.addEventListener('wheel', this.onSlideWheel);
|
|
window.addEventListener('mousemove', this.onSlideMouseMove);
|
|
window.addEventListener('mouseup', this.onSlideMouseUp);
|
|
// #endif
|
|
},
|
|
unbindSlideMouseEvents() {
|
|
// #ifdef H5
|
|
if (this._slideEl) {
|
|
this._slideEl.removeEventListener('mousedown', this.onSlideMouseDown);
|
|
this._slideEl.removeEventListener('wheel', this.onSlideWheel);
|
|
this._slideEl = null;
|
|
}
|
|
window.removeEventListener('mousemove', this.onSlideMouseMove);
|
|
window.removeEventListener('mouseup', this.onSlideMouseUp);
|
|
this._slideEventsBound = false;
|
|
// #endif
|
|
},
|
|
getSlideContainer() {
|
|
// #ifdef H5
|
|
var ref = this.$refs.scrollContainer;
|
|
if (!ref) return null;
|
|
// uni-app 中 $refs 对应组件实例,scroll-view 编译为 div 后,可通过 $el 拿到原生 DOM
|
|
var el = ref.$el || ref;
|
|
// 兼容:部分版本直接返回 DOM 节点
|
|
if (el && el.nodeType === 1) return el;
|
|
return null;
|
|
// #endif
|
|
},
|
|
onSlideMouseDown(e) {
|
|
// #ifdef H5
|
|
if (this.value.showStyle != 'singleSlide') return;
|
|
var el = this.getSlideContainer();
|
|
if (!el) return;
|
|
this.slideIsDragging = true;
|
|
this.slideStartX = (e.clientX != null) ? e.clientX : 0;
|
|
this.slideStartScrollLeft = el.scrollLeft;
|
|
if (e.preventDefault) e.preventDefault();
|
|
// #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;
|
|
// 反向:手指/鼠标往右拖 → 内容向右滚 → scrollLeft 减小
|
|
el.scrollLeft = this.slideStartScrollLeft - deltaX;
|
|
if (e.preventDefault) e.preventDefault();
|
|
// #endif
|
|
},
|
|
onSlideMouseUp() {
|
|
// #ifdef H5
|
|
this.slideIsDragging = false;
|
|
// #endif
|
|
},
|
|
onSlideWheel(e) {
|
|
// #ifdef H5
|
|
if (this.value.showStyle != 'singleSlide') 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();
|
|
// #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> |