uni-app 微信小程序之自定义圆形 tabbar

文章目录

  • 1. 自定义tabbar效果
  • 2. pages新建tabbar页面
  • 3. tabbar 页面结构
  • 4. tabbar 页面完整代码

1. 自定义tabbar效果

请添加图片描述

2. pages新建tabbar页面

  1. 首先在 pages.json 文件中,新建一个 tabbar 页面
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
	{
		"path": "pages/index/tabbar",
		"style": {
			"navigationBarTitleText": "tabbar页面",
			"navigationStyle": "custom"
		}
	},
	.....// 其他页面
],

3. tabbar 页面结构

  1. 此页面主要是写 tabbar的html样式和布局,引用主页面代码,通过 v-if 控制进行展示 indexsearchmaimnewsme 一级页面

在这里插入图片描述

4. tabbar 页面完整代码

  1. css 样式文件太多了就不贴出来了
<template>
	<view>
		<index  v-if="PageCur=='index'"></index>
		<search v-if="PageCur=='search'"></search>
		<news v-if="PageCur=='news'"></news>
		<me v-if="PageCur=='me'"></me>
		
		<view class="box">
			<view class="cu-bar tabbar bg-white shadow foot">
				<view class="action" @click="NavChange" data-cur="index">
					<view class='cuIcon-cu-image'>
						<image v-if="PageCur=='index'" src="../../static/tabBar/index_cur.png"></image>
						<image v-if="PageCur != 'index'" src="../../static/tabBar/index.png"></image>
					</view>
					<view :class="PageCur=='index'?'color_main':'text-gray'">首页</view>
				</view>

				<view class="action" @click="NavChange" data-cur="search">
					<view class='cuIcon-cu-image'>
						<view class="cu-tag badge"></view>
						<image v-if="PageCur=='search'" src="../../static/tabBar/shop_cur.png"></image>
						<image v-if="PageCur != 'search'" src="../../static/tabBar/shop.png"></image>
					</view>
					<view :class="PageCur=='search'?'color_main':'text-gray'">会员专区</view>
					
				</view>
<view @click="NavChange" class="action text-gray add-action" data-cur="main">
					<image class="logo_btn" mode="widthFix" src="../../static/logo.png"></image>
					<view :class="PageCur=='main'?'color_main':'text-gray'">组件模板</view>
				</view>

				<view class="action" @click="NavChange" data-cur="news">
					<view class='cuIcon-cu-image'>
						<view class="cu-tag badge">{{message}}</view>
						<image v-if="PageCur=='news'" src="../../static/tabBar/order_cur.png"></image>
						<image v-if="PageCur != 'news'" src="../../static/tabBar/order.png"></image>
					</view>
					<view :class="PageCur=='news'?'color_main':'text-gray'">文章资讯</view>
				</view>

				<view class="action" @click="NavChange" data-cur="me">
					<view class='cuIcon-cu-image'>
						<image v-if="PageCur=='me'" src="../../static/tabBar/me_cur.png"></image>
						<image v-if="PageCur != 'me'" src="../../static/tabBar/me.png"></image>
					</view>
					<view :class="PageCur=='me'?'color_main':'text-gray'">个人中心</view>
				</view>

			</view>
		</view>

	</view>
</template>

<script>
	import index from "./index.vue";	//首页
	import search from "./search.vue";	//会员专区
	import main from "./main.vue";	//组件模板
	import news from "./news.vue";	//文章咨询
	import me from "./me.vue";	//个人中心
	export default {
		components: {
			index,
			search,
			main,
			news,
			me
		},
		data() {
			return {
				PageCur: 'index',
				message: '99+',
				duration:1
			};
		},
		methods: {
			NavChange: function(e) {
				this.PageCur = e.currentTarget.dataset.cur;
			},
		}
	}
</script>

<style lang="scss">
	// 省略
</style>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

如何快速选出一支好股票?

俗话说得好&#xff1a;股票选得好&#xff0c;收益少不了&#xff01;不用多说&#xff0c;相信大伙儿都知道选一支好股票究竟有多重要。 但是选股可不像咱们去菜市场买菜一样&#xff0c;看着顺眼就成。选股&#xff0c;其实是一个专业性特别强的技术活儿。 目前最常用的选股…

vscode如何在没有网络的情况下安装插件

vscode如何在没有网络的情况下安装插件 start 遇到没有网络的电脑&#xff0c;无法直接从插件市场安装vscode的插件。写一下 vscode 插件离线安装的方法. 解决方案 目标电脑没有可以安装插件的网络&#xff0c;那我们只能在有网络的环境下载好我们的插件。然后拷贝软件到无…

SHAP(三):在解释预测模型以寻求因果见解时要小心

SHAP&#xff08;三&#xff09;&#xff1a;在解释预测模型以寻求因果见解时要小心 与 Microsoft 的 Eleanor Dillon、Jacob LaRiviere、Scott Lundberg、Jonathan Roth 和 Vasilis Syrgkanis 合作撰写的关于因果关系和可解释机器学习的文章。 当与 SHAP 等可解释性工具配合…

一个简单的参数帮助框架,c实现

文章目录 具体实现如下&#xff1a; #include <stdio.h> #include <stdlib.h> #include <string.h> void print_help(char *argv[]) { printf("Usage: %s [options]\n", argv[0]); printf("Options:\n"); printf(" -h, -…

鉴源实验室 | 汽车网络安全攻击实例解析(三)

作者 | 张璇 上海控安可信软件创新研究院工控网络安全组 来源 | 鉴源实验室 社群 | 添加微信号“TICPShanghai”加入“上海控安51fusa安全社区” 引言&#xff1a;随着现代汽车技术的迅速发展&#xff0c;车辆的进入和启动方式经历了显著的演变。传统的物理钥匙逐渐被无钥匙进…

Seaborn图形可视化基础_Python数据分析与可视化

Seaborn图形可视化基础 Seaborn可视化Seaborn与Matplotlib Seaborn可视化 即使matplotlib已经如此强大了&#xff0c;但是不得不承认它不支持的功能还有很多。 例如&#xff1a; 2.0之前的版本的默认配置样式绝对不是用户的最佳选择&#xff1b; matplotlib的API比较底层。虽…

第十节HarmonyOS 常用基础组件-Image

一、组件介绍 组件&#xff08;Component&#xff09;是界面搭建与显示的最小单位&#xff0c;HarmonyOS ArkUI声名式为开发者提供了丰富多样的UI组件&#xff0c;我们可以使用这些组件轻松的编写出更加丰富、漂亮的界面。 组件根据功能可以分为以下五大类&#xff1a;基础组件…

Selenium+Python自动化测试之验证码处理

两种方式&#xff1a; 验证码识别技术 (很难达到100%) 添加Cookie &#xff08;*****五星推荐&#xff09; 方式一&#xff1a;验证码识别技术 逻辑方式&#xff1a; 1&#xff1a;打开验证码所在页面&#xff0c;截图。获取验证码元素坐标&#xff0c;剪切出验证码图片&…

Pandas进阶:文本处理

引言 文本的主要两个类型是string和object。如果不特殊指定类型为string&#xff0c;文本类型一般为object。 文本的操作主要是通过访问器str 来实现的&#xff0c;功能十分强大&#xff0c;但使用前需要注意以下几点。 访问器只能对Series数据结构使用。 除了常规列变量df.c…

对el-select封装成组件使用

效果与直接使用el-select一样&#xff0c;多处用el-select显得代码冗余就进行了封装 效果图&#xff1a; el-select封装&#xff1a; <template><div class"my-select"><el-selectv-model"person.modelValue":placeholder"placehold…

H5 Canvas 打飞机青春版

没事儿写写练习一下&#xff0c;说不准哪天就用到今天所用到的知识点了呢。 在线链接 https://linyisonger.github.io/H5.Examples/?name./053.%E9%A3%9E%E6%9C%BA%E5%A4%A7%E6%88%98.html 功能清单 循环滚动背景 矩形碰撞 随机生成敌人 飞机左右移动 苹果屏蔽长按 移动端屏…

京东数据运营-京东数据开放平台-鲸参谋10月粮油调味市场品牌店铺销售数据分析

鲸参谋监测的京东平台10月份料油调味市场销售数据已出炉&#xff01; 根据鲸参谋数据显示&#xff0c;今年10月份&#xff0c;京东平台粮油调味市场的销量将近4600万&#xff0c;环比增长约10%&#xff0c;同比降低约20%&#xff1b;销售额将近19亿&#xff0c;环比增长约4%&am…

(C++)三数之和--双指针法

个人主页&#xff1a;Lei宝啊 愿所有美好如期而遇 算法原理 双指针法&#xff0c;不一定是说就要使用指针&#xff0c;只是一种形象的说法&#xff0c;在数组中&#xff0c;我们一般将数组下标当做指针。我们首先对数组进行排序&#xff0c;从左向右标定一个下标i&#xff0…

LED屏幕信息安全如何预防?

随着科技的不断进步&#xff0c;LED屏幕在我们生活和工作中扮演着越来越重要的角色&#xff0c;然而&#xff0c;随之而来的是信息安全面临的挑战。为了有效预防LED屏幕信息的泄露和被盗取&#xff0c;我们需要采取一系列的安全措施。以下是一些建议&#xff1a; 物理安全措施&…

中国毫米波雷达产业分析6——毫米波雷达行业发展展望

一、行业发展驱动力分析 &#xff08;一&#xff09;需求带动 当前&#xff0c;全球智能化变革浪潮正在汽车、交通、安防、工业、家居、健康监护等诸多产业蓬勃发展&#xff0c;创造了巨大的感知产品增量需求。 在汽车领域&#xff0c;毫米波雷达传感器作为一种非接触…

【无标题】mmocr在云服务器上

这里写目录标题 1、创建虚拟环境2、切换和退出conda虚拟环境3. 显示、复制&#xff08;克隆&#xff09;、删除虚拟环境4、删除环境安装指示中 cd进项目文件夹开始训练模型&#xff08;python XXX.py | tee record.txt 记录训练结果&#xff09;如何在Linux服务器上安装Anacond…

leetcode刷题详解—— 环形子数组的最大和

1. 题目链接&#xff1a;918. 环形子数组的最大和 2. 题目描述&#xff1a; 给定一个长度为 n 的环形整数数组 nums &#xff0c;返回 nums 的非空 子数组 的最大可能和 。 环形数组 意味着数组的末端将会与开头相连呈环状。形式上&#xff0c; nums[i] 的下一个元素是 nums[(…

SAP 如何检查已安装的SAP UI5 版本

第一个方法是直接从FLP中查看 但是部分高版本的FLP中没有这个about&#xff0c; 那么在当前界面可以使用&#xff1a;CTRL ALT SHIFT S 查看当前版本 根据此版本&#xff0c;去进行你的UI5的开发吧

NodeJS(二):npm包管理工具、yarn、npx、pnpm工具等

目录 (一)npm包管理工具 1.了解npm 2.npm的配置文件 常见的配置属性 scripts属性*** 依赖的版本管理 3.npm安装包的细节 4.package-lock文件 5.npm install原理** 6.npm的其他命令 (二) 其他包管理工具 1.yarn工具 基本指令 2.cnpm工具 3.npx工具 (1)执行本地…

C++可表示的数(数组前面2个数的和)

void 可表示的数&#xff08;数组前面2个数的和&#xff09;() {int aa[]{1,2,3,4,5,6,7,8,9}, j 0, z 1, jj z, n 9, ge 0;string a "";while (j < n)//缘由https://bbs.csdn.net/topics/396063706?page1#post-410898529{if (jj < n)if (aa[j] aa[z] …