对的，是有这个问题，如果想强行横屏使用的话可以换个思路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>