【微信小程序】解决 竖向<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 ...
随机推荐
- jsp下Kindeditor环境搭建
1.环境:tomcat 2.需要外部jar包: commons-fileupload-1.2.1.jar commons-io-1.4.jar json_simple-1.1.jar 3.下载Kind ...
- struts2 iterator 迭代标签只显示前五条记录
<s:iterator value="#session.produceLists" var="produce" begin="0" e ...
- android 内存溢出oom错误的一些小见解
转:http://blog.csdn.net/xuhui_7810/article/details/9493681 我们在代码里调用setBackgroundResource(int resid)来设 ...
- 《CWNA官方学习指南(第3版):认证无线网络管理员PW0-105》
<CWNA官方学习指南(第3版):认证无线网络管理员PW0-105> 基本信息 原书名:CWNA: Certified Wireless Network Administrator Off ...
- python里的引用、浅拷贝、深拷贝
参考: 1.http://wsfdl.com/python/2013/08/16/%E7%90%86%E8%A7%A3Python%E7%9A%84%E6%B7%B1%E6%8B%B7%E8%B4%9 ...
- 混沌数学之Kent模型
相关软件:混沌数学之离散点集图形DEMO 相关代码: // http://wenku.baidu.com/view/7c6f4a000740be1e650e9a75.html // 肯特映射 clas ...
- [11] 楔形体(Wedge)图形的生成算法
顶点数据的生成 bool YfBuildWedgeVertices ( Yreal width, Yreal length, Yreal height, YeOriginPose originPose ...
- Java---多线程断点下载
在上一章中我们实现了多线程下载功能,这里我们添加断点下载功能,防止下载过程中程序意外退出.具体代码如下: package com.jwzhangjie; /** * 说明: * 每一个线程下载的位置计 ...
- 简单MapReduce思维导图
- 手写一个关于title属性自定义提示框解决浏览器(IE)不兼容问题
<html> <head> <meta charset="utf-8"> <title>无标题页</title> < ...