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>
相关推荐
ModyQyW33 分钟前
vite-plugin-uni-pages 0.6:统一扫描规则,开发期少重启
前端·uni-app
Software攻城狮8 小时前
【uniapp和普通web 端开发的区别】
前端·uni-app·notepad++
2501_915921438 小时前
iOS 实时日志怎么看?KeyMob 的日志过滤、崩溃报告与符号化
android·ios·小程序·https·uni-app·iphone·webview
郑州光合科技余经理1 天前
同城小程序开发:同一笔单在用户端和商家端各显示到哪
android·java·开发语言·前端·后端·uni-app·php
普通人61 天前
uniapp模版JS
开发语言·javascript·小程序·uni-app·1024程序员节
wiseyao12191 天前
uniapp scroll-view滚动到最后
前端·javascript·uni-app
红红谈说1 天前
同一套产品两个技术栈,双版本前端工程差异怎么收敛?
前端·uni-app·vue3·前后端分离·双版本维护·接口约定
hudie7652 天前
LikeShop 二开最常改的 5 个文件(附改前改后对比)
前端·uni-app·php·个人开发
梅雅达编程笔记2 天前
Day 17 | uni-app 小程序:前端从零搭建
微信小程序·typescript·uni-app·vue3·pinia·前端开发·全栈
一渊之隔3 天前
uniapp BLE 开发踩坑:小米手机数据接收截断问题排查全记录
智能手机·uni-app