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>