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" @error="onError" @load="onSuccess" mode="aspectFill" :class="['default', 'slide-image', 'slide-image-'+item.type]" style="height:100%;scroll-snap-align: start;"></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" @error="onError" @load="onSuccess" mode="aspectFill" :class="['default', 'slide-image', 'slide-image-'+item.type]" style="height:100%;scroll-snap-align: start;"></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,
			defalut : {}
		},
		item : {
			type    : Object,
			defalut : {}
		},
		index : {
			type    : Number,
			default	: 0
		},
		pic_index : {
			type    : Number,
			default	: 0
		},
	},
	data() {
		return {
			loaded : false
		};
	},
	mounted : function() {
		this.loaded = false;
		//this.loadImage();
	},
	methods:{
		async loadImage() {
		    // 由于方法是异步的，渲染时高度会不生效，所以要加await
		    let info = await uni.getImageInfo({src: this.item.pic}) 
		 
		    // 取到图片的宽高
		    let {width, height} = info[1]
			
			this.loaded = true;
		},
		onSuccess : function(e) {
			this.loaded = true;
		},
		onError : function(e) {
			this.loaded = false;
		},
		onImg : function(width, height) {
			//var height = e.detail.height / (e.detail.width / this.Dever.config.system.windowWidth);
			/*
			if (this.pic_index == 0) {
				this.$emit('show', this.pic_index);
			}*/
		}
	},
	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>