dreamland/pages/dream/view/pic.vue

<template name="pic">
	<view class="cover cover-height">
		<block v-if="item.text.length > 0">
			<image v-show="loaded" @click="Dever.viewPic([item.pic], item.pic)" :src="item.pic" mode="widthFix" :class="['default', 'slide-image', 'slide-image-'+item.type]" @error="onError" @load="onSuccess" style="height:auto"></image>
			<ourLoading v-show="!loaded" active text="加载中..." />
			<dever-position :item="item.text" :down="item.pic" :button="item.is_button"></dever-position>
		</block>
		<block v-if="item.text.length <= 0">
			<image v-show="loaded" @click="Dever.viewPic([item.pic], item.pic)" :src="item.pic" mode="widthFix" :class="['default', 'slide-image', 'slide-image-'+item.type]" @error="onError" @load="onSuccess" style="height:auto"></image>
			<ourLoading v-show="!loaded" active text="加载中..." />
		</block>
	</view>
</template>

<script>
import deverPosition from "@/lib/dever/components/position.vue";
export default {
	name: "pic",
	props: {
		control : {
			type : Object,
			value : null
		},
		item : {
			type    : Object,
			value	: null
		},
		index : 0,
		pic_index : 0,
	},
	data() {
		return {
			loaded : false
		};
	},
	methods:{
		onSuccess : function(e) {
			this.onImg(e);
			this.loaded = true;
		},
		onError : function(e) {
			this.loaded = false;
		},
		onImg : function(e) {
			var height = e.detail.height / (e.detail.width / this.Dever.config.system.windowWidth);
			this.$emit('setHeight', this.pic_index, height);
		}
	},
	components:{
		deverPosition
	}
}
</script>

<style>
.cover{
  position: relative;
  width: 100%;
  height: 100%;
}
.cover-height{
  overflow: auto;
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}
.slide-image {

}
.slide-image-1 {
  width: 750rpx;
  height: 1386rpx;
  display: block;
}
.slide-image-2 {
  width: 2000rpx;
  height: 100%;
  display: block;
}
.long-wrapper {
  position: relative;
}
</style>