<template>
<view
class="xz-image"
:style="{ width: width, height: height }"
:class="{ 'is-full-screen': isFullScreen }"
>
<movable-area style="width: 100%; height: 100%">
<movable-view
style="width: 100%; height: 100%"
direction="all"
>
<image
:src="imgSrc"
mode="aspectFit"
@click="isFullScreen = !isFullScreen"
/>
</movable-view>
</movable-area>
<view
class="full-screen"
@click="isFullScreen = !isFullScreen"
>
<image
src="https://xzfw.xiznjw.com:9011/mini-app/img/fullscreen.png"
mode="aspectFit"
/>
</view>
</view>
</template>
<script>
import { previewImage } from '@/api/common'
export default {
props: {
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '412rpx'
},
preview: {
type: Boolean,
default: true
},
src: {
type: String,
default: ''
}
},
computed: {
imgSrc() {
if (this.src) {
return previewImage(this.src)
}
}
},
data() {
return {
isFullScreen: false
}
}
}
</script>
<style lang="scss" scoped>
.xz-image {
box-shadow: 0rpx 4rpx 10rpx 0rpx #eeeeee;
border-radius: 10rpx;
display: flex;
position: relative;
&.is-full-screen {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100vw !important;
width: 100vh !important;
z-index: 9999999;
transform: rotate(90deg);
transform-origin: calc(100vw / 2) calc(100vw / 2);
background-color: #fff;
}
.full-screen {
position: absolute;
padding: 15rpx;
background-color: #61a4b7;
border-radius: 7rpx;
right: 15rpx;
top: 15rpx;
display: flex;
align-items: center;
justify-content: center;
image {
width: 24rpx;
height: 19rpx;
}
}
image {
width: 100%;
height: 100%;
}
}
</style>
对的,是有这个问题,如果想强行横屏使用的话可以换个思路movable-area不旋转,还是竖屏状态,然后里面的movable-view也是竖屏状态,但是movable-view里面的元素可以进行中心旋转,这样的话用户看起来是横屏,但是其实只是错觉,我这边用uniapp写了一个,你小程序可以试着模仿一下,不要直接复制,语法和写法不同 <view class="maxWh" style="pointer-events: auto" @tap.stop="()=>{}"> <view class="maxWh re" style="background: rgba(0,0,0,0.6);backdrop-filter: blur(0px);"> <swiper :duration=300 class="maxWh" :current="current" circular disable-touch vertical :touchable="false" @change="swiperChange"> <swiper-item class="maxWh" v-for="(item,index) in list" :key="index"> <movable-area class="fixed-box animation-slide-slow maxWh" scale-area @click="clickClose"> <movable-view :x="position.x" :y="position.y" out-of-bounds scale class="overflow-hidden" direction="all" :scale-min="0.1" :scale-max="20" :style="{width:sliderSize.width,height:sliderSize.height}" style="transition: height 0.3s"> <view class="ab po-centers"> <image :src="item" :style="{width:sliderSize.height,height:sliderSize.width }" mode="aspectFill" :draggable="false" show-menu-by-longpress style="transform: rotate(90deg);" @click.stop="()=>{}"> </image> </view> </movable-view> </movable-area> </swiper-item> </swiper> <view class="ab po-br" style="z-index: 2;backdrop-filter: blur(0px)"> <button class="bIn padding-lg bg-tr" @click="is_show=false"> <u-icon name="close" color="#fff" size="36rpx"></u-icon> </button> </view> <view class="ab po-centerX po-top" style="z-index: 2;backdrop-filter: blur(0px)" :style="{opacity:current>0?1:0.3}"> <button class="bIn padding bg-tr" @click="Toggle(0)"> <u-icon name="arrow-up" color="#ffffff" size="40rpx"></u-icon> </button> </view> <view class="ab po-centerX po-bottom" style="z-index: 2;backdrop-filter: blur(0px)" :style="{opacity:(current+1)<list.length?1:0.3}"> <button class="bIn padding bg-tr" @click="Toggle(1)"> <u-icon name="arrow-down" color="#ffffff" size="40rpx"></u-icon> </button> </view> </view> </view> </view> <view class="fixed rotate po-tl" v-if="is_sheetShow"> <view class="re maxWh" style="background: rgba(0,0,0,0.3)" @click="is_sheetShow = false"></view> <view class="ab po-bl width-max bg-white radius-tl radius-tr overflow-hidden safeDistance animation-slide-bottom"> <view class=""> <button class="bIn bg-white padding-tb" v-for="(item,index) in sheetList" :key="index" v-if="item.show" @click="controls(item,index)"> <view class="text-df">{{item.name||'-'}}</view> </button> </view> <view class="bg-bgColor padding-tb-xsm"></view> <view class=""> <button class="bIn bg-white padding-tb" @click="is_sheetShow = false"> <view class="text-df">取消</view> </button> </view> </view> <script> export default { name: "pictureView", props: {}, data() { return { system: {}, is_show: false, list: [], current: 0, sheetList: [ { name: '转发', show: false, id: 0 }, { name: '保存', show: true, id: 1 } ], is_sheetShow: false, elementWidth: 0, elementHeight: 0, position: { x: 0, y: 0, source: "friction" }, sliderSize: { width: 0 + "px", height: 0 + "px" }, }; }, mounted() { this.system = this.$hostInfo.getSystem() }, methods: { /** * 显示 */ show( list, index ) { this.is_show = true this.$nextTick( () => { this.$u.getRect( `#element` ).then( res => { this.elementWidth = res.width this.elementHeight = res.height this.list = list this.current = index this.getPictureSize() } ) } ) }, /** * 切换图片 */ swiperChange() { this.getPictureSize() }, /** * 获取图片大小并且定位 */ getPictureSize() { var that = this var image = new Image(); image.src = this.list[ this.current ]; image.onload = function() { var imgWidth = image.height var imgHeight = image.width var targetWidth = imgWidth; var targetHeight = imgHeight; var maxWidth = that.elementWidth; //图片最大宽 var maxHeight = that.elementHeight; //图片最大高 var scale = imgWidth / imgHeight; //原图宽高比例 //如果原图宽大于最大宽度 if ( imgWidth > maxWidth ) { targetWidth = maxWidth; targetHeight = targetWidth / scale; } //缩放后高度仍然大于最大高度继续按比例缩小 if ( targetHeight > maxHeight ) { targetHeight = maxHeight targetWidth = targetHeight * scale; } // 计算缩放后的中心位置 if ( targetWidth != maxWidth ) { that.position.x = ( maxWidth / 2 ) - ( targetWidth / 2 ) } if ( targetHeight != maxHeight ) { that.position.y = ( maxHeight / 2 ) - ( targetHeight / 2 ) } that.sliderSize = { width: targetWidth + "px", height: targetHeight + "px" } } }, /** * 点击关闭组件 */ clickClose() { if ( this.is_sheetShow ) return this.is_show = false }, /** * 长按显示菜单 */ toSave() { this.is_sheetShow = true }, /** * 菜单操作 */ controls( item, index ) { if ( item.id == 1 ) { } }, /** * 左右切换 */ Toggle( type ) { if ( type == 0 ) { if ( this.current == 0 ) { // this.current = this.list.length - 1 return } this.current = this.current - 1 } else { if ( ( this.current + 1 ) == this.list.length ) { // this.current = 0 return } this.current = this.current + 1 } } } } </script> <style> .rotate { width: 100vh; height: 100vw; overflow: hidden; transform: rotate(90deg); transform-origin: 50vw 50vw; z-index: 11; } /** 必须提升样式优先权(!important) **/ button[disabled] { opacity: 0.3 !important; background: transparent !important; } </style>