章节
问答
课签
笔记
评论
占位
占位

页面布局

第二个主题页面的布局,涉及了背景图,商店,门,灯等几个元素。为了方便静态页面布局,可以用个小技巧,修改下代码通过scrollTo直接定位到当前页面

//用来临时调整页面,1个页面宽,也就是第二个页面
swipe.scrollTo(container.width(),0)

新建一个pageB.css的样式文件,我们把与第二个页面相关的css样式都写入这个文件中,这个布局挺简单,自适应的关系采用的是百分比布局,可以按照UI设计的尺寸计算百分比

稍微注意下的就是商店的灯的亮度切换采用的是切换背景图片,背景图如果是没有预加载的话就有一个闪屏的问题,所以特意做了一个b_background_preload的节点让图片先加载,设置一个坐标不可见

商店的门是可以开关的所以在布局上会有个一左一右的处理

最后我们会用一个background-size:100% 100%的属性处理图片,不管分辨率怎么变化,图片始终都是填充整个尺寸

看看右边就是布局后的效果

任务

?不会了怎么办
||

提问题

写笔记

公开笔记
提交
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布
全部 我要发布
最热 最新
只看我的

手记推荐

更多

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?