|
|
<template> <view> <swiper class="swiper" :animation="animationData" :style="{ 'opacity': animation ? '0' : '1', '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" @longpress="longpress"></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> <!-- 底部菜单弹出层 --> <view class="menu-popup" v-if="menu && show_menu" @click.stop> <button @click="download">保存图片</button> </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' }, animation: { type: Boolean, // 是否开启动画
default: false }, menu: { type: Boolean, // 长按图片时是否显示菜单按钮，H5不支持，传参无效果
default: true } }, data(){ return { swiper_current: 0, // 当前显示的图片下标
images: [], show_assembly: false, // 显示预览图片
duration: 500, // 动画持续时间
animationObj: {}, // 动画配置对象
animationData: {}, // 动画导出执行对象
scale_values: [], // 每张图的缩放比例
clientY: 0, show_menu: false } }, created(){ // TODO PC端屏蔽遮罩滚动穿透
// TODO PC端滚轮放大缩小
// TODO 双击时会被关掉
}, methods: { // 初始化加载动画
initAnimation(){ let animationObj = uni.createAnimation({ duration: this.duration }); this.animationObj = animationObj; animationObj.opacity(0).step(); animationObj.opacity(1).step(); this.animationData = animationObj.export(); }, // swiper touchmove事件
touchmove(){ return false; }, // swiper被改变
switchItem(current){ this.swiper_current = current; // this.clientY = 0; // 切换时需要复位
}, // movable 缩放事件
scale(event){ let scale = parseInt(event.detail.scale * 100) +'%'; uni.showToast({ title: scale, icon: 'none', position: 'bottom' }) }, // 鼠标滚动缩放事件，目前会触发浏览器页面滚动事件，暂时先不要这个功能
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; if(this.$props.animation){ this.initAnimation(); } }, // 关闭隐藏图片
hideAssembly(){ if(this.$props.animation){ this.animationObj.opacity(0).step(); this.animationData = this.animationObj.export(); setTimeout(() => { this.show_assembly = false; }, this.duration); }else{ this.show_assembly = false; } }, // 长按事件
longpress(event){ // #ifndef H5
if(this.$props.menu){ this.show_menu = true; } // #endif
}, // 保存图片
download(){ uni.showLoading({ title: '正在保存' }) this.show_menu = false; uni.downloadFile({ url: this.images[this.swiper_current], success: res => { let tempFilePath = res.tempFilePath; uni.saveFile({ tempFilePath, success: result => { uni.showToast({ title: '保存成功', icon: 'success' }) }, fail: err => { uni.showToast({ title: '保存失败', icon: 'none' }) }, complete: () => uni.hideLoading() }) }, complete: () => uni.hideLoading() }) } } }</script>
<style lang="scss" scoped="scoped"> .swiper{ width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; z-index: 1000; .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: 47vh; 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; } } } } // 轻提示框样式
/deep/.uni-sample-toast{ z-index: 1002; }</style>
|
