当前位置：首页 > news >正文

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

news 2025/7/20 21:26:25

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

<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>