【微信小程序】解决 竖向<scroll-view>组件 “竖向滚动页面出现遮挡”问题
问题图:

问题原因:
<scroll-view class="scroll-container" upper-threshold="{{sortPanelDist}}" scroll-y="true" style="height:{{scrollHeight}}px;" bindscrolltolower="bindDownLoad" bindscroll="scroll" bindscrolltoupper="refresh">
其中,style="height:{{scrollHeight}}px;" 属性设置不够,导致出现遮挡。
剖析:首页没有出现这样,在其他tarbar页才出现。
解决:
onLoad: function (options) {
var that = this;
//获取系统的参数,scrollHeight数值,微信必须要设置style:height才能监听滚动事件
wx.getSystemInfo({
success: function (res) {
that.setData({
scrollHeight: parseInt(res.windowHeight)+200
})
}
});
},
//给获取的系统高度,再加上200px
完美解决。
【微信小程序】解决 竖向<scroll-view>组件 “竖向滚动页面出现遮挡”问题的更多相关文章
- 小程序-文章:微信小程序常见的UI框架/组件库总结
ylbtech-小程序-文章:微信小程序常见的UI框架/组件库总结 1.返回顶部 1. 想要开发出一套高质量的小程序,运用框架,组件库是省时省力省心必不可少一部分,随着小程序日渐火爆,各种不同类型的小 ...
- 微信小程序入门与实战 常用组件API开发技巧项目实战*全
第1章 什么是微信小程序? 第2章 小程序环境搭建与开发工具介绍 第3章 从一个简单的“欢迎“页面开始小程序之旅 第4章 第二个页面:新闻阅读列表 第5章 小程序的模板化与模块化 第6章 构建新闻详情 ...
- 使用wepy开发微信小程序商城第二篇:路由配置和页面结构
使用wepy开发微信小程序商城 第二篇:路由配置和页面结构 前言: 最近公司在做一个微信小程序的项目,用的是类似于vue的wepy框架.我也借此机会学习和实践一下. 小程序官方文档:https://d ...
- 微信小程序 在canvas画布上划动,页面禁止滑动
要实现微信小程序 在canvas画布上划动,页面禁止滑动,不仅要设置disable-scroll="true",还要要给canvas绑定一个触摸事件才能生效. <canvas ...
- 微信小程序开发03-这是一个组件
编写组件 基本结构 接上文:微信小程序开发02-小程序基本介绍 我们今天先来实现这个弹出层: 之前这个组件是一个容器类组件,弹出层可设置载入的html结构,然后再设置各种事件即可,这种组件有一个特点: ...
- 微信小程序开发之picker选择器组件用法
picker组件时一个从底部弹起的可滚动的选择器(嵌入页面滚动器组件picker-view查看https://mp.weixin.qq.com/debug/wxadoc/dev/component/p ...
- 微信小程序开发---视图层(View)
WXML WXML能力: 数据绑定 列表渲染 条件渲染 模板 事件 数据绑定 数据绑定使用 Mustache 语法(双大括号)将变量包起来,可作用于内容,组件属性(需要在双引号之内),控制属性(需要在 ...
- 微信小程序template模板与component组件的区别和使用
前言: 除了component,微信小程序中还有另一种组件化你的方式template模板,这两者之间的区别是,template主要是展示,方法则需要在调用的页面中定义.而component组件则有自己 ...
- 微信小程序入坑之自定义组件
前言 最近接触微信小程序,再次之前公司用的前端框架是vue ,然后对比发现,开发小程序是各种限制,对于开发者非常不友好.各种槽点太多,完全吐槽不过来,所以在此不多说,打算下次专门写一篇文章吐槽一下.本 ...
- 微信小程序常见的UI框架/组件库总结
想要开发出一套高质量的小程序,运用框架,组件库是省时省力省心必不可少一部分,随着小程序日渐火爆,各种不同类型的小程序也渐渐更新,其中不乏一些优秀好用的框架/组件库. 1:WeUI 小程序–使用教程 h ...
随机推荐
- windows下androidNDK环境配置
一:什么是NDK? NDK 提供了一系列的工具,帮助开发者快速开发C(或C++)的动态库,并能自动将so 和java 应用一起打包成apk.这些工具对开发者的帮助是巨大的. NDK 集成了交叉编译器, ...
- 转: LDAP有啥子用? 用户认证
认证的烦恼 小明的公司有很多IT系统, 比如邮箱.SVN.Jenkins , JIRA,VPN, WIFI...... 等等 . 新人入职时需要在每个系统中申请一遍账号,每个系统对用户名和密码的要求还 ...
- linux下so获得自己文件位置的路径
打开这个设备/proc/self/maps 返回的就是这个进程当前使用的so列表 cat /proc/self/maps00400000-0040b000 r-xp 00000000 08:01 14 ...
- 《MacTalk·人生元编程》
<MacTalk·人生元编程> 基本信息 <MacTalk·人生元编程> 基本信息 作者:池建强 出版社:人民邮电出版社 ISBN:9787115342232 上架时间:201 ...
- OpenShift上部署Redis主从集群
客户有部署有状态服务的需求,单机部署模式相对简单,尝试一下集群部署. 关于Redis的master,slave 以及sentinal的架构和作用不提,有兴趣可以参考之前的博客 https://www. ...
- 共享锁&排它锁 || 乐观锁&悲观索
1.共享锁只用于表级,排他锁用于行级. 2.加了共享锁的对象,可以继续加共享锁,不能再加排他锁.加了排他锁后,不能再加任何锁. 3.比如一个DML操作,就要对受影响的行加排他锁,这样就不允许再加别的锁 ...
- 使用java api操作HDFS文件
实现的代码如下: import java.io.IOException; import java.net.URI; import java.net.URISyntaxException; import ...
- @ArrayList剖析
第1部分 ArrayList介绍 ArrayList简介 Resizable-array implementation of the List interface. Implements all op ...
- Objective-C:协议protocol
六.协议(protocol) 关键字:@optional.@required (1)是一个类共享的一个方法列表 (2)它声明了一系列的方法而不进行实现 (3)遵从某个协议,就是需要实现协议中的方法 ( ...
- 第十二章 ThreadPoolExecutor使用 + 工作机理 + 生命周期
1.最基础的线程池ThreadPoolExecutor 使用方式: /** * ThreadPoolExecutor测试类 * 注意: * 1.ThreadPoolExecutor是一个线程池 * 2 ...