admin 管理员组

文章数量: 1184232

Taro,小程序scroll

其实这样在开发小程序的时候 还是比较常见的,就是我们页面底部有一个需要滚动加载滚动的 展示容器

这个时候选择scroll-view 就是很合理了 但是 我们这个时候 需要让scroll-view 填满剩下的空间, 那样就需要计算了
公式: 设备的高度 - scroll-view 距离顶部的距离 = scroll-view的高度

获取设备的高度

Taro.getSystemInfo({success: (res) => {state.clientHeight = res.screenHeight;},
});

计算scroll-view距离顶部的距离

import Taro, { useReady } from "@tarojs/taro";
useReady(() => {Taro.nextTick(() => {const query = wx.createSelectorQuery();query.select("#scrollview").boundingClientRect();query.exec((res) => {state.scrollHeight = state.clientHeight - res[0].top + "px";});});});

然后就是设置高度
:style=“{ height: scrollHeight }”

<scroll-view:scroll-y="true"@scrolltoupper="upper"@scrolltolower="lower"@scroll="scroll":scroll-into-view="toView":scroll-top="scrollTop":style="{ height: scrollHeight }"v-if="list.length > 0"class="scroll-view"enhanced:bounces="false"id="demo"></scroll-view>

但是设置完成后 会发现 页面有回跳的情况存在 我们页面还是能出现 超过页面高度的滚动 这个就很烦人了

这个时候其实还能解决。就是页面的滚动给禁止了
disableScroll:true

export default {navigationBarTitleText: "Art Meta",enablePullDownRefresh: true,disableScroll:true
};

但还是有问题, 部门机型 就是滚动不到scroll-view的底部 导致底部的元素是看不全的 就很难受
因为scroll-view 也存在回调的情况 没办法 太难受
这个时候 还能处理就是给scroll-view 加上 padding-bottom 来进行处理

关注我 持续更新前端知识。

本文标签： Taro 小程序scroll

版权声明：本文标题：Taro,小程序scroll 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1686597602a15149.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。