tabbar添加购物车数字-小程序开发分享(六)

一个商城类的小程序,做完之后,客户增加需求,在下面的tabbar购物车上添加数字。

             

 我也 是一个入门不起久的新手,刚接手的时候觉得很复杂,应该要舍弃配置的tabbar。自己封装一个。后来在网上查了一下。发现原生是支持设置数字的。

 wx.setTabBarBadge({ //购物车不为空 ,给购物车的tabar右上角添加购物车数量标志
              index: 2,						//标志添加位置
              text: "" + res.data.cart_num+ ""				//通过编译,将购物车总数量放到这里
        })

index为tabbar的索引,text要字符串类型。注意:该api 仅在tabbar页 能调用。如商品详情页(非tabbar页)不能调用。

这里 请求后端数据,然后设置数字:

 //获取购物侧数量
    getandSetCartNum:function(){
      var that = this;
      wx.re
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序的 tabbar 是一个底部导航栏,常用于展示小程序的主要功能页面。以下是实现微信小程序 tabbar 的步骤: 1. 在 app.json 文件中添加 tabBar 字段,定义 tabbar 的样式和配置。例如: ``` "tabBar": { "color": "#999", "selectedColor": "#07c160", "backgroundColor": "#fff", "borderStyle": "black", "list": [ { "pagePath": "pages/index/index", "text": "首页", "iconPath": "images/tabbar/index.png", "selectedIconPath": "images/tabbar/index-active.png" }, { "pagePath": "pages/category/category", "text": "分类", "iconPath": "images/tabbar/category.png", "selectedIconPath": "images/tabbar/category-active.png" }, { "pagePath": "pages/cart/cart", "text": "购物车", "iconPath": "images/tabbar/cart.png", "selectedIconPath": "images/tabbar/cart-active.png" }, { "pagePath": "pages/user/user", "text": "我的", "iconPath": "images/tabbar/user.png", "selectedIconPath": "images/tabbar/user-active.png" } ] } ``` 以上代码定义了一个包含四个 tab 的 tabbar,每个 tab 对应一个页面,包括页面路径、页面标题、默认图标和选中图标等。 2. 在 app.js 文件中定义 tabBar 的切换事件,可以在页面之间切换时触发该事件。例如: ``` App({ onTabItemTap(item) { console.log(item.index) console.log(item.pagePath) console.log(item.text) } }) ``` 以上代码定义了一个 onTabItemTap 函数,用于在切换 tab 时输出当前的 tab 索引、页面路径和标题。 3. 在需要添加 tabbar 的页面中,可以使用小程序提供的组件来实现。例如: ``` <view class="container"> <view class="content"> <!-- 页面内容 --> </view> <tabbar></tabbar> </view> ``` 以上代码在页面底部添加了一个 tabbar,可以通过小程序提供的样式类来设置样式和布局。 4. 最后,需要将页面注册为 tabbar 页面,以便在切换 tab 时能够正确地触发 onTabItemTap 事件。例如: ``` Page({ onTabItemTap(item) { console.log(item.index) console.log(item.pagePath) console.log(item.text) }, onLoad: function () { wx.setNavigationBarTitle({ title: '页面标题' }) wx.setTabBarItem({ index: 0, text: '首页' }) } }) ``` 以上代码在页面注册时定义了 onTabItemTap 函数,并使用 wx.setTabBarItem 函数设置了当前 tab 的标题。要注意的是,只有在 app.json 中配置的页面才能被注册为 tabbar 页面。 以上是实现微信小程序 tabbar 的基本步骤,具体的样式和功能可以根据实际需求进行调整。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值