微信小程序scroll-view中的坑（因为动态设置高度导致无法下拉）

微信小程序中使用scroll-view时，一般都是需要自行设置高度，因为不设置的话，显示的老小了，但是设置高度的话给一个定值也不合适，一般在移动端上面，界面通常是正好铺面当前的屏幕的大小，
代码

主要使用 calc这个计算 css

首先获取当前scroll-view组件在屏幕中位置
像这样

  data: {top:'',},let query = wx.createSelectorQuery()query.select('.scroll-view').boundingClientRect((e) => {// console.log(e)this.setData({top:e.top})}).exec()

scroll-view组件

<scroll-view   class="scroll-view"style="height:calc(100vh - {{top}}px);white-space:normal"  scroll-x="{{false}}" refresher-enabled refresher-background="#F6F6F6" bindrefresherrefresh="pull" refresher-triggered="{{triggered}}" bindscrolltolower="scrolltolower" scroll-y
>
</scroll-view>

这样写的话会遇到一个scroll-view无法下拉的问题（因为top的设置是异步的，还有微信小程序的组件总是有这些奇奇怪怪的问题，因为是异步更新了组件所以可能会导致一些奇奇怪怪的问题，所以要条件渲染，在获取到top之后再渲染scroll-view，防止scroll-view的重复渲染，让整个流程看上去像是同步的，而不是异步的）

<view class="scroll-view"><scroll-view   wx:if="{{top}}"style="height:calc(100vh - {{top}}px);white-space:normal"  scroll-x="{{false}}" refresher-enabled refresher-background="#F6F6F6" bindrefresherrefresh="pull" refresher-triggered="{{triggered}}" bindscrolltolower="scrolltolower" scroll-y></scroll-view>
</view>

微信小程序scroll-view中的坑（因为动态设置高度导致无法下拉）相关推荐

微信小程序开发工具将已存在的Git项目在新开发者下拉取推送
微信小程序开发工具将已存在的Git项目在新开发者下拉取推送前言流程完事前言最近有同事离职了,交接了一个微信小程序的项目下来,源码放在了公司内部的GIT上面,当我下载下来维护之后发现,在微信 ...
【微信小程序】如何使用阿里巴巴的icon自定义图标以及简单的下拉框组件实现全过程
前言小编我将用CSDN记录软件开发之路上所学的心得与知识,有兴趣的小伙伴可以关注一下!也许一个人独行,可以走的很快,但是一群人结伴而行,才能走的更远!让我们在成长的道路上互相学习,让我们共同进步! ...
微信小程序input框中加入小图标的实现方法
最近入坑小程序,要求在小程序的输入框中展示一个小图标,页面如下: 然后按照,html页面中的做法,在input框中添加了background-image属性,出乎意料的事,小程序报了下边这样一个错误: ...
微信小程序使用vant-weapp中的索引栏右侧点不动，滚定索引失效问题
微信小程序使用vant-weapp中的索引栏右侧点不动,滚定索引失效问题 vant的索引栏只要使用了定位,或者自定义头部,那么vant的索引栏就会出现各种BUG,基本不能用,这里我是基本重新写了一个 ...
微信小程序学习——view的显示与隐藏
微信小程序学习--view的显示与隐藏需要在全局数据块中,设定一个控制键. data: {......//省略其他代码showView: true}, 然后是在wxml中,view的class中设置 ...
微信小程序在开发中遇到的问题与解决方法
微信小程序在开发中遇到的问题与解决方法参考文章: (1)微信小程序在开发中遇到的问题与解决方法 (2)https://www.cnblogs.com/zjjDaily/p/8032142.html ...
微信小程序云函数中的数据处理后返回
微信小程序云函数中的数据处理后返回本文主要演示的是,在微信云函数中调用数据库后,如何对获取的内容在云函数内处理后返回. 主函数 exports.main = async (event, contex ...
【小程序迁移】微信小程序迁移到支付宝记坑
[小程序迁移]微信小程序迁移到支付宝记坑文档控制台网址汇总前言本地区别仅企业可用的功能限制功能插件区别云开发API区别需要做的代码变更 xml部分 CSS部分 JS部分自定义组件比 ...
微信小程序app.js中的全局变量globalData改变，如何通知其它页面界面显示改变，小程序中如何在其他页面中监听到globalData中值的变化
微信小程序app.js中的全局变量globalData改变,如何通知其它页面界面显示改变,小程序中如何在其他页面中监听到globalData中值的变化在小程序中,我们一般在app.js的onLaun ...
微信小程序，数据库中插入表情
微信小程序,数据库中插入表情错误提示使用的是django做的后台错误提示 django.db.utils.InternalError: (1366, "Incorrect string ...

微信小程序scroll-view中的坑（因为动态设置高度导致无法下拉）

微信小程序scroll-view中的坑（因为动态设置高度导致无法下拉）相关推荐

最新文章

热门文章