当前位置: 首页 > news >正文

uniapp+uview2.0+vuex实现自定义tabbar组件

效果图
在这里插入图片描述

1.在components文件夹中新建MyTabbar组件
在这里插入图片描述
2.组件代码

<template><view class="myTabbarBox" :style="{ backgroundColor: backgroundColor }"><u-tabbar :placeholder="true" zIndex="0" :value="MyTabbarState" @change="tabbarChange" :fixed="false":activeColor="tabbarSet.activeColor" :inactiveColor="tabbarSet.inactiveColor" :safeAreaInsetBottom="true"><u-tabbar-item v-for="(item,index) in tabbarSet.list" :text="item.title"><image class="u-page__item__slot-icon" slot="active-icon" :src="item.image[1]"></image><image class="u-page__item__slot-icon" slot="inactive-icon" :src="item.image[0]"></image></u-tabbar-item></u-tabbar></view>
</template><script>export default {data() {return {backgroundColor: "#fff",// MyTabbarState: this.$store.getters.MyTabbarState,tabbarSet: this.$store.state.tabbarSet,//这里用到了vuex存储数据};},computed: {MyTabbarState() {return this.$store.getters.MyTabbarState;},},// watch: {// 	MyTabbarState: {// 		handler(newVal, oldVal) {// 			// console.log('更新', newVal, oldVal)// 		},// 		deep: true, // 深度监听// 		immediate: true, //立即执行// 	}// },methods: {//选项切换时tabbarChange(e) {console.log('change1', e, this.tabbarSet, this.MyTabbarState);this.MyTabbarState = e;this.$store.dispatch('getMyTabbarState', e)uni.navigateTo({url: this.tabbarSet.list[e].url})}},}
</script><style lang="scss">.u-page__item__slot-icon {width: 41rpx;height: 44rpx;}.myTabbarBox {position: fixed;bottom: 0;left: 0;z-index: 999999999;width: 100%;padding: 30rpx 0;}::v-deep.u-tabbar__content {background-color: transparent;}
</style>

3.父组件

<template><view><!-- 底部tabbar --><MyTabbar></MyTabbar></view></template><script>export default {data() {return {}},mounted() {let MyTabbarState = 0;let tabbarSet = {backgroundColor: "#fff", //背景颜色activeColor: "#000", //点击后的字体颜色inactiveColor: "#D0D0D0", //默认字体颜色list: [{title: "首页",image: ["../../static/previousHome.png", "../../static/backHome.png"],url: "/pages/index/index"},{title: "我的",image: ["../../static/previousUser.png", "../../static/backUser.png"],url: "/pages/order/order"}]};this.$store.dispatch('getTabbarSet', tabbarSet);this.$store.dispatch('getMyTabbarState', MyTabbarState);},onShow() {//改变底部导航栏状态this.$store.commit('get_MyTabbarState', 0);}}

4.创建store目录,下面创建index.js文件

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const debug = process.env.NODE_ENV !== 'production'const loginKey = 'login_status'const vuexStore = new Vuex.Store({state: {isBtnShow:false,//按钮节流MyTabbarState:1,//操作栏选中状态tabbarSet:{},	// 操作栏数据},mutations: {// 操作栏数据get_tabbarSet(state, goName){console.log('MUTATION',goName)state.tabbarSet = goName;cookie.set('tabbarSet', goName)},//操作栏选中状态get_MyTabbarState(state, goName){console.log('改变状态',goName)state.MyTabbarState = goName;cookie.set('MyTabbarState', goName)}},actions: {//操作栏选中状态getMyTabbarState({ state, commit }, force) {commit('get_MyTabbarState',force)},// 操作栏数据getTabbarSet({ state, commit }, force) {commit('get_tabbarSet',force)},changeIsBtnshow({ state, commit }, index) {commit('updateIsBtnShow', index)},},getters: {MyTabbarState:state=>state.MyTabbarState,tabbarSet:state => state.tabbarSet,isBtnShow:state => state.isBtnShow},strict: debug,
})export default vuexStore

相关文章:

uniapp+uview2.0+vuex实现自定义tabbar组件

效果图 1.在components文件夹中新建MyTabbar组件 2.组件代码 <template><view class"myTabbarBox" :style"{ backgroundColor: backgroundColor }"><u-tabbar :placeholder"true" zIndex"0" :value"MyTabbarS…...

opencv 任意两点切割图像

目录 opencv python直线切割图像,把图像分为两个多边形 升级版,把多边形分割抠图出来,取最小外接矩形:...

rust变量绑定、拷贝、转移、引用

目录 一&#xff0c;clone、copy 1&#xff0c;基本类型 2&#xff0c;类型的clone特征 3&#xff0c;显式声明结构体的clone特征 4&#xff0c;类型的copy特征 5&#xff0c;显式声明结构体的clone特征 5&#xff0c;变量和字面量的特征 6&#xff0c;特征总结 二&am…...

Java多种方式向图片添加自定义水印、图片转换及webp图片压缩

给个创建水印的示例&#xff1a; /*** 获取水印** param watermarkText 水印文字* return 水印bufferimage*/public static BufferedImage getWatermark(String watermarkText) {BufferedImage measureBufferdImage new BufferedImage(100, 100, BufferedImage.TYPE_INT_ARGB…...

基于Pytorch框架的LSTM算法(二)——多维度单步预测

1.项目说明 **选用Close和Low两个特征&#xff0c;使用窗口time_steps窗口的2个特征&#xff0c;然后预测Close这一个特征数据未来一天的数据 当batch_firstTrue,则LSTM的inputs(batch_size,time_steps,input_size) batch_size len(data)-time_steps time_steps 滑动窗口&…...

cnn感受野计算方法

No. Layers Kernel Size Stride 1 Conv1 33 1 2 Pool1 22 2 3 Conv2 33 1 4 Pool2 22 2 5 Conv3 33 1 6 Conv4 33 1 7 Pool3 2*2 2 感受野初始值 l 0 1 l_0 1l 0 ​ 1&#xff0c;每层的感受野计算过程如下&#xff1a; l 0 1 l_0 1l 0 ​ 1 l 1 1 ( 3 − 1 ) 3 l_1 1…...

百分点科技受邀参加“第五届治理现代化论坛”

11月4日&#xff0c;由北京大学政府管理学院主办的“面向新时代的人才培养——第五届治理现代化论坛”举行&#xff0c;北京大学校党委常委、副校长、教务长王博&#xff0c;政府管理学院院长燕继荣参加开幕式并致辞&#xff0c;百分点科技董事长兼CEO苏萌受邀出席论坛&#xf…...

基于Springboot的智慧食堂设计与实现(有报告)。Javaee项目,springboot项目。

演示视频&#xff1a; 基于Springboot的智慧食堂设计与实现&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot项目。 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站。 项…...

「Verilog学习笔记」多功能数据处理器

专栏前言 本专栏的内容主要是记录本人学习Verilog过程中的一些知识点&#xff0c;刷题网站用的是牛客网 分析 注意题目要求输入信号为有符号数&#xff0c;另外输出信号可能是输入信号的和&#xff0c;所以需要拓展一位&#xff0c;防止溢出。 timescale 1ns/1ns module data_…...

OpenHarmony 4.0 Release 编译异常处理

一、环境配置 编译环境&#xff1a;Ubuntu 20.04 OpenHarmony 软件版本&#xff1a;4.0 Release 设备平台&#xff1a;rk3568 二、下拉代码 参考官网步骤&#xff1a; OpenHarmony 4.0 Release 源码获取 repo init -u https://gitee.com/openharmony/manifest -b OpenHarmo…...

软件测试|MySQL LIKE:深入了解模糊查询

简介 在数据库查询中&#xff0c;模糊查询是一种强大的技术&#xff0c;可以用来搜索与指定模式匹配的数据。MySQL数据库提供了一个灵活而强大的LIKE操作符&#xff0c;使得模糊查询变得简单和高效。本文将详细介绍MySQL中的LIKE操作符以及它的用法&#xff0c;并通过示例演示…...

linux防火墙设置

#查看firewall的状态 firewall-cmd --state (systemctl status firewalld.service) #安装 yum install firewalld #启动, systemctl start firewalld (systemctl start firewalld.service) #设置开机启动 systemctl enable firewalld #关闭 systemctl stop firewalld #取消…...

http 403

一、什么是HTTP ERROR 403 403 Forbidden 是HTTP协议中的一个状态码(Status Code)。可以简单的理解为没有权限访问此站&#xff0c;服务器受到请求但拒绝提供服务。 二、HTTP 403 状态码解释大全 403.1 -执行访问禁止。 403.2 -读访问禁止。 403.3 -写访问禁止。 403.4要…...

RAW图像处理软件Capture One 23 Enterprise mac中文版功能特点

Capture One 23 Enterprise mac是一款专业的图像处理软件&#xff0c;旨在为企业用户提供高效、快速和灵活的工作流程。 Capture One 23 Enterprise mac软件的特点和功能 强大的图像编辑工具&#xff1a;Capture One 23 Enterprise提供了一系列强大的图像编辑工具&#xff0c;…...

Linux 进程终止和等待

目录 一&#xff1a;进程常见的退出方法 1. main 函数返回值 2.调用 exit 3.调用 _exit 二&#xff1a;异常问题 三&#xff1a;进程等待 1.概念 2.进程等待的必要性 3.进程等待的方法 <1>&#xff1a;wait --- 系统调用 <2>&#xff1a;waitpid 进程…...

python用tkinter随机数猜数字大小

python用tkinter随机数猜数字大小 没事做&#xff0c;看到好多人用scratch做的猜大小的示例&#xff0c;也用python的tkinter搞一个猜大小的代码玩玩。 猜数字代码 from tkinter import * from random import randint# 定义确定按钮的点击事件 def hit(x,y):global s_Labprint(…...

程序员们保住自己饭碗

在现代社会中&#xff0c;程序员扮演着至关重要的角色。他们不仅仅是编写代码的人&#xff0c;更是保障数字世界安全稳定的守护者。随着科技的迅猛发展&#xff0c;程序员保住自己饭碗的护城河变得愈发重要。本文将探讨程序员如何通过不断学习、技术创新和软实力的发展&#xf…...

顶板事故防治vr实景交互体验提高操作人员安全防护技能水平

建筑业在我国各行业中属危险性较大且事故多发的行业&#xff0c;在建筑业“八大伤害”(高处坠落、坍塌、物体打击、触电、起重伤害、机械伤害、火灾爆炸及其他伤害)事故中&#xff0c;高处坠落事故的发生率最高、危险性极大。工地现场培训vr坠落体验利用虚拟现实技术还原各种情…...

为什么推荐从Linux开始了解IT技术

IT是什么&#xff0c;是干什么的呢&#xff1f; 说起物联网&#xff0c;云计算&#xff0c;大数据&#xff0c;或许大家听过。但是&#xff0c;你知道&#xff0c;像云计算的底层基座是什么呢&#xff1f;就是我们现在说的Linux操作系统。而云计算就是跑在Linux操作系统上的一个…...

【Mysql】增删改查(基础版)

我使用的工具是Data Grip &#xff08;SQLyog Naivact 都行&#xff09; 使用Data Grip创建student表&#xff0c;具体步骤如下&#xff08;熟悉Data Grip或者使用SQLyog&#xff0c;Naivact可以跳过&#xff09; https://blog.csdn.net/m0_67930426/article/details/13429…...

设计模式和设计原则回顾

设计模式和设计原则回顾 23种设计模式是设计原则的完美体现,设计原则设计原则是设计模式的理论基石, 设计模式 在经典的设计模式分类中(如《设计模式:可复用面向对象软件的基础》一书中),总共有23种设计模式,分为三大类: 一、创建型模式(5种) 1. 单例模式(Sing…...

TDengine 快速体验(Docker 镜像方式)

简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能&#xff0c;本节首先介绍如何通过 Docker 快速体验 TDengine&#xff0c;然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker&#xff0c;请使用 安装包的方式快…...

DeepSeek 赋能智慧能源:微电网优化调度的智能革新路径

目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

简易版抽奖活动的设计技术方案

1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑,确保抽奖活动能够公平、公正、公开地进行,同时满足高并发访问、数据安全存储与高效处理等需求,为用户提供流畅的抽奖体验,助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...

【HarmonyOS 5.0】DevEco Testing:鸿蒙应用质量保障的终极武器

——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的​​一体化测试平台​​&#xff0c;覆盖应用全生命周期测试需求&#xff0c;主要提供五大核心能力&#xff1a; ​​测试类型​​​​检测目标​​​​关键指标​​功能体验基…...

JDK 17 新特性

#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持&#xff0c;不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的&#xff…...

C++八股 —— 单例模式

文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全&#xff08;Thread Safety&#xff09; 线程安全是指在多线程环境下&#xff0c;某个函数、类或代码片段能够被多个线程同时调用时&#xff0c;仍能保证数据的一致性和逻辑的正确性&#xf…...

力扣-35.搜索插入位置

题目描述 给定一个排序数组和一个目标值&#xff0c;在数组中找到目标值&#xff0c;并返回其索引。如果目标值不存在于数组中&#xff0c;返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...

【分享】推荐一些办公小工具

1、PDF 在线转换 https://smallpdf.com/cn/pdf-tools 推荐理由&#xff1a;大部分的转换软件需要收费&#xff0c;要么功能不齐全&#xff0c;而开会员又用不了几次浪费钱&#xff0c;借用别人的又不安全。 这个网站它不需要登录或下载安装。而且提供的免费功能就能满足日常…...

比较数据迁移后MySQL数据库和OceanBase数据仓库中的表

设计一个MySQL数据库和OceanBase数据仓库的表数据比较的详细程序流程,两张表是相同的结构,都有整型主键id字段,需要每次从数据库分批取得2000条数据,用于比较,比较操作的同时可以再取2000条数据,等上一次比较完成之后,开始比较,直到比较完所有的数据。比较操作需要比较…...