Day16--加入购物车-动态设置tabBar的数组徽标

news2024/11/27 8:35:27

问题1:

①:刚开始

②:点击购物车的图标后,跳转到cart页面发现,并没有徽标在tabbar上:

 

提纲挈领:

我的操作:

1》把 Store 中的 total 映射到 cart.vue 中使用:

 

2》在页面刚显示出来的时候,立即调用 setBadge 方法,为 tabBar 设置数字徽标:

 3》在 methods 节点中,声明 setBadge 方法如下,通过 uni.setTabBarBadge() 为 tabBar 设置数字徽标:

解决问题1:

 

************************************************************************************************************** 

问题2:

 

提纲挈领:

 

 我的操作:

所以我们需要为四个tarBar都设置徽标才可以避免这个问题的出现,之前的哪些代码不仅仅在购物车里面需要写,在首页,分类,我的里面也需要编写才行。

1》在项目根目录中新建 mixins 文件夹,并在 mixins 文件夹之下新建 tabbar-badge.js 文件,用来把设置 tabBar 徽标的代码封装为一个 mixin 文件:

2》修改 home.vuecate.vuecart.vuemy.vue 这 4 个 tabBar 页面的源代码,分别导入 @/mixins/tabbar-badge.js 模块并进行使用: 

1>在cart购物车页面中:

2>在home首页中:

 

3>在cate分类中:

 

4>在my我的页面中:

 

 

最终效果图:

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/51705.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Java ArrayLIst与顺序表

什么是集合类? Java当中的集合类,其实就是封装号的数据结构 原始的数据结构——>Java当中封装成的集合对应的那个原始的数据结构——>用Java封装的集合对应的。 集合类所在的包:java.util这个包底下 顺序表的底层是一个数组&#xff0…

Flutter状态管理

前言 状态管理是什么?简单的来说,就是当某个状态发生变化的时候,告知该状态的监听者,让状态所监听的属性随之而改变,达到UI层随着数据层变化而变化的效果。在Flutter中的状态(State)是一个组件的UI数据模型&#xff0…

【MySQL 读写分离】Sharding JDBC + Spring boot 实现数据库读写分离的登录 Demo

上篇文章我们搭建了 MySQL 数据库主从复制集群 MySQL 搭建主从复制集群~~~ 本篇文章我们利用搭建好的主从复制集群,使用 SpringBoot 结合 Sharding-JDBC 搭建一个小的 登录 Demo,测试实现数据库的读写分离 项目源码地址: https://gitee.com/l…

13 【操作mysql数据库】

13 【操作mysql数据库】 1.mysql 介绍 付费的商用数据库: Oracle,典型的高富帅;SQL Server,微软自家产品,Windows定制专款;DB2,IBM的产品,听起来挺高端;Sybase&#x…

android WebRtc 视频通话(P2P)

概述 WebRTC名称源自网页实时通信(Web Real-Time Communication)的缩写,是一个支持网页浏览器进行实时语音对话或视频对话的技术,是谷歌2010年以6820万美元收购Global IP Solutions公司而获得的一项技术。Google于2011年6月3日开源的即时通讯项目&#x…

centos7中mysql5.7.32服务离线升级到5.7.39教程

目录 一、导入新的离线安装包 二、备份原有mysql数据库 1、停止tomcat服务 2、查看mysql服务 3、备份数据库 三、停止mysql服务并打包备份旧版本 1、停止mysql 2、打包旧的mysql文件夹 3、删除旧的mysql文件夹 4、删除/etc/init.d/下跟mysql有关的全部文件&#xff0…

MongoDB数据迁移之迁移工具Kettle

MongoDB数据迁移之迁移工具Kettle ETL:简介 ETL(Extract-Transform-Load的缩写,即数据抽取、转换、装载的过程),对于企业或行业应用来说,我们经常会遇到各种数据的处理,转换,迁移,所…

Java+JSP+MySQL基于SSM的医院挂号就诊系统-计算机毕业设计

项目介绍 随着计算机科技的快速发展,很多地方都实现了自动化管理,医院也不例外。在大多数医院,无论是挂号处,还是取药的窗口,都会看到有很长的队伍,很显然这样会让患者就医的过程中浪费太多的时间。其次&a…

【读论文】GANMcC

GANMcC简单介绍网络结构生成器辨别器损失函数生成器损失函数辨别器tips总结参考论文:https://ieeexplore.ieee.org/document/9274337 如有侵权请联系博主 这几天又读了一篇关于GAN实现红外融合的论文,不出意外,还是FusionGAN作者团队的人写…

Python语音合成小工具(PyQt5 + pyttsx3)

TTS简介 TTS(Text To Speech)是一种语音合成技术,可以让机器将输入文本以语音的方式播放出来,实现机器说话的效果。 TTS分成语音处理及语音合成,先由机器识别输入的文字,再根据语音库进行语音合成。现在有…

JavaScript -- 三种循环语句的介绍及示例代码

文章目录循环语句1 While循环2 do-while循环3 for循环4 嵌套循环循环语句 通过循环语句可以使指定的代码反复执行 JS中一共有三种循环语句 while语句do-while语句for语句 通常编写一个循环,要有三个要件 初始化表达式(初始化变量)条件表…

风云气象卫星系列介绍

风云气象卫星系列是中国于1977年开始研制的气象卫星系列,目前发射了风云一号、风云二号、风云三号、风云四号等卫星。 风云一号 FY-1卫星分为两个批次,各两颗星。01批的FY-1A星于1988年7月9日发射,FY-1B星于1990年9月3日发射。02批卫星在01批…

Word处理控件Aspose.Words功能演示:在 Java 中将 Word 文档转换为 EPUB

大多数智能设备,如智能手机、平板电脑、笔记本电脑等,都支持EPUB格式来查看或阅读文档。它是电子书或电子出版物的常用格式。另一方面,MS Word 格式,如DOCX、DOC等,是数字世界中广泛使用的文档格式之一。在本文中&…

Web3中文|NFT无法保障数字所有权?

来源 | nftnow 编译 | DaliiNFTnews.com 2021年,有这样一个头条新闻:一家投资公司以大约400万美元的价格在The Sandbox上买下了2000英亩的虚拟地产。 通过在以太坊区块链上购买792个NFT,该公司得到了元宇宙平台上的1200个城市街区。 但是…

家用宽带如何叠加多条宽带,提高局域网速度

前言 关于多条宽带如何合并,使局域网内带宽更快?通常我们在企业网络或实际项目中,随着用户的增加,一条或者几条带宽不能满足正常使用,便可以对带宽进行叠加,便于网络带度更快; 一、为什么要用…

web基础阶段的小兔鲜儿项目学习

小兔鲜儿1. 所用素材2. 项目文件介绍3. index页面的基本骨架4. 思路:先写外面大盒子和版心,由外往内写5. 源码:1. 所用素材 素材链接,点我跳转:https://download.csdn.net/download/angrynouse/87228151 2. 项目文件…

全国产!全志T3+Logos FPGA核心板(4核ARM Cortex-A7)规格书

核心板简介 创龙科技SOM-TLT3F是一款基于全志科技T3四核ARM Cortex-A7处理器 + 紫光同创Logos PGL25G/PGL50G FPGA设计的异构多核全国产工业核心板,ARM Cortex-A7处理单元主频高达1.2GHz。核心板CPU、FPGA、ROM、RAM、电源、晶振、连接器等所有器件均采用国产工业级方案,国产…

【HDU No. 4902】 数据结构难题 Nice boat

【HDU No. 4902】 数据结构难题 Nice boat 杭电OJ 题目地址 【题意】 有n 个数字a 1 , a 2 , …, an ,每次都可以将[l , r ]区间的每个数字都更改为数字x (类型1),或将[l ,r ]区间每个大于x 的ai 都更改为最大公约数gcd(ai , x …

云服务连续三年增长150%,网宿科技开拓新赛道

摘要:开拓云服务市场,网宿科技的打法。 提到网宿科技,很多人还停留在传统IT服务商的印象中。其实,网宿科技已经在一条新赛道加速前行,这就是云服务。 “借助亚马逊云科技的持续赋能,网宿科技积累了丰富的云…

swiper轮播图片+视频播放,预览及页面跳转功能

1.效果 2.上代码 <template> <swiper :circulartrue indicator-dots"true" change"changeSwiper" :autoplay"true" interval5000 classswiper-view><swiper-item class"swiper-img" v-for"(item,index) in swipe…