zoukankan      html  css  js  c++  java
  • uniapp原生tabbar设置并添加数字角标或小红点提示

    uniapp配置并设置原生tabbar,原生tabbar基本够用,没必要去用一些比较难配置的插件
    //原生tabbar设置
    在pages.json里面添加如下配置

    "tabBar": {
    "selectedColor": "#31869B",//点击之后的字体颜色
    "iconWidth": "18px",//字体大小
    "list": [{
    "current": 0,
    "pagePath": "pages/index/index",//页面地址url
    "text": "首页",
    "iconPath": "static/imgico/bar1.png",//tabbar图片
    "selectedIconPath": "static/imgico/bar11.png"//点击之后显示的图标
    },
    {
    "current": 1,
    "pagePath": "pages/xxx/xxx",
    "text": "客服",
    "iconPath": "static/imgico/bar2.png",
    "selectedIconPath": "static/imgico/bar22.png"
    },
    {
    "current": 2,
    "pagePath": "pages/xxx/xxx",
    "text": "主页",
    "iconPath": "static/imgico/bar3.png",
    "selectedIconPath": "static/imgico/bar33.png"
    },
    {
    "current": 3,
    "pagePath": "pages/xxx/xxx",
    "text": "购物车",
    "iconPath": "static/imgico/bar4.png",
    "selectedIconPath": "static/imgico/bar44.png"
    },
    {
    "current": 4,
    "pagePath": "pages/xxx/xxx",
    "text": "我的",
    "iconPath": "static/imgico/bar5.png",
    "selectedIconPath": "static/imgico/bar55.png"
    }
    ]
    },


    uni.setTabBarBadge({ //显示数字 index: 2,//tabbar下标 text: '1'//数字 }) uni.removeTabBarBadge({ //隐藏数字标 index:2 }) uni.showTabBarRedDot({ //显示红点 index: 2 }) uni.hideTabBarRedDot({ //隐藏红点 index:2 })
    添加至任何页面的js事件里即可,事件执行,则显示或移除
    详情可以看官网地址https://uniapp.dcloud.io/api/ui/tabbar?id=showtabbarreddot
  • 相关阅读:
    JAXB
    Servlet编码和解码
    FileUpload
    DataSource
    20200821 二分搜索
    火狐账户如何在Android手机端与电脑端同步
    20200807 贪心;排队接水;[AHOI2018初中组]分组;国王的游戏
    20200802 高精度问题 阶乘之和
    20200803 牛客多校赛
    20200207
  • 原文地址:https://www.cnblogs.com/h-w-b/p/15351788.html
Copyright © 2011-2022 走看看