最近看到一个做的比较好的小程序,其中有一个细节让我觉得很有意思,就是小程序页面上下拉露底是图片,本来小程序官方文档配置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