代码提交

.gitignore

@@ -0,0 +1,8 @@
+node_modules/
+dist/**
+.project
+unpackage/
+.DS_Store
+wxcomponents/**/*.vue
+wxcomponents/**/*.css
+.hbuilderx/

components/ben-photoswipe/ben-photoswipe.vue

@@ -0,0 +1,177 @@
+<template>
+	<view class="content">
+		<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
+			<div class="pswp__bg"></div>
+			<div class="pswp__scroll-wrap">
+				<div class="pswp__container">
+					<div class="pswp__item"></div>
+					<div class="pswp__item"></div>
+					<div class="pswp__item"></div>
+				</div>
+				<!-- 预览区域顶部的默认UI，可以修改 -->
+				<div class="pswp__ui pswp__ui--hidden">
+
+					<div class="pswp__top-bar">
+						<!--  与图片相关的操作 -->
+						<div class="pswp__counter"></div>
+						<template v-if="imgs.length>0">
+							
+							<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
+							<div>
+								<button class="btn_item" @click.native.prevent="viewPicture"
+									v-if="!imgs[idx].picture">查看原图</button>
+							</div>
+
+						</template>
+
+
+						<div class="pswp__preloader">
+							<div class="pswp__preloader__icn">
+								<div class="pswp__preloader__cut">
+									<div class="pswp__preloader__donut"></div>
+								</div>
+							</div>
+						</div>
+					</div>
+					<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
+						<div class="pswp__share-tooltip"></div>
+					</div>
+
+					<div class="pswp__caption">
+						<div class="pswp__caption__center"></div>
+					</div>
+				</div>
+			</div>
+		</div>
+
+
+
+
+	</view>
+</template>
+
+<script>
+	import PhotoSwipe from 'photoswipe/dist/photoswipe'
+	import PhotoSwipeUI_Default from 'photoswipe/dist/photoswipe-ui-default'
+	import 'photoswipe/dist/photoswipe.css'
+	import 'photoswipe/dist/default-skin/default-skin.css'
+	var gallery = null
+	const promixify = (api) => {
+		return (options, ...params) => {
+			return new Promise((resolve, reject) => {
+				api(Object.assign({}, options, {
+					success: resolve,
+					fail: resolve
+				}), ...params)
+			})
+		}
+	}
+	export default {
+		name: "photoswipe",
+		props: {
+			imgs: {
+				//图片列表
+				type: Array,
+				required: true,
+				default: () => {
+					return [];
+				}
+			},
+		},
+		data() {
+			return {
+				idx:0,	
+			};
+		},
+		methods: {
+			resImg(){
+				if(gallery){
+					if(gallery.container.clientHeight>0){
+						gallery.updateSize( true );
+					}
+				}
+				
+			},
+			initImage(e) {
+				let that = this
+				var pswpElement = document.querySelectorAll('.pswp')[0];
+				var items = [];
+				const getImageInfo = promixify(uni.getImageInfo)
+				Promise.all(
+					that.imgs.map(img => getImageInfo({
+						src: img.picture ? img.imgUrl : img.acronymUrl
+					}))
+				).then((imageInfos) => {
+
+					imageInfos.map((i, k) => {
+						i.w = i.width,
+						i.h = i.height
+						i.src = i.path; //大图
+						i.msrc = i.path; //小图
+					})
+					items = imageInfos
+					var options = {
+						index: e, // start at first slide
+						history: false
+					};
+					gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
+					gallery.init();
+					that.idx = gallery.getCurrentIndex()
+					gallery.listen('beforeChange', function() {
+						that.idx = gallery.getCurrentIndex()
+					});
+
+				})
+
+
+
+
+
+			},
+			
+			//查看原图
+			viewPicture(){
+				let that = this
+				let idx = gallery.getCurrentIndex()
+				that.imgs[idx].picture = true
+				let itm = [that.imgs[idx]]
+				const getImageInfo = promixify(uni.getImageInfo)
+				
+				Promise.all(
+				 itm.map(img => getImageInfo({ src:img.imgUrl }))
+				).then((imageInfos) => {
+					
+					gallery.items[idx]={
+					    src:imageInfos[0].path,
+					    w:imageInfos[0].width,
+					    h:imageInfos[0].height,
+						msrc :imageInfos[0].path,
+					};
+					gallery.invalidateCurrItems();
+					gallery.updateSize( true );
+					
+				})
+				
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+.btn_item{
+		font-size: 24rpx;
+		background: none;
+		border: 2rpx solid #FFFFFF;
+		color: #FFFFFF;
+		position: absolute;
+		bottom: 0;
+		right: 100rpx;
+		height: 60rpx;
+		line-height: 60rpx;
+		top: 10rpx;
+		
+	}
+	.btn_item::after{
+		display: none;
+	}
+</style>

package.json

@@ -0,0 +1,13 @@
+{
+    "id": "ben-photoswipe",
+    "name": "photoswipe",
+    "version": "1.0.0",
+    "description": "H5图片预览插件，可缩放，查看原图，支持自定义操作",
+    "keywords": [
+        "多图预览",
+        "图片预览",
+        "photoswipe",
+        "swipe",
+        "photo"
+    ]
+}

pages/mobile/modelThree.vue

@@ -2,9 +2,14 @@
 	<view class="content">
 		<view class="top">
 			<image class="topIMg" src="http://dmsimg.66km.com/thFiles/7C057545-E11E-40F5-AD3C-637EF653B417.jpg" mode=""></image>
+		    <image src="../../static/img/icon_fangda@2x.png" mode="" class="enlarge"></image>
+		</view>
+		<view style="height: 20rpx;background: #F4F5F7;"></view>
+		<view class="mainBox">
+			<view class="mainTop">
+				view.
+			</view>
 		</view>
-		
-		
 	</view>
 </template>
 
@@ -26,6 +31,14 @@
 
 <style scoped>
 	.topIMg{
-		width: 100%;
+		width: 100%;    display: block;
+	}
+	.top{
+		position: relative;
+	}
+	.enlarge{
+		position: absolute;
+		width: 44rpx;height: 44rpx;
+		right: 30rpx;bottom: 34rpx;
 	}
 </style>

pages/pc/index.vue

@@ -1,28 +1,63 @@
 <template>
 	<view class="content">
-		<image class="logo" src="/static/logo.png"></image>
-		<view class="text-area">
-			<text class="title">{{title}}</text>
-		</view>
+		<view class="top"></view>
+		<view class="te"></view>
+		<image @click="previewImage" src="http://dmsimg.66km.com/thFiles/7C057545-E11E-40F5-AD3C-637EF653B417.jpg" mode=""></image>
+	   
 	</view>
 </template>
 
 <script>
+	
 	export default {
 		data() {
 			return {
-				title: 'Hello'
+				ImageList: [
+					{
+						imgUrl:"http://dmsimg.66km.com/thFiles/7C057545-E11E-40F5-AD3C-637EF653B417.jpg",
+						acronymUrl:"http://dmsimg.66km.com/thFiles/7C057545-E11E-40F5-AD3C-637EF653B417.jpg",
+					    picture:false,
+					}
+				]
 			}
 		},
 		onLoad() {
            
 		},
 		methods: {
-
+            previewImage(){
+				var arr = [];
+				var img='http://dmsimg.66km.com/thFiles/7C057545-E11E-40F5-AD3C-637EF653B417.jpg'
+				arr.push(img)
+				
+				// 预览图片
+				uni.previewImage({
+					urls: arr,
+					current: img,
+					longPressActions: {
+						itemList: ['发送给朋友', '保存图片', '收藏'],
+						success: function(data) {
+							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
+						},
+						fail: function(err) {
+							console.log(err.errMsg);
+						}
+					}
+				});
+			}
 		}
 	}
 </script>
 
 <style scoped>
-	
+	.top{
+		width: 100vw;
+		height: 20px;
+		background: red;
+	}
+	.te{
+		width: 960px;
+		height: 20px;
+		background: yellow;
+	}
 </style>