微信小程序开发实战(页面配置)

简介: 微信小程序开发实战(页面配置)

小程序窗口的组成部分😶‍🌫️


如 👇

image.png

了解 window 节点常用的配置项😶‍🌫️


image.png

设置导航栏的标题😶‍🌫️


设置步骤:app.json 👉 window 👉 navigationBarTitleText

需求:把导航栏上的标题,修改成 “小白开发小程序”

效果如👇

image.png

设置导航栏的背景颜色😶‍🌫️


设置步骤:app.json 👉 window 👉 navigationBarBackgroundColor

需求:把导航栏上的标题,修改成 “小白开发小程序”

效果如👇

image.png

设置导航栏的标题颜色😶‍🌫️

设置步骤:app.json 👉 window 👉 navigationBarTextStyle


需求:把导航栏上的标题颜色,从默认的 black 修改为 white


注意❗: navigationBarTextStyle 的可选值只有 black 和 white


效果如👇

image.png

全局配置下拉刷新😶‍🌫️


概念:下拉刷新是移动端的专有名词,指的是通过手指在屏幕上的下拉滑动操作,从而重新加载页面数据的行为。

设置步骤:app. window 👉 把 enablePullDownRefresh 的值设置为 true

注意❗:在 app.json 中启用下拉刷新功能,会作用于每个小程序页面!

效果如👇

6.gif

全局配置下拉刷新背景颜色😶‍🌫️


当全局开启下拉刷新功能之后,默认的窗口背景为白色。如何自定义下拉刷新窗口背景色,

设置步骤: app.json 👉 window 👉 为 backgroundColor 指定16进制的颜色值 #66ccff。

注意❗:在 app.json 中启用下拉刷新功能,会作用于每个小程序页面!

效果如👇

7.gif

全局开启下拉刷新Loading的样式😶‍🌫️


当全局开启下拉刷新功能之后,默认窗口的 loading 样式为白色,如果要更改 loading 样式的效果 👇

设置步骤为 app.json 👉 window 👉 为 backgroundTextStyle 指定 dark 值。

注意: backgroundTextStyle 的可选值只有 light 和 dark

效果如👇

8.gif

上拉触底是移动端的专有名词😶‍🌫️


概念:上拉触底是移动端的专有名词,通过手指在屏幕上的上拉滑动操作,从而加载更多数据的行为。

设置步骤: app.json 👉 window 👉 为 onReachBottomDistance 设置新的数值

注意❗:默认距离为50px,如果没有特殊需求,建议使用默认值即可。

最后


image.png

下篇文章再见ヾ( ̄▽ ̄)ByeBye

image.png


相关文章
|
10天前
|
前端开发
支付系统--微信支付21--搭建前端环境,payment-demo-front这个项目文件夹是前端显示文件,payment-demo是后端项目,支付页面常见三个页面:购买课程,我的订单,下载账单
支付系统--微信支付21--搭建前端环境,payment-demo-front这个项目文件夹是前端显示文件,payment-demo是后端项目,支付页面常见三个页面:购买课程,我的订单,下载账单
支付系统---微信支付14----创建案例项目---介绍,第二步引入Swagger,接口文档和测试页面生成工具,定义统一结果的目的是让结果变得更加规范,以上就是谷粒项目的几个过程
支付系统---微信支付14----创建案例项目---介绍,第二步引入Swagger,接口文档和测试页面生成工具,定义统一结果的目的是让结果变得更加规范,以上就是谷粒项目的几个过程
|
11天前
|
前端开发 小程序
【微信小程序-原生开发】实用教程20 - 生成海报(实战范例为生成活动海报,内含生成指定页面的小程序二维码,保存图片到手机,canvas 系列教程)
【微信小程序-原生开发】实用教程20 - 生成海报(实战范例为生成活动海报,内含生成指定页面的小程序二维码,保存图片到手机,canvas 系列教程)
18 0
|
11天前
|
JSON 小程序 JavaScript
【微信小程序-原生开发】实用教程13 - 新用户注册审核(含页面的下拉刷新)
【微信小程序-原生开发】实用教程13 - 新用户注册审核(含页面的下拉刷新)
14 0
|
10天前
|
小程序 开发者
uniapp实战 —— 开发微信小程序的调试技巧
uniapp实战 —— 开发微信小程序的调试技巧
14 1
|
11天前
|
小程序
【微信小程序-原生开发】富文本编辑器 editor 的使用教程
【微信小程序-原生开发】富文本编辑器 editor 的使用教程
18 0
【微信小程序-原生开发】富文本编辑器 editor 的使用教程
|
11天前
|
存储 小程序 API
【微信小程序-原生开发+云开发+TDesign】修改用户头像(含wx.chooseMedia,wx.cloud.uploadFile,wx.cloud.deleteFile的使用)
【微信小程序-原生开发+云开发+TDesign】修改用户头像(含wx.chooseMedia,wx.cloud.uploadFile,wx.cloud.deleteFile的使用)
10 0
【微信小程序-原生开发+云开发+TDesign】修改用户头像(含wx.chooseMedia,wx.cloud.uploadFile,wx.cloud.deleteFile的使用)
|
10天前
|
小程序 定位技术 API
uniapp 开发微信小程序 --【地图】打开地图选择位置,打开地图显示位置(可开启导航)
uniapp 开发微信小程序 --【地图】打开地图选择位置,打开地图显示位置(可开启导航)
37 0
|
11天前
|
小程序 前端开发
【微信小程序-原生开发】添加自定义图标(以使用阿里图标库为例)
【微信小程序-原生开发】添加自定义图标(以使用阿里图标库为例)
20 0
|
11天前
|
小程序
【微信小程序-原生开发】客服
【微信小程序-原生开发】客服
81 0