邓平艺
5 years ago
4 changed files with 230 additions and 6 deletions
-
220supplier/components/lf-previewImage/lf-previewImage.vue
-
2supplier/components/wyb-table/wyb-table.vue
-
3supplier/main.js
-
11supplier/pages/gonghuo/detail.vue
@ -0,0 +1,220 @@ |
|||
<template> |
|||
<view> |
|||
<swiper class="swiper" :animation="animationData" |
|||
:style="{'background-color': perspective ? 'rgba(0,0,0,0.5)' : '#000000'}" |
|||
:current="swiper_current" :circular="circular" |
|||
v-if="show_assembly" @click="hideAssembly" |
|||
@touchmove.stop.prevent="touchmove" |
|||
@change="e => switchItem(e.detail.current)"> |
|||
<swiper-item v-for="(item, index) in images" :key="index" |
|||
class="swiper-item"> |
|||
<!-- 可移动缩放操作的容器 --> |
|||
<movable-area class="movable-area" :scale-area="true"> |
|||
<movable-view class="movable-view" direction="all" :scale="true" :inertia="true" @scale="scale" :scale-value="scale_values[swiper_current]"> |
|||
<image :src="item" class="swiper-image" mode="aspectFit" @mousewheel.stop="mousewheel"></image> |
|||
</movable-view> |
|||
</movable-area> |
|||
<!-- 控制器 --> |
|||
<view class="controls" v-if="controls"> |
|||
<view> |
|||
<view @click.stop="switchItem(swiper_current - 1)" v-if="swiper_current != 0"> |
|||
<uni-icons type="arrowleft" size="36" color="#fff"></uni-icons> |
|||
</view> |
|||
<view v-else></view> |
|||
</view> |
|||
<view> |
|||
<view @click.stop="switchItem(swiper_current + 1)" v-if="swiper_current != images.length - 1"> |
|||
<uni-icons type="arrowright" size="36" color="#fff"></uni-icons> |
|||
</view> |
|||
<view v-else></view> |
|||
</view> |
|||
</view> |
|||
<!-- 指示器 --> |
|||
<view class="indicators" v-if="indicators && images.length > 1"> |
|||
<view class="number" v-if="indicatorType == 'number'">{{ swiper_current + 1 }} / {{ images.length }}</view> |
|||
<view class="square" v-else-if="indicatorType == 'square'"> |
|||
<view v-for="(item, index) in images" :key="index" class="indicators-icon" :style="swiper_current == index ? 'background-color:'+ themeColor : ''"></view> |
|||
</view> |
|||
<view class="dot" v-else-if="indicatorType == 'dot'"> |
|||
<view v-for="(item, index) in images" :key="index" class="indicators-icon" :style="swiper_current == index ? 'background-color:'+ themeColor : ''"></view> |
|||
</view> |
|||
</view> |
|||
</swiper-item> |
|||
</swiper> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
props: { |
|||
controls: { |
|||
type: Boolean, // 是否显示左右箭头控制 |
|||
default: true |
|||
}, |
|||
indicators: { |
|||
type: Boolean, |
|||
default: true // 是否显示指示器 |
|||
}, |
|||
indicatorType: { |
|||
type: String, // 指示器类型，dot圆点，square方形，number数字 |
|||
default: 'number' |
|||
}, |
|||
perspective: { |
|||
type: Boolean, // 是否开启背景透视，遮罩透明可以看见底下其他元素 |
|||
default: true |
|||
}, |
|||
circular: { |
|||
type: Boolean, // 是否可以衔接滑动 |
|||
default: false |
|||
}, |
|||
themeColor: { |
|||
type: String, // 主题色 |
|||
default: '#1833F2' |
|||
} |
|||
}, |
|||
data(){ |
|||
return { |
|||
swiper_current: 0, // 当前显示的图片下标 |
|||
images: [], |
|||
show_assembly: false, // 显示预览图片 |
|||
duration: 500, // 动画持续时间 |
|||
animation: {}, // 动画配置对象 |
|||
animationData: {}, // 动画导出执行对象 |
|||
scale_values: [], // 每张图的缩放比例 |
|||
clientY: 0 |
|||
} |
|||
}, |
|||
created(){ |
|||
// TODO PC端屏蔽遮罩滚动穿透 |
|||
// TODO PC端滚轮放大缩小 |
|||
// TODO 放大缩小百分比显示 |
|||
// TODO 双击时会被关掉 |
|||
}, |
|||
methods: { |
|||
// 初始化加载动画 |
|||
initAnimation(){ |
|||
let animation = uni.createAnimation({ |
|||
duration: this.duration |
|||
}); |
|||
this.animation = animation; |
|||
animation.opacity(0).step(); |
|||
animation.opacity(1).step(); |
|||
this.animationData = animation.export(); |
|||
}, |
|||
// swiper touchmove事件 |
|||
touchmove(){ |
|||
return false; |
|||
}, |
|||
// swiper被改变 |
|||
switchItem(current){ |
|||
this.swiper_current = current; |
|||
// this.clientY = 0; // 切换时需要复位 |
|||
}, |
|||
// movable 缩放事件 |
|||
scale(event){ |
|||
let scale = event.detail.scale; |
|||
this.$msg(scale); // TODO 轻提示层级不够，没有被显示出来 |
|||
}, |
|||
// 鼠标滚动缩放事件，目前会触发浏览器页面滚动事件，暂时先不要这个功能 |
|||
mousewheel(event){ |
|||
return; |
|||
let scale = this.scale_values[this.swiper_current]; |
|||
if(this.clientY > event.clientY){ |
|||
if(scale < 10){ |
|||
scale += 0.5; |
|||
} |
|||
}else{ |
|||
if(scale > 0.5){ |
|||
scale -= 0.5; |
|||
} |
|||
} |
|||
this.clientY = event.clientY; |
|||
this.scale_values.splice(this.swiper_current, 1, scale); |
|||
}, |
|||
// 显示图片 |
|||
show(options){ |
|||
this.images = options.images || []; |
|||
this.swiper_current = options.current || 0; |
|||
this.scale_values = this.images.map(item => 1); |
|||
this.show_assembly = true; |
|||
this.initAnimation(); |
|||
}, |
|||
// 关闭隐藏图片 |
|||
hideAssembly(){ |
|||
this.animation.opacity(0).step(); |
|||
this.animationData = this.animation.export(); |
|||
setTimeout(() => { |
|||
this.show_assembly = false; |
|||
}, this.duration); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped="scoped"> |
|||
.swiper{ |
|||
width: 100vw; |
|||
height: 100vh; |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
z-index: 1000; |
|||
opacity: 0; |
|||
.swiper-item{ |
|||
position: relative; |
|||
.movable-area, .movable-view, .swiper-image{ |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
.controls{ |
|||
position: absolute; |
|||
padding: 0 16rpx; |
|||
box-sizing: border-box; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
top: 42vh; |
|||
left: 0; |
|||
font-size: 40rpx; |
|||
width: 100%; |
|||
z-index: 1002; |
|||
} |
|||
.indicators{ |
|||
width: 100%; |
|||
position: absolute; |
|||
left: 0; |
|||
bottom: 10vh; |
|||
z-index: 1002; |
|||
display: flex; |
|||
justify-content: center; |
|||
.number, .square, .dot{ |
|||
width: max-content; |
|||
height: max-content; |
|||
background-color: #dfe4ea; |
|||
} |
|||
.number{ |
|||
padding: 4rpx 26rpx; |
|||
border-radius: 40rpx; |
|||
color: #555555; |
|||
} |
|||
.square{ |
|||
border-radius: 40rpx; |
|||
display: flex; |
|||
padding: 2rpx 4rpx; |
|||
view{ |
|||
border-radius: 50%; |
|||
} |
|||
} |
|||
.dot{ |
|||
display: flex; |
|||
padding: 4rpx 4rpx; |
|||
} |
|||
.indicators-icon{ |
|||
width: 20rpx; |
|||
height: 20rpx; |
|||
background-color: #bdc5bd; |
|||
margin: 2rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue