• uniapp scroll view 解决高度自适应、弹框滚动穿透等问题。


    方法一:

    在uniapp中scroll view 需要给固定高度,根据不同手机高度不一样,scroll view高度不相同,uniapp中不能进行dom操作,如何让scroll view适应不同手机高度,计算好高度如何给scroll view 设置高度呢

    通过uni.getSystemInfoSync()获取窗口宽度和高度动态设置 scroll-view 高度 :style动态绑定height高度

    打印uni.getSystemInfoSync()

    在这里插入图片描述
    这里获得的高度是物理高度px 如何转成rpx

     

    在cumputed计算属性设置
     

    1. computed:{
    2. scrollH:function(){
    3. let sys = uni.getSystemInfoSync();
    4. let winWidth = sys.windowWidth;
    5. let winrate = 750/winWidth;
    6. let winHeight =parseInt(sys.windowHeight*winrate)
    7. return winHeight
    8. }
    9. }
    1. <scroll-view scroll-y="true" @scrolltolower="lower()" :style="{height:scrollH+'rpx'}">
    2. // 内容
    3. </scroll-view>

    :style="{height:scrollH+'rpx'}"

    这样就解决了这个问题~

    方法二:

    一、个人分析
    简述
    这个问题其实就是计算已经存在的组件的高度和整个页面可用的总高度,算出高度后再动态绑定style样式达到自适应。(总高度-其他组件高度 = 局部scroll-view 自适应的高度)

    问题
    首先,遇到这个问题,我的解决方法是搜索类似问题,寻找答案,在找的过程中,有几个问题让我迷惑

    计算高度的这个方法应该写在什么地方?onReady(),computed(),还是methods里?
    怎么计算页面可用总高度?组件的高度怎么获得?
    怎么动态绑定高度?
    解答
    1.computed()属于vue框架中的知识,我们在运算时,会习惯在模板中运算,而这样会增加模板的负担,因而产生了用于实现简单运算来计算属性的computed()方法,具体了解参考文章:https://cn.vuejs.org/v2/guide/computed.html,而写在onReady()中能使每次加载时都计算一次高度,更新高度。所以我用的是onReady()

    2.获取设备可用屏幕总高度。

    1. uni.getSystemInfo({
    2. success: function (res) {
    3. var windowHeight= res.windowHeight;
    4. }
    5. });

    获取组件高度,使用Id选择器,多组件的话就叠加使用

    1. let view = uni.createSelectorQuery().select("#head");
    2. view.boundingClientRect(data => {
    3. _this.topHeight = data.height;
    4. }).exec();

    3.动态绑定高度

    <scroll-view id="scrollbody" scroll-y="true" :style="{height:scrollerHeight}"></scroll-view>
    

    数据 

    1. data() {
    2. return {
    3. phoneHeight: 0, //屏幕可用高度
    4. topHeight: 0, //滑块上方高度
    5. bottomHeight: 0, //底部高度
    6. scrollerHeight: "",
    7. }
    8. },

     

    二、完整代码展示

    前端代码

    1. <template name="home">
    2. <view>
    3. <view id="head">
    4. <view class=" bg-white grid col-4 padding-lr-sm no-border margin-bottom-xs margin-lr-xs">
    5. <view class="padding-sm animation-slide-bottom" :style="[{animationDelay: (index + 1)*0.1 + 's'}]" v-for="(item,index) in usList"
    6. :key="index" @tap="goPage(item.page)">
    7. <view class="radius text-center">
    8. <view class="cu-avatar lg" :style="{background: 'url(' + item.icon + ') no-repeat',backgroundSize:'96upx 96upx'}">
    9. <view class="cu-tag badge" v-if="getTtemDotInfo(item)">{{getTtemDotInfo(item)}}</view>
    10. </view>
    11. <view class="text-sm margin-top">{{item.title}}</view>
    12. </view>
    13. </view>
    14. </view>
    15. </view>
    16. <scroll-view id="scrollbody" class="bg-white" scroll-y="true" :style="{height:scrollerHeight}">
    17. <view class="cu-card article no-card">
    18. <view class="cu-item" style="padding-bottom: 0rpx;" v-for="item in topN5" :key="item.id" @tap="goDetail(item)">
    19. <view class="title">
    20. <view class="text-cut">{{item.title}}</view>
    21. </view>
    22. <view class="content">
    23. <view class="desc margin-right-sm">
    24. <view class="text-gray flex align-center justify-between" style="font-size: 12px;">
    25. <view class="flex align-center justify-between">
    26. <view class="cu-avatar round sm margin-right-sm" :style="{backgroundImage: 'url('+ item.portrait +')'}"></view>
    27. <view class="text-grey text-sm text-bold">{{item.realname}}</view>
    28. </view>
    29. </view>
    30. <view class="text-content" style="color: #333333;">{{item.content}}</view>
    31. </view>
    32. <image v-if="item.pics.length >= 1" :src="item.pics[0]" mode="aspectFill"></image>
    33. </view>
    34. <view class="text-sm flex justify-between" style="padding: 10upx 30upx 10upx;color: #afafaf">
    35. <view>
    36. <text class="cuIcon-attentionfill margin-lr-xs"></text>{{item.viewCount}}
    37. <text class="cuIcon-appreciatefill margin-lr-xs"></text> {{item.zanNum}}
    38. <text class="cuIcon-messagefill margin-lr-xs"></text> {{item.commentNum}}
    39. </view>
    40. <view class="text-sm">{{item.time}}</view>
    41. </view>
    42. <view class="padding-bottom-sm bg-gray"></view>
    43. </view>
    44. </view>
    45. </scroll-view>
    46. <view id="foot" class="bg-white cu-tabbar-height"></view>
    47. </view>
    48. </template>

    js代码 

    1. export default {
    2. data() {
    3. return {
    4. phoneHeight: 0, //屏幕可用高度
    5. topHeight: 0, //滑块上方高度
    6. bottomHeight: 0, //底部高度
    7. scrollerHeight: "",
    8. }
    9. },
    10. onReady() {
    11. var height
    12. var _this = this;
    13. uni.getSystemInfo({
    14. success: function(res) {
    15. _this.phoneHeight = res.windowHeight;
    16. //console.log("phoneHeight:" + res.windowHeight)
    17. let view = uni.createSelectorQuery().select("#head"); //局部滑块
    18. view.boundingClientRect(data => {
    19. _this.topHeight = data.height;
    20. //console.log("topHeight:"+data.height)
    21. let otherview = uni.createSelectorQuery().select("#foot");
    22. otherview.boundingClientRect(data => {
    23. _this.bottomHeight = data.height
    24. //console.log("bottomHeight:"+data.height)
    25. height = _this.phoneHeight - _this.topHeight - _this.bottomHeight;
    26. //console.log("scrollerHeight:"+height)
    27. }).exec();
    28. }).exec();
    29. },
    30. });
    31. this.scrollerHeight = height + 'px';
    32. }

    参考文章
    这些文章写得比我详细,迷糊的朋友可以看看这些文章:
    https://blog.csdn.net/wosind/article/details/103111292?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.control&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.control

    https://blog.csdn.net/qq_37968920/article/details/99191192?utm_medium=distribute.pc_relevant.none-task-blog-searchFromBaidu-4.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-searchFromBaidu-4.control

    演示实例
    演示实例就没有了,看以后有没时间补上吧,其实挺简单的,花时间研究一下很快就解决了,文章仅供参考。对于 vue 我也是学的不是很全,凑合着用吧。

     

  • 相关阅读:
    数据挖掘实战(3):如何对比特币走势进行预测?
    python类属性和实例属性的注意点
    goLang笔记+beego框架
    k8s volcano + deepspeed多机训练 + RDMA ROCE+ 用户权限安全方案【建议收藏】
    Speedoffice(excel)如何快捷隐藏表格内所有空行
    webpack构建vue项目 基础05 之引入第三方库与代码切片、lodash
    Kconfig 和 Kbuild
    深入promise
    这篇数据库设计规范建议,我必须分享给你
    稳,从数据库连接池 testOnBorrow 看架构设计
  • 原文地址:https://blog.csdn.net/wcdunf/article/details/125544424