UNAPP实现相册功能，可以获取图片下标，放大，缩小

<template>
	<view class="background-modal">
		<!-- <view class="content-title-name-status-style">
			<view class="bug-content-title">
				{{content_name}}
			</view>
			<button type="default" @click="toPayImageVideoMember()">
				购买
			</button>
		</view>
		<view class="image-model-background-style">
			<view class="image-model-one-background-style" v-for="(itemImages,ids) in itemImagesList" :key="ids" >
				<image :src="itemImages" lazy-load v-if="isVip" mode="aspectFill" @tap="viewLargeImage(ids)"></image>
				<image :src="itemImages" lazy-load v-else :class="[ids>4 ? 'filter':'']" mode="aspectFill" @tap="viewLargeImage(ids)"></image>
			</view>
		</view> -->
		<view class="image-black">
			<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :disable-touch='isSwiper' :duration="duration" :current='current' @transition='itemChange' @change='toPay' @animationfinish='endAni'>
				<swiper-item class="swiper-item" v-for="(imgItem,idx) in imgSmaList" :key="idx" >
					<movable-area class="swiper-image" :scale-area='isScale' :style="{height: (pageWid/(imgItem.img_wid/imgItem.img_hei))*2 +'upx'}">
						<movable-view class="swiper-image-child" :scale-value='sca_val' :disabled="movDis" @touchstart="touched" @scale='scaleFun' out-of-bounds='false' friction='1' inertia='true' animation='true' :scale='isScale' scale-min='1' scale-max='4' :x="x" :y="y" :direction="dir" @change.stop="addChange">
							<img :src="image_directory+imgItem.url" ref="innerbox"  mode="aspectFit" class="sca-img" @touchmove="imgTouchmove" @touchend="imgTouched"  @longpress="saveImg"></img>
						</movable-view>
					</movable-area>
				</swiper-item>
			</swiper>
			<view class="dots">
				<text>{{current+1}}/{{imageListNumber.length}}</text>
			</view>
		</view>
	</view>
</template>
 
<script>
	import app from '@/App.vue'
	import api from '@/api/request.js'
	var that; 
	export default {
		data() {
			return {
				images_list_all:[],//所有的图片
				itemImagesList:[],
				content_name:null,
				id:null,//图片id
				imageListNumber: [], //swiper的数组
				isVip: false, //是否为会员
				indicatorDots: false, //是否有指示点
				autoplay: false, //是否自动滑动
				duration: 10, //动画速度
				current: 0, //当前滑块
				moveSave: true,
				scale: 1,
				isSwiper: false,
				image_directory: '',
				sca_val: 1,
				imgSmaList: [],
				swipered: 0,
				x:0,
				y:0,
				dir: 'horizontal',
				movDis: false,
				isScale: true,
				reLoadList: {
					index: '',
					url: ''
				},
				img_sty:{
					height: '100%'
				},
				img_hei: '',
				pageWid: '',
			}
		},
		created(){
			that = this;
			var imageObject = app.globalData.imageObject
			console.log("imageObject:",imageObject);
			that.content_name = imageObject.image.release_time+"第"+imageObject.image.periodical+"期"+imageObject.image.subject
			that.id = imageObject.image.id
			that.image_directory = imageObject.image_directory;
			uni.getSystemInfo({
			    success: function (res) {
			        that.pageWid = res.windowWidth;
			    }
			});
			var imageDataList = imageObject.image.image_path.split(',');
			if(app.globalData.userInfo.member_rank == null){
				that.isVip = false;
			} else {
				that.isVip = true;
			}
			for(let h = 0;h < imageDataList.length;h++){
				var imgJson = {
					url: '',
					img_wid: '',
					img_hei: ''
				}
				console.log("url",imageDataList[h])
				imgJson.url = imageDataList[h];
				var url =  that.image_directory+imageDataList[h];
				that.getImgWid(url,h);
				that.getImgHei(url,h);
				// uni.getImageInfo({
				// 	src: that.image_directory + url,
				// 	success: function (image) {
				// 		console.log(image.width);
				// 		console.log(image.height);
				// 		imgJson.img_wid = image.height;
				// 		imgJson.img_hei = image.width
				// 		console.log('aad',url)
				// 		// imgJson.size = that.pageWid/(image.width/image.height);
				// 	}
				// })
			    imageDataList[h] = imgJson
			}
			that.imageListNumber = imageDataList;
			that.current = 0;
			that.swipered = 0;
			// if(that.itemImagesList.length<app.globalData.imagesLimitNumber){
			if(that.imageListNumber.length < 6){
				for(var j=0;j<that.imageListNumber.length;j++){
					that.imgSmaList[j] = that.imageListNumber[j];
				}
			} else {
				for(var j=0;j<6;j++){
					that.imgSmaList[j] = that.imageListNumber[j];
				}
			}
			console.log(that.imgSmaList);
		},
		onReady(){
			// let div = that.$refs.innerbox;
			// that.img_hei = div[0].clientHeight + 'px';
			// console.log(that.img_hei);
			that = this
			
		},
		//页面滚动到底部的事件
		 // onReachBottom(){
			// that.startIndex = that.startIndex+12
			// var start =null;
			// var end = null;
			// if(that.startIndex > that.accountIndex){
			// 	start = that.startIndex-12;
			// 	end = that.accountIndex;
			// } else {
			// 	start = that.startIndex-12;
			// 	end = that.startIndex;
			// }
			// var sliceList = that.images_list_all.slice(start,end);
			// for(let i=0;i<sliceList.length;i++){
			// 	that.imgSmaList.push(that.image_directory+sliceList[i]);
			// };
		 //  },
		methods: {
			toPayImageVideoMember(){
				that.current = 3;
				app.globalData.imageInfoObj = {
					buyType:0,
					imageObject:app.globalData.imageObject
				}
				uni.navigateTo({
					url:'/pages/payImageVideoMember/payImageVideoMember'
				})
			},
			getImgWid(url,index){
				uni.getImageInfo({  
					src: url,  
					success: function (image) {
						console.log(image);
						that.imageListNumber[index].img_wid = image.width 
					},  
					fail:function(err){  
						resolve(false);  
					}  
				});
			},
			getImgHei(url,index){
				uni.getImageInfo({
					src: url,  
					success: function (image) {
						that.imageListNumber[index].img_hei = image.height;
					},  
					fail:function(err){  
						resolve(false);  
					}  
				}); 
			},
			scaleFun(e){
				that.scale = e.detail.scale;
				// const query = uni.createSelectorQuery().in(that).selectAll('.sca-img');
				// 	query.boundingClientRect(data => {
				// 	that.img_hei = JSON.stringify(data[that.current].height);
				// }).exec();
				// that.img_sty = {
				// 	height: that.img_hei*2 + 'upx',
				// }
				// console.log(that.img_sty);
				if(that.scale == 1){
					that.isSwiper = false;
					that.moveSave = true;
					that.dir = 'horizontal';
				} else {
					that.dir = 'all'
					// that.reLoadList.index = that.current;
					// that.reLoadList.url = that.imgSmaList[that.current];
					that.movDis = false;
					that.isSwiper = true;
					that.moveSave = false;
				}
			},
			saveImg(){
				if(app.globalData.userInfo.member_rank!=null){
					if(that.moveSave) {
						that.movDis = false;
						that.isSwiper = true;
						uni.showModal({
							title: '温馨提示',
							cancelText: '取消',
							confirmText: '确认',
							content: '是否保存图片？',
							success: function(res) {
								that.movDis = true;
								that.isSwiper = false;
								if (res.confirm) {
									console.log("是否保存?"+that.image_directory + that.imageListNumber[that.current].url);
									uni.saveImageToPhotosAlbum({
										filePath: that.image_directory + that.imageListNumber[that.current].url,
										success: function () {
											uni.showToast({
												title: '已保存',
												icon: 'none',
												duration:1000
											})
											console.log('save success');
										}
									});
								}
							}
						});
					}
				}
			},
			toPay(e){
				that.moveSave = true;
				that.current = e.detail.current;
				that.movDis = false;
				if(app.globalData.userInfo.member_rank == null){
					if(that.current > 4){
						that.toPayImageVideoMember();
					}
				}
				if(that.sca_val == 1){
					that.sca_val = 1.01;
				} else {
					that.sca_val = 1;
				}
				console.log('adasda，'+that.sca_val)
				// if(that.scale > 1){
				// 	console.log(that.reLoadList);
				// 	that.imgSmaList[that.reLoadList.index] = that.reLoadList.url;
				// 	console.log('add'+that.imgSmaList[that.reLoadList.index]);
				// }
				if(that.current+5 < that.imageListNumber.length){
					if(that.swipered < that.current){
						that.swipered = that.current;
						that.imgSmaList[that.current+5] = that.imageListNumber[that.current+5]
					}
				}
			},
			touch(){
				that.isSwiper = true;
			},
			touched(){
				if(that.scale > 1){
					that.movDis = false;	
					that.isSwiper = true;
				}
			},
			addChange(e){
				if(that.scale > 1){
					// console.log(e)
					if(e.detail.source == 'out-of-bounds'||e.detail.source == 'touch-out-of-bounds'){
						that.isSwiper = false;
					} else {
						that.touchSource = e.detail.source;
						that.isSwiper = true;
					}
				}
			},
			itemChange(){
				that.isSwiper = false;
				that.movDis = true;
				that.moveSave = false;
			},
			imgTouchmove(){
				that.moveSave = false;
			},
			imgTouched(){
				that.moveSave = true;
			},
			endAni(){
				that.moveSave = true;
				that.movDis = false;
				that.sca_val = 1;
			},
		}
	}
</script>
 
<style scoped lang="less">
	* {
		margin: 0;
		padding: 0;
	}
   .content-title-name-status-style{
	   width: 100%;
	   height: 50px;
	   display: flex;
	   justify-content: center;
	   align-items: center;
   }
   .bug-content-title{
	   width: 70%;
	   height: 100%;
	   display: flex;
	   justify-content: center;
	   align-items: center;
	   white-space: nowrap;
	   overflow: hidden;
	   text-overflow: ellipsis; 
   }
   .content-title-name-status-style button{
	   width: 15%;
	   margin-left: 10%;
	   height: 50%;
	   display: flex;
	   justify-content: center;
	   align-items: center;
	   background-color: #CE4096;
	   color: #FFFFFF;
	   font-size: 13px;
	   border-radius: 5px;
   }
   .image-model-background-style{
	   width: 95%;
	   margin-left: 2.5%;
	   margin-top: 10px;
	   display: flex;
	   flex-wrap: wrap;
	   justify-content: left;
	   align-items: center;
   }
   .image-model-one-background-style{
	   width: 30%;
	   height: 180px;
	   margin-right: 3%;
	   margin-top: 10px;
   }
   .image-model-background-style image{
	   width: 100%;
	   height:100%;
	   margin-right: 3%;
	   margin-top: 10px;
   }
   .filter{
	   filter: blur(10px);
   }
   .image-black{
	   display: block;
	   position: fixed;
	   left: 0;
	   top: 0;
	   width: 100%;
	   height: 100%;
	   z-index: 10;
	   background: rgba(0,0,0,1);
   }
   .page-section-spacing{
	   width: 100%;
	   height: 100%;
   }
   .swiper{
	   width: 100%;
	   height: 100%;
   }
   .swiper-item{
	   width: 100%;
	   height: 100%;
   }
   .swiper-image{
	   position: absolute;
	   left: 50%;
	   top: 50%;
	   width: 100%;
	   height: 100%;
	   transform: translate(-50%, -50%);
   }
   .swiper-image-child{
	   width: 100%;
	   height: 100%;
	   position: absolute;
	   left: 50%;
	   top: 50%;
	   -webkit-transform: translate(-50%,-50%);
	   transform: translate(-50%,-50%);
   }
   .sca-img{
	   position: absolute;
	   left: 50%;
	   top: 50%;
	   -webkit-transform: translate(-50%,-50%);
	   transform: translate(-50%,-50%);
	   max-height: 100%;
	   max-width: 100%;
   }
   .dots{
	   width: 100px;
	   position: absolute;
	   top: 10px;
	   left: 50%;
	   z-index: 999;
	   color: #fff;
	   text-align: center;
	   margin-left: -50px;
   }
</style>

关注我的公众号SpaceObj 领取idea系列激活码