scroll-view占满整个屏幕，且scroll-view的滚动不影响到页面其他地方的滚动

在iphone6的尺寸下，scroll-view设置高度为1110rpx，就不会影响页面其他地方的滚动

但是当屏幕尺寸调至iphone5时，左边scroll-view的滚动，就会带动右边内容的滚动

而在iphone7 plus时，scroll-view不能占满整个屏幕

最后发现只需要将scroll-view的高度设置为 100vh 就可以解决这个问题

 <scroll-view scroll-y="true" style="height: 100vh"></scroll-view>

最终效果：

小程序给scroll-view设置高度，使得它能适配各种尺寸的手机的更多相关文章

  1. 微信小程序的button按钮设置宽度无效

    亲,你是不是也遇到了微信小程序的button按钮设置宽度无效.让我来告诉你怎么弄 方法1. 样式中加入!important,即:width: 100% !important; wxss代码示例 1 2 ...

  2. 微信小程序：scroll滑到指定位置

    概述 这是我开发微信小程序遇到的坑中的一个,专门记录下来,供以后开发时参考,相信对其他人也有用. scroll滑到指定位置,有两种解决方案,一种是用scroll-view标签,另一种是用wx.page ...

  3. 微信小程序 简单获取屏幕视口高度

    由于小程序的宽度是固定的 750rpx,我们可以先用wx.getSystemInfo 来获取可使用窗口的宽高(并非rpx),结合750rpx的宽度算出比例,再用比例来算出高度 let that = t ...

  4. 微信小程序 网络请求之设置合法域名

    设置域名 登录微信公众号后台小程序中 设置→开发设置→服务器设置 必须设置域名,微信小程序才能进行网络通讯,不然会报错 如果设置好了合法域名,开发工具还提示不在合法域名列表中,因为在微信会有一段时间的 ...

  5. 微信小程序之给项目设置id后提示不在合法域名列别中

    hotapp 有免费的https proxy ,可以免费代理请求任何http或者https服务,只要设置好合法域名为https://wxapi.hotapp.cn, 就可以请求网址如请求小程序联盟的例 ...

  6. 小程序开发基础-view视图容器

    view 视图容器. // wxml <view class="section"> <view class="section__title"& ...

  7. 微信小程序开发中怎么设置转发（分享）的信息

    如果什么都不设置,转发时默认名称是小程序的名称,转发的图片显示的是当前页面的截图,如图一 如何在自定义转发信息呢? 在进行转发的页面中: Page({ onShareAppMessage: funct ...

  8. 微信小程序中的tabBar设置

    我们先来看一份图,这个设置在官方文档中已经写得很清楚了,我只是做一个总结 注:我写注释是为了方便说明,在小程序中的json文件中是不能用注释的 这个tabBar属于全局属性,因此就在全局配置文件app ...

  9. 微信小程序图片宽度100%，高度自适应

    实现图片自适应,按照一般情况只需设置: img { width: 100%; height: auto; } 但是微信小程序里是特例,需要image标签上设置属性mode=widthFix,就是hei ...

随机推荐

  1. PCL点云库中的坐标系（CoordinateSystem）

    博客转载自:https://blog.csdn.net/qq_33624918/article/details/80488590 引言 世上本没有坐标系,用的人多了,便定义了坐标系统用来定位.地理坐标 ...

  2. Python pip命令

    一.简介 pip 是一个安装和管理 Python 包的工具 , 是 easy_install 的一个替换品.distribute是setuptools的取代(Setuptools包后期不再维护了),p ...

  3. 浅谈android代码保护技术_加固

    可看原文: http://www.cnblogs.com/jiaoxiake/p/6536824.html 导语 我们知道Android中的反编译工作越来越让人操作熟练,我们辛苦的开发出一个apk,结 ...

  4. 黑盒测试实践--Day4 11.28

    黑盒测试实践--Day4 11.28 今天完成任务情况: 分块明确自己部分的工作,并做前期准备 完成被测系统--学生管理系统的需求规格说明书 完成Mook上高级测试课程的第六章在线学习,观看自动化测试 ...

  5. 通达OA整合教程

      资源下载地址: 通达OA 2015:http://pan.baidu.com/s/1qYMxsZU mysql下载:http://pan.baidu.com/s/1c2oVI5y 整合文件:htt ...

  6. 第17章-Spring消息

    1 异步消息简介 像RMI和Hessian/Burlap这样的远程调用机制是同步的.如图17.1所示,当客户端调用远程方法时,客户端必须等到远程方法完成后,才能继续执行.即使远程方法不向客户端返回任何 ...

  7. 20169219《移动平台开发实践》移动APP设计应该考虑到的问题

    1.开发流程包括: (1)用户需求分析 (2)产品原型设计 (3)UI视觉设计 (4)APP开发 (5)项目测试 (6)发布 App开发经过UI设计完成之后,便会进入开发阶段. (1)服务器端:编写接 ...

  8. 求数列中第K大的数

    原创 利用到快速排序的思想,快速排序思想:https://www.cnblogs.com/chiweiming/p/9188984.html array代表存放数列的数组,K代表第K大的数,mid代表 ...

  9. 中介者（Mediator）模式

    中介者(Mediator)模式:用一个中介对象来封装一系列的对象交互,中介者使各个对象不需要显示的相互引用,从而使得耦合松散,而且可以独立的改变他们之间的交互 了解<迪米特法则>的朋友就知 ...

  10. wp后台更新瓷片

    下载源码 还有一种方式,更新瓷片方式 1. /// <summary> /// 定时更新磁贴 /// </summary> public class ShellUpdate { ...