微信小程序——界面交互接口

本文详细介绍了微信小程序中界面交互的各种接口,包括消息提示、模态对话、加载提示、操作菜单,以及下拉刷新的启用、配置和事件监听。此外,还涵盖了动画控制、导航栏设置、tabBar定制、页面位置控制、页面跳转和参数传递的方法,以及上拉触底事件的监听和配置。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >


小程序中,app.json 中的 window 节点,可以全局配置小程序中每个页面的窗口表现。如果某些小程序页面想要拥有特殊的窗口表现,此时,“ 页面级别的 .json 配置文件”就可以实现这种需求。
注意:当页面配置与全局配置冲突时,根据就近原则,最终的效果以页面配置为准。

一、交互反馈

1.消息提示框

2.模态对话框

3.加载提示框

4.显示操作菜单

二、下拉刷新

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

(1)启用下拉刷新

启用下拉刷新有两种方式:

  • 全局开启下拉刷新:
    设置步骤:app.json -> window -> enablePullDownRefresh 的值设置为true
  • 局部开启下拉刷新
    设置步骤:页面的 .json enablePullDownRefresh 的值设置为 true

在实际开发中,推荐使用第 2 种方式,为需要的页面单独开启下拉刷新的效果。

(2)配置下拉刷新窗口的样式

在全局或页面的 .json 配置文件中,通过 backgroundColor 和 backgroundTextStyle 来配置下拉刷新窗口的样式,其中:

  • backgroundColor 用来配置下拉刷新窗口的背景颜色,仅支持16 进制的颜色值
  • backgroundTextStyle用来配置下拉刷新 loading 的样式,仅支持 dark 和 light

(3)监听页面的下拉刷新事件

在页面的 .js 文件中,通过 onPullDownRefresh() 函数即可监听当前页面的下拉刷新事件。
.js中:

Page({
  //页面相关事件处理函数--监听用户下拉动作
  onPullDownRefresh:function() {
  }
})

(4)停止下拉刷新的效果

当处理完下拉刷新后,下拉刷新的 loading 效果会一直显示,不会主动消失,所以需要手动隐藏下拉刷新的 loading 效果。此时,调用 wx.stopPullDownRefresh() 可以停止当前页面的下拉刷新。.js中:

Page({
  //页面相关事件处理函数--监听用户下拉动作
  onPullDownRefresh:function() {
    wx.stopPullDownRefresh()
  }
})

三、动画控制

四、导航栏设置

(1)标题

设置步骤:app.json -> window -> navigationBarTitleText

(2)背景色

设置步骤:app.json -> window -> navigationBarBackgroundColor

(3)标

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值