常见界面`API`

1、常见界面API

官方文档

https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showToast.html

小程序提供的界面API包含了丰富的接口,可以满足大部分的项目场景

  • 交互
  • 导航栏
  • 背景
  • Tab Bar
  • 字体
  • 下拉刷新
  • 滚动
  • 动画
  • 置顶
  • 自定义组件
  • 菜单
  • 窗口
(1)交互
  • wx.showToast(Object object)

作用描述:展示一个结果信息提示

wx.showToast({
    title: '注册完成',
    icon: 'success'
})
  • wx.showLoading(Object object)

作用描述:展示一个过程信息,最终这个过程完成后需要调用wx.hideLoading()隐藏当前加载窗口

  • wx.hideLoading()

作用描述:隐藏加载窗口

// 展示加载窗口,这个窗口不会自动隐藏
wx.showLoading({
	title: "提示信息"
})

// 其他的某些操作,加载完数据之后,主动调用api接口隐藏
wx.hideLoading()
  • wx.showModal(Object object)

作用描述:展示一个交互模态框

// 展示模态框
wx.showModal({
    title: "清空历史记录",
    content: "确定要清空历史记录吗?",
    success(res) {
        console.log(res)
        if(res.confirm) {
            console.log("用户清空历史记录")
        } else {
            console.log("用户取消了操作")
        }
    }
})
  • wx.showActionSheet(Object object)

作用描述:展示一个行为交互对话框

// 展示行为交互对话框
wx.showActionSheet({
    itemList: ["拍照", "相册"],
    success(res) {
        console.log(res)
    }
})
(2)导航栏

导航栏除了可以在配置文件中进行静态配置,也可以通过API函数完成脚本修改(使用较多)

  • wx.setNavigationBarTitle(Object object)

作用描述:通过脚本设置页面标题,通话故事跳转到故事列表页面动态设置页面标题

// 设置页面标题
wx.setNavigationBarTitle({
    title: classify,
})
  • wx.showNavigationBarLoading()

作用描述:展示标题栏上的加载动画,一旦展示不会自动隐藏

  • wx.hideNavigationBarLoading()

作用描述:隐藏标题栏上的加载动画

(3)Tab Bar底部导航
  • wx.showTabBarRedDot(Object object)
  • wx.hideTabBarRedDot(Object object)

作用描述:tabbar的红点提示,一般提示导航页面存在更新数据

Page({
    onHide() {
        wx.showTabBarRedDot({
            index:0
        })
    },

    onShow() {
        wx.hideTabBarRedDot({
            index: 0
        })
    }
})
  • wx.setTabBarBadge(Object obj)
  • wx.removeTabBarBadge(Object obj)

作用描述:添加或者移除tab bar导航条上的徽章消息

// mine.js
onLoad() {
    wx.setTabBarBadge({
        index: 1,
        text: "10"
    })
},
    
// message.js
    onLoad(){
        wx.removeTabBarBadge({
            index: 1
        })
    }
  • wx.showTabBar()
  • wx.hideTabBar()

作用描述:用于显示/隐藏 tabbar底部导航

onLoad() {
    ......
    wx.hideTabBar()
    setTimeout(function() {
        wx.showTabBar({animation: true})
    }, 2000)
},
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值