一键切换微信小程序页面上下拉露底背景（是图片，不是纯色哦）

作者: spring_zou | 来源:发表于2017-08-19 23:19 被阅读1026次

最近看到一个做的比较好的小程序，其中有一个细节让我觉得很有意思，就是小程序页面上下拉露底是图片，本来小程序官方文档配置app.json中window{backgroundColor：“#ffffff”},是不能设置图片作为背景的，但别人的小程序却做到了，请看图

讲一下实现的思路

1 最外层view （宽高都为100%），并固定整个页面

页面中最外层的view设置宽高都为100%，当然在小程序中height是通过wx.getSystemInfo获取手机屏幕的高

2在view中嵌套一个y方向scroll-view，宽高也同样为100%

3关键的点在这了，scroll-view里的内容一定要比scroll-view的高度多一点点，才可以上下拉动，要不然整个页面都是固定的，也看不到露底

4切换背景那就简单了，就是改变最外层view的background

既然可以实现这个效果了，那后面自然就可以有其他的扩展，可以像原生app一样，自己去定制露底的内容

欢迎各路大神光临指导

Github地址：https://github.com/Spring-Listening

网友评论

本文标题：一键切换微信小程序页面上下拉露底背景（是图片，不是纯色哦）

本文链接：https://www.haomeiwen.com/subject/jpsxdxtx.html

一键切换微信小程序页面上下拉露底背景（是图片，不是纯色哦）