uniapp 关于swiper组件和moveable-area、moveable-view组件搭配的图片预览高度集成组件

swper组件内嵌moveable-area

该组件包含：自动分页，手势滑动，双指缩放和双击缩放，放大拖动到边缘自动下一张等功能

<template><view class="img"><uni-transition class="topLine" :mode-class="['fade','slide-top']" :show="show"><view class="top-text">{{plist[index].current}}</view></uni-transition><uni-transition class="navback" :mode-class="['fade','slide-top']" :show="show"><view @click="goback"><uni-icons type="close" size="27" color="#fff"></uni-icons></view></uni-transition><view class="img"@touchstart="touchstart"@touchend="touchend"><uni-transition :show="show"><view class="top"><text>{{tip}}</text><text v-if="tabIndex==2&&platform==='ios'">{{iosTip}}</text></view></uni-transition><!-- 压缩图 --><swiper class="swiper"v-if="tabIndex==1":current="index"duration="500":disable-touch="!swiper"@transition="scale = false"@animationfinish="scale = true"@touchstart="handletouchstart"@touchend="handletouchend"><swiper-item class="swiper-item" v-for="(info,pos) in plist" :key="pos"><movable-area class="marea" scale-area><movable-viewclass="mview"direction="all"damping="100"friction="2":scale="scale"scale-min="1"scale-max="8":out-of-bounds="temporaryScaleValue!=1":scale-value="scaleValue":animation="animation"@change="changeMove"@click="dbclick"@scale="handleScale"><image@load="loadover"class="image":src="info.logo_name"mode="widthFix" /></movable-view></movable-area></swiper-item></swiper><!-- 高清图 --><imagev-if="tabIndex==2"@load="loadover"class="img-src":src="info.cloud_name"mode="widthFix"/></view><uni-transition class="anbottom" :mode-class="['fade','slide-bottom']" :show="show"><view class="tab"><view class="tab-btn"><view class="label" :class="tabIndex===1 ? 'active' : ''" @click="tabChange(1)">水印高清图</view><view class="label" :class="tabIndex===2 ? 'active' : ''" @click="tabChange(2)">查看原图({{plist[index].size}})</view></view></view></uni-transition><!-- 遮罩层 --><view class="mask" v-if="!imgloadover"></view></view>
</template><script>import {toast,checkWeChat} from '@/common/checkForm.js'export default {props:{activity_id: {type: [String,Number],default: ''},img_id: {type: [String,Number],default: ''},keywords: [Number,String],type_id: [Number,String],shooting_time: String,page_size: {type: [String,Number],default: 12},data: {type: Object,default: {}}},data() {return {info: {},screen_width: '',tip: '长按图片进行保存',platform: '',iosTip: 'IOS系统建议保存后查看',// value: '',tabIndex: 1,moveStartX: '',imgloadover: false,plist: [],current_page: null,// page_size: 12,total: 0,index: 0,isClick: true,leftController: false,strat: 0,end: 0,tipShow: true,pay_text: '',touchNum: 0, //双击控制show: true, //动画控制fingers: false,swiper: true,scale: true,animation: true,scaleValue: 1,temporaryScaleValue: 1,}},created() {this.screen_width = uni.getSystemInfoSync().windowWidththis.platform = uni.getSystemInfoSync().platformthis.getPhoto()},methods: {goback() {if(!this.isClick) returnthis.$emit('click')},tabChange(e){if(this.tabIndex == e){return}//复原部分配置this.scaleValue = 1this.swiper = truethis.animation = truethis.temporaryScaleValue = 1this.tabIndex = e || this.tabIndexif(this.tabIndex == 1){this.info = this.plist[this.index]}if(this.tabIndex == 2){this.getImg()}},//获取照片getPhoto(){this.plist = this.data.data;this.current_page = this.data.current_page;this.total = this.data.total;if(!this.plist || this.plist.length === 0){uni.showToast({icon: 'none',title: '没有可展示的图片'})}//二次优化if(this.current_page){let index = 0let subGroupLength = this.page_sizethis.newArray = []while(index < this.plist.length) { //按页分组this.newArray.push(this.plist.slice(index, index += subGroupLength));}this.newArray.forEach((item,index)=>{for(let i=0;i<item.length;++i){if(this.img_id == item[i].id){this.current_page = index + 1 //重新赋值if(i===0 && index > 0){this.index = this.page_sizethis.plist = this.newArray[index-1].concat(item)this.leftController = true}else{this.index = ithis.plist = item}this.info = item[i]return}}})}else{this.plist.forEach((item,index)=>{if(this.img_id == item.id){this.index = indexthis.info = item}})}},loadover(e){uni.hideLoading()this.imgloadover = true},touchstart(e){this.strat = new Date().getTime()},touchend(e){this.end = new Date().getTime()if(this.end - this.strat < 700){ //解决ios微信浏览器图片长按和点击事件冲突的问题this.isClick = true}else{this.isClick = false}},changeMove(e){this.scaleValue = this.temporaryScaleValueif(e.detail.source === 'touch-out-of-bounds'&& (e.detail.x > 0 || e.detail.x < (this.scaleValue > 1 ? (this.scaleValue < 2 ?-this.screen_width*this.scaleValue*0.1 : -this.screen_width) : 0))){this.scaleValue = 1this.swiper = truethis.animation = falsethis.temporaryScaleValue = 1this.tabChange(1)}},dbclick(e){let curTime = new Date().getTime();let lastTime = this.touchNum;this.touchNum = curTime;let diff = curTime - lastTime;if (diff < 300) { //双击this.scaleValue = this.scaleValue === 1 ? 2 : 1clearTimeout(this.lastTapTimeoutFunc); // 成功触发双击事件时，取消单击事件的执行} else { //单击this.lastTapTimeoutFunc = setTimeout(()=> {this.show = !this.show}, 300);}},swiperChange(){this.scale = false},animationfinish(){this.scale = truethis.animation = true},handleScale(e){this.temporaryScaleValue = e.detail.scaleclearTimeout(this.timer)if(e.detail.scale != 1){this.swiper = false}else{this.timer = setTimeout(() => {this.scaleValue = 1this.swiper = true}, 200);}},handletouchstart(e){this.fingers = e.touches.length >= 2 ? true : falsethis.moveStartX = e.changedTouches[0].clientX},handletouchend(e){if(!this.swiper || this.fingers){return}let moveX = e.changedTouches[0].clientX - this.moveStartXif(moveX > 20){ // && this.moveStartX < 75// console.log('左滑');if(this.index === 0){uni.showToast({icon: 'none',title: '没有更多图片了'})return}//二次优化if(this.current_page && this.current_page > 1 && this.index === 1 && !this.leftController){this.current_page --this.plist = this.newArray[this.current_page-1].concat(this.plist)this.total = this.plist.lengththis.index = this.page_sizereturn}this.index --this.tabChange()}if(moveX < -20){ // && this.moveStartX > 300// console.log('右滑');if(this.index === this.total-1){uni.showToast({icon: 'none',title: '没有更多图片了'})return}//请求下一页if(this.current_page && this.index === this.plist.length-1 && this.index < this.total-1){this.current_page ++uni.showLoading({title: '图片加载中'})//调用api 自己封装this.$api.get('list', {activity_id: this.activity_id,keywords: this.keywords,type_id: this.type_id,shooting_time: this.shooting_time,page_size: this.page_size,page: this.current_page,},'none').then(res => {this.plist = this.plist.concat(res.data.data);this.total = res.data.totalthis.index ++this.leftController = this.index >= this.page_size})return}this.index ++this.tabChange()}},//获取原始图片getImg() {this.imgloadover = falseuni.showLoading({title: '图片加载中'})this.$api.get('sport/photo/info', {id: this.plist[this.index].id},'none').then(res => {this.info = res.data})},}}
</script><style lang="scss" scoped>.topLine{position: fixed;top:20rpx;left: 20rpx;z-index: 100;.top-text{color: #FFFFFF;}}.navback{position: fixed;top:20rpx;right: 20rpx;z-index: 100;}.img {display: flex;flex-direction: column;justify-content: center;background-color: #000;width: 750rpx;height: 100%;font-size: 28rpx;.swiper{width: 100%;height: 100%;}.swiper-item{display: flex;align-items: center;justify-content: center;}.img-src {width: 750rpx;height: auto;overflow: hidden;position: absolute;}.movable-view{display: flex;width: 100%;height: auto;}.img-source{width: 100%;}}.marea {height: 100%;width: 100%;position: fixed;overflow: hidden;.mview {display: flex;align-items: center;justify-content: center;width: 100%;height: auto;min-height: 100%;.image {width: 100%;transform: translate3d(0, 0, 0) scale(1, 1);}}}.mask {width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0);position: fixed;top: 0;z-index: 9;}.top{display: flex;justify-content: center;align-items: center;padding: 8rpx 24rpx;background-color: rgba(0, 0, 0, .4);border-radius: 40rpx;color: #FFFFFF;position: fixed;top: 200rpx;left: 50%;transform: translate(-50%);z-index: 99;}.anbottom{position: fixed;bottom: 0;z-index: 99;}.tab{padding: 30rpx;width: 750rpx;display: flex;justify-content: space-between;flex-direction: row;color: #FFFFFF;background-color: rgba(0, 0, 0, .4);.tab-btn{flex-direction: row;align-items: center;.label{&.active{color: #ffff00;}&+.label{padding-left: 50rpx;}}.img-icon{width: 36rpx;height: 32rpx;}}}.content {font-size: 30rpx;color: #BFBFBF;width: 750rpx;height: 330rpx;background-color: rgba(0, 0, 0, .8);position: fixed;bottom: 0;z-index: 99;.payBtn{position: fixed;right: 30rpx;bottom: 30rpx;.pay-button{color: #333333;background-color: #efefef;border-radius: 8rpx;margin: 0;padding: 10rpx 20rpx;}.money{margin-bottom: 10rpx;display: flex;justify-content: center;align-items: baseline;color: #FFFFFF;.number{font-size: 40rpx;}}}.tab-content{padding: 140rpx 40rpx 0 40rpx;}.simple-text {padding: 20rpx;display: flex;flex-direction: column;box-sizing: border-box;.line {display: flex;padding: 10rpx 0;.px {margin-right: 40rpx;}}.color-75 {color: #757575;}}.download {position: fixed;bottom: 0;color: #BFBFBF;font-size: 40rpx;width: 750rpx;background-color: rgba(0, 0, 0, .8);display: flex;justify-content: center;align-items: baseline;line-height: 88rpx;.money {font-size: 28rpx;margin-right: 40rpx;}}}
</style>

vue页面引用
包含一些参数用到用不到看自己需求

<view class="preview" @touchmove.stop.prevent="moveHandle"> //阻止底层页面滚动<image-previewv-if="preview" //必须可以改写在组件内部使用$refs获取组件后用open方法调用:activity_id="activity_id":img_id="img_id" //图片id必须:keywords="keywords":type_id="activeId":shooting_time="timeRange":page_size="pageSize" //分页必须:data="plist" //json对象数组列表必须@click="preview = false"></image-preview>
</view>

最后的坚持

重要也不重要：以上不是最新代码，不过我觉得这些也够用了，看不懂得可以留言有时间会回复的。要源码的，我看心情。小白、学生党以及白嫖党欢迎订阅收藏啊！！！

uniapp 关于swiper组件和moveable-area、moveable-view组件搭配的图片预览高度集成组件相关推荐

imagepreview使用案例_展示组件 ImagePreview 图片预览 - 闪电教程JSRUN
ImagePreview 图片预览引入 ImagePreview和其他组件不同,不是通过HTML结构的方式来使用,而是通过函数调用的方式.使用前需要先引入它. import Vue from 'vu ...
uniapp swiper实现图片预览预览一张图片加载前后两张实现性能优化
背景: 使用uniapp框架在做h5项目时,领导要求预览图片时不能一次性加载完所有的图片,需要看一张加载一张,这样用户不费流量,优化h5的性能. 首先uniapp官网实现图片预览使用的是uni.pre ...
uniapp 对富文本中的图片预览及长按图片识别二维码/保存图片
uniapp 对富文本中的图片预览及长按图片识别二维码/保存图片富文本一定要使用uniapp提供的<rich-text>标签,不要使用 v-html 因为<rich-text> ...
记录安卓与uni-app混合开发遇到的坑——图片预览问题
记录安卓与uni-app混合开发遇到的坑--图片预览问题一.场景描述二.需求描述三.问题描述四.问题解决方式五.奉上代码(组件) 一.场景描述用uni-app开发嵌套在安卓里面使用二.需 ...
Vue 组件库 heyui@1.18.0 发布，新增地址选择、图片预览组件
开发四年只会写业务代码,分布式高并发都不会还做程序员? 新增 CategoryPicker 新增组件 CategoryPicker,地址级联组件的最佳方案. <CategoryPicker ...
图片预览组件PhotoView
图片预览组件PhotoView PhotoView是一款图片预览组件,广泛应用于大图的查看.该组件支持图片手势缩放.旋转等功能.它可以很好的和ViewPager.Picasso等组件结合,实现各种复杂 ...
pc 图片预览放大端vue_移动端Vue.js的图片预览组件，支持放缩、滑动功能！
功能:图片预览组件,支持双手指放大/缩小,双击放大/缩小,单击消失隐藏. 注:touch事件请手机预览源码分享组件参数 data() { return { loading: 2, // 1成功 2 ...
element upload预览_vue2.0 使用element-ui里的upload组件实现图片预览效果方法
1.首先我们在cli中引入element-ui 2.然后在具体的代码中放入uoload组件点击上传只能上传jpg/png文件,且不超过500kb 3.使用element-ui的upload组件中提 ...
vue 封装图片预览组件
因项目需要,自己封装了个vue图片预览组件 <template><div class="imgs_previews animated" @mousewheel.p ...

uniapp 关于swiper组件和moveable-area、moveable-view组件搭配的图片预览高度集成组件

swper组件内嵌moveable-area

最后的坚持

uniapp 关于swiper组件和moveable-area、moveable-view组件搭配的图片预览高度集成组件相关推荐

最新文章

热门文章