您的位置:首页评测专区软件评测 → 怎么让小程序view-scroll高度100% 视图滚动效果设置方法详解

怎么让小程序view-scroll高度100% 视图滚动效果设置方法详解

时间:2018/7/4 16:34:12来源:www.a300.cn作者:道道我要评论(0)

  怎么让小程序view-scroll高度100%?在开发小程序里面,视图滚动效果无疑是一个问题,那么如何能让小程序的view-scroll高度到100%呢?下面就来跟小编一起了解一下。

  1.关于scroll-view

  scroll-view是小程序用来控制可滚动视图区域的组件。

  通过设置scroll-x ="true" 或 scroll-y="true" 来分别控制横向滚动或纵向滚动;这里需要注意的一点:

  使用竖向滚动时,需要给一个固定高度,通过 WXSS 设置 height

  2.使用scroll-view来实现一个介绍页长图的完整滚动显示

  本以为是一个简单的需求,没想到也会采坑;

  第一版实现思路及代码如下:

  通过wx.getSystemInfoSync()获取设备高度,然后通过内联样式去给scroll-view组件height赋值

  测试结果:

  图片在ios上不能显示完整,偶尔也会先不能滚动的情况

  认真查找很久原因,发现是因为没有给scroll-view设置 overflow: auto;

  测试结果:

  正常显示

  总结:在使用scroll-view实现竖直滚动的时候,要设置下overflow: auto;这样才能正常显示

  以上就是小编为大家找的小程序view-scroll视图滚动效果设置方法,希望能帮助到大家。

相关阅读 美柚上手体验:女生必备小程序聊天斗图:还有这款爆笑表情包神器小程序微信自选股小程序的优势 微信自选股小程序和自选股APP的区别怎么让小程序text自动换行 小程序text自动换行方法详解怎么让小程序openid和公众号一致 保持openid一致方法介绍微信相亲小程序见吧上线 见吧会不会像拼房小程序一样夭折小程序拼团裂变玩法成为线上营销的标配 小程序最新营销方法厉害了爸妈小程序是什么 最受中老年用户喜欢的小程序是哪款

文章评论
发表评论

热门文章 易信怎么用 易信深度使百度卫士初试评测

最新文章 鸿蒙2.0系统有什么优点鸿蒙2.0申请地址 鸿蒙 微信双删好友什么时候上线 微信双删好友功能微信v8.0.5更新了什么 微信最新版本8.0.5新飞书怎么删除聊天记录 飞书怎么彻底删除聊天手机qq邮箱在哪里找 手机qq邮箱怎么发文件

人气排行 小米随身wifi怎么用 小米随身wifi好用吗怎么让小程序openid和公众号一致 保持openi怎么让小程序text自动换行 小程序text自动换亲淘是什么软件 亲淘和旺旺有什么区别怎么让小程序可以下载app 小程序打开APP方法抖音音乐人怎么申请 抖音原创音乐人申请认证怎么让小程序view-scroll高度100% 视图滚动百度卫士初试评测