微信小程序欢迎页面效果实现

welcome.wxml

<view class="container"><image class="avatar" src="/images/avatar/1.png"></image><text class="motto">Hello, 微信</text><view class="journey-container" bindtap="onTap"><text class="journey">开启小程序之旅</text></view>
</view>

.container {display: flex;flex-direction: column;align-items: center;background-color: #b3d4db;
}.avatar {width: 200rpx;height: 200rpx;margin-top: 160rpx;
}.motto {margin-top: 100rpx;font-size: 32rpx;font-weight: bold;
}.journey-container {margin-top: 200rpx;border: 1px solid #405f80;width: 200rpx;height: 80rpx;border-radius: 5px;text-align: center;
}.journey {font-size: 22rpx;font-weight: bold;line-height: 80rpx;color: #405f80;
}

此时查看效果：

虽然在设置了container的background-color，但是并没有铺满整个屏幕，导航栏和底部都没有被设置颜色。

可以在welcome.json中设置导航栏的颜色

"navigationBarBackgroundColor": "#b3d4db"

可以在welcome.wxss中设置page样式，使颜色铺满整个屏幕

page {height: 100%;background-color: #b3d4db;
}

微信小程序欢迎页面效果实现相关推荐

navtab触底小程序_微信小程序TAB切换效果
微信小程序tab切换效果话不多说,先上效果图主要是让在一个WXML上面显示2个页面,用来分页展示东西. 直接上代码了: 首先是wxml {{item}} A页 B页然后是wxcss样式代码 .t ...
微信小程序某个页面直接返回首页（微信小程序回退到首页）
微信小程序某个页面直接返回首页(微信小程序回退到首页) 打开小程序后,到三级页面后点击左上角的返回按钮,能够直接返回到首页正常 A -> B -> C 都是通过 wx.navigate ...
uniapp开发微信小程序-4.页面跳转与横向滑动
uniapp开发微信小程序-4.页面跳转与横向滑动本篇文章主要是想记录一下横向滑动功能,备忘的同时给大家做个分享. 但既然是初级分享系列文章,为了方便新手朋友的上手工作,还是在此之前说一下页面跳转的 ...
微信小程序-登录-页面-代码-实现-峯-推荐
学习目标 1.掌握 JAVA入门到进阶知识(持续写作中--) 2.学会Oracle数据库用法(创作中--) 3.手把手教你vbs脚本制作(完善中--) 4.强大的 IDEA编程利器(编写中--) 5. ...
android 自定义Scrollview实现淘宝二层楼效果新版微信小程序下拉效果
android 自定义Scrollview实现淘宝二层楼效果新版微信小程序下拉效果由于最近一段时间真的是太忙了,没有顾上即使更新博客,还请粉丝们见谅,最近要实现这样一个效果,这个效果跟淘宝二层楼和新 ...
微信小程序开发系列 (四) ：微信小程序的页面跳转路由设计
笔者由于工作需要,曾经参加过一个微信小程序同 SAP 系统集成的项目,因此从零开始学习了微信小程序的开发知识.这里通过系列文章把自己所学分享出来,希望对相关学习者有所帮助. 本教程前面三篇文章: 微信 ...
微信小程序之页面打开数量限制
微信小程序之页面打开数量限制无论是在小程序还是APP中,打开一个页面其实就是创建了一个新的View对象,一层层叠加的.当点击页面的回退按钮就是把当前页面关闭. 这个过程中会涉及到一个问题,就是打开页 ...
微信小程序：页面传递中文出现乱码
微信小程序:页面传递中文 decodeURIComponent() 参考微信小程序页面中文传参Option获取参数乱码问题
【微信小程序】幻灯片效果实现
[微信小程序]幻灯片效果实现 <view style="height: {{276-headHeight}}px;" class="bgIndex"> ...

微信小程序欢迎页面效果实现

微信小程序欢迎页面效果实现相关推荐

最新文章

热门文章