uniapp scroll-view翻转90度后,无法滚动问题,并设置滚动条到最底部(手写横屏样式)

uniapp scroll-view翻转90度后,无法滚动问题,并设置滚动条到最底部

javascript 复制代码
<template>
	<view class="main">
		
			<view style="height: 200px;"></view>
			<view class="btn-main">
				<view class="send-message">
					<view class="sm-list rotate90" style="background-color: antiquewhite;">
						<scroll-view style="height: 104px;" scroll-y="true" class="scroll-y">
							<view class="sm-item">
								<view class="sm-item-text">
									<span class="sm-item-name">'观看用户':</span>
									1111111111111111111111
								</view> 
							</view>
							<view class="sm-item">
								<view class="sm-item-text">
									<span class="sm-item-name">'观看用户':</span>
									22222222222222222222
								</view> 
							</view>
							<view class="sm-item">
								<view class="sm-item-text">
									<span class="sm-item-name">'观看用户':</span>
									3333333333333333333333
								</view> 
							</view>
							<view class="sm-item">
								<view class="sm-item-text">
									<span class="sm-item-name">'观看用户':</span>
									44444444444444444444
								</view> 
							</view>
							<view class="sm-item">
								<view class="sm-item-text">
									<span class="sm-item-name">'观看用户':</span>
									55555555555555555
								</view> 
							</view>
							<view class="sm-item">
								<view class="sm-item-text">
									<span class="sm-item-name">'观看用户':</span>
									666666666666666666
								</view> 
							</view>
							<view class="sm-item">
								<view class="sm-item-text">
									<span class="sm-item-name">'观看用户':</span>
									7777777777777777
								</view> 
							</view>
							<view class="sm-item">
								<view class="sm-item-text">
									<span class="sm-item-name">'观看用户':</span>
									88888888888888888
								</view> 
							</view>
							<view class="sm-item">
								<view class="sm-item-text">
									<span class="sm-item-name">'观看用户':</span>
									9999999999999999999999
								</view> 
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
				
				
				
			
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		onLoad() {
			// 设置滚动到最底部
			setTimeout(()=>{
				this.$nextTick(()=>{
					 let box = this.$el.querySelector(".uni-scroll-view-content")
					 box.scrollTop = box.scrollHeight
				})
			},2000)
		},
		onShow() {
			
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #F5F5F5;
	}
	
	.rotate90{
		transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-webkit-transform: rotate(90deg);
		-o-transform: rotate(90deg);
	}
	::v-deep .uni-scroll-view-content{
		overflow: auto !important;
	}
	
</style>
相关推荐
2501_916007471 小时前
iOS文件管理工具深度剖析,从系统沙盒到跨平台文件操作的多工具协同实践
android·macos·ios·小程序·uni-app·cocoa·iphone
shykevin2 小时前
uni-app x开发商城系统,扩展组件uni-ui实现底部商品导航
uni-app
QuantumLeap丶2 小时前
《uni-app跨平台开发完全指南》- 05 - 基础组件使用
vue.js·微信小程序·uni-app
2501_915918414 小时前
Flutter 加固方案对比与实战,多工具组合的跨平台安全体系(Flutter App 加固/IPA 成品混淆/Ipa Guard CLI/自动化安全流程)
安全·flutter·ios·小程序·uni-app·自动化·iphone
00后程序员张19 小时前
iOS 上架费用全解析 开发者账号、App 审核、工具使用与开心上架(Appuploader)免 Mac 成本优化指南
android·macos·ios·小程序·uni-app·cocoa·iphone
前端与小赵1 天前
uni-app开发安卓app时控制屏幕常亮不息屏
android·gitee·uni-app
2501_916008891 天前
HTTPS 请求抓包,从原理到落地排查的工程化指南(Charles / tcpdump / Wireshark / Sniffmaster)
ios·小程序·https·uni-app·wireshark·iphone·tcpdump
xiaohe06011 天前
🥳 Uni ECharts 2.1 发布:正式支持鸿蒙,零成本迁移、全平台兼容、跨端开发零负担!
vue.js·uni-app·echarts
2501_915909062 天前
WebView 调试工具全解析,解决“看不见的移动端问题”
android·ios·小程序·https·uni-app·iphone·webview
2501_915106322 天前
App 怎么上架 iOS?从准备资料到开心上架(Appuploader)免 Mac 上传的完整实战流程指南
android·macos·ios·小程序·uni-app·iphone·webview