微信小程序,商城底部工具栏的实现

news/2024/4/23 13:19:27/文章来源:https://blog.csdn.net/weixin_63236032/article/details/131972839

效果演示:

 

前提条件:

去阿里云矢量图标,下载8个图标,四个黑,四个红,如图:

新建文件夹icons,把图标放到该文件夹,然后把该文件夹移动到该项目的文件夹里面。如图所示

 

 

app.json

{
"pages": ["pages/home/home","pages/category/category","pages/cart/cart","pages/my/my"],"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#09bb07","navigationBarTitleText": "我的商场","navigationBarTextStyle": "white"},
"tabBar": {"color": "#999","selectedColor": "##09bb07","backgroundColor": "#fafafa","list": [{"pagePath": "pages/home/home","text": "首页","iconPath": "icons/_home.png","selectedIconPath": "icons/home.png"},{"pagePath": "pages/category/category","text": "分类","iconPath": "icons/_category.png","selectedIconPath": "icons/category.png"},{"pagePath": "pages/cart/cart","text": "购物车","iconPath": "icons/_cart.png","selectedIconPath": "icons/cart.png"},{"pagePath": "pages/my/my","text": "我的","iconPath": "icons/_my.png","selectedIconPath": "icons/my.png"}]},"lazyCodeLoading": "requiredComponents","sitemapLocation": "sitemap.json"
}

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

如若内容造成侵权/违法违规/事实不符,请联系编程新知网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

嵌入式开发:单片机嵌入式Linux学习路径

SOC(System on a Chip)的本质区别在于架构和功能。低端SOC如基于Cortex-M架构的芯片,如STM32和NXP LPC1xxx系列,不具备MMU(Memory Management Unit),适用于轻量级实时操作系统如uCOS和FreeRTOS。…

细讲TCP三次握手四次挥手(三)

TCP/IP 协议族 在互联网使用的各种协议中最重要和最著名的就是 TCP/IP 两个协议。现在人们经常提到的 TCP/IP 并不一定是单指 TCP 和 IP 这两个具体的协议,而往往是表示互联网所使用的整个 TCP/IP 协议族。 互联网协议套件(英语:Internet Pr…

《吐血整理》进阶系列教程-拿捏Fiddler抓包教程(17)-Fiddler如何充当第三者再识AutoResponder标签-下

1.简介 上一篇宏哥主要讲解的一些在电脑端的操作和应用,今天宏哥讲解和分享一下,在移动端的操作和应用。其实移动端和PC端都是一样的操作,按照宏哥前边抓取移动端包设置好,就可以开始实战了。 2.界面功能解析 根据下图图标注位…

基于vue+uniapp微信小程序公司企业后勤服务(设备)系统

本系统分为用户和管理员两个角色,其中用户可以注册登陆系统,查看公司公告,查看设备,设备入库,查看通讯录,会议室预约,申请出入,申请请假等功能。管理员可以对员工信息,会…

JS正则表达式:常用正则手册/RegExp/正则积累

一、正则基础语法 JavaScript 正则表达式 | 菜鸟教程 JS正则表达式语法大全(非常详细) 二、使用场景 2.1、校验中国大陆手机号的正则表达式 正则 /^1[3456789]\d{9}$/解释 序号正则解释1^1以数字 1 开头2[3456789]第二位可以是 3、4、5、6、7、8、…

Unity 四元素

//-------------旋转------------ // //设置角度 (超过90或负数时,会设置-1结果是359这样的问题,可以使用下面旋转的方式) transform.rotate new Quaternion(0,0,0,0);//Quaternion四元数 transform.localEulerAngles new Vector3(0,0,0);//EulerA…

Windows环境下安装及部署Nginx

一、安装Nginx教程 1、官网下载地址:https://nginx.org/en/download.html 2、下载教程:选择Stable version版本下载到本地 3、下载完成后,解压放入本地非中文的文件夹中: 4、启动nginx:双击nginx.exe,若双击…

【计算机网络】408统考2014年题36

题目描述 【2014年题36】主机甲与主机乙之间使用后退N帧(GBN)协议传输数据,甲的发送窗口尺寸为1000,数据帧长为1000字节,信道带宽为100Mbps,乙每收到一个数据帧就立即利用一个短帧(忽略其传输延迟)进行确认…

TCP网络通信编程之字节流

目录 【TCP字节流编程】 // 网络编程中,一定是server端先运行 【案例1】 【思路分析】 【客户端代码】 【服务端代码】 【结果展示】 【案例2】 【题目描述】 【注意事项】 【服务端代码】 【客户端代码】 【代码结果】 【TCP字节流编程】 // 网络编程中&a…

iTOP-RK3568开发板Docker 安装 Ubuntu 18.04

Docker 下载安装 Ubuntu18.04,输入以下命令: sudo apt update docker pull ubuntu:18.04 切换 Shell 到 Ubuntu 18.04,输入以下命令: docker container run -p 8000:3000 -it ubuntu:18.04 /bin/bash -p 参数:容器的…

在CSDN学Golang云原生(Kubernetes声明式资源管理Kustomize)

一,生成资源 在 Kubernetes 中,我们可以通过 YAML 或 JSON 文件来定义和创建各种资源对象,例如 Pod、Service、Deployment 等。下面是一个简单的 YAML 文件示例,用于创建一个 Nginx Pod: apiVersion: v1 kind: Pod m…

C++STL库中的list

文章目录 list的介绍及使用 list的常用接口 list的模拟实现 list与vector的对比 一、list的介绍及使用 1. list是可以在常数范围内在任意位置进行插入和删除的序列式容器,并且该容器可以前后双向迭代。 2. list的底层是双向带头循环链表结构,双向带头循…

ansible-playbook

playbook的组成 playbooks 本身由以下各部分组成 (1)Tasks:任务,即通过 task 调用 ansible 的模板将多个操作组织在一个 playbook 中运行 (2)Variables:变量 (3)Templat…

mac下安装vue cli脚手架并搭建一个简易项目

目录 1、确定本电脑下node和npm版本是否为项目所需版本。 2、下载vue脚手架 3、创建项目 1、下载node。 如果有node,打开终端,输入node -v和npm -v , 确保node和npm的版本,(这里可以根据自己的需求去选择,如果对最新版本的内容有…

uni-app在小米手机上运行【步骤细节】

注意细节重点: 1.手机使用数据线与电脑连接,手机连接模式必须是传输文件模式 2.手机必须打开开发者模式 3.打开开发者模式后,仔细浏览并调整USB调试权限,重点打开USB是否允许安装按钮!!! 操作步…

十分钟配置好Neovim go开发环境(其他语言一样)

文章目录 前言仓库地址用法快捷键问题反馈 前言 这篇文章的目的是为了分享下我自己的Neovim配置。 本人是Golang程序员,最开始使用的IDE是JetBrains Goland。有一说一这个ide适配度很高,认识的很多人都使用这个。但是它也有几个对我来说的缺点&#xf…

【腾讯云 Cloud Studio 实战训练营】CloudStudio体验真正的现代化开发方式,双手插兜不知道什么叫对手!

CloudStudio体验真正的现代化开发方式,双手插兜不知道什么叫对手! 文章目录 CloudStudio体验真正的现代化开发方式,双手插兜不知道什么叫对手!前言出现的背景一、CloudStudio 是什么?二、CloudStudio 的特点三、CloudS…

【LeetCode】下降路径最小和

下降路径最小和 题目描述算法分析编程代码 链接: 下降路径最小和 题目描述 算法分析 编程代码 class Solution { public:int minFallingPathSum(vector<vector<int>>& matrix) {int n matrix.size();vector<vector<int>> dp(n1,vector(n2,INT_M…

python_PyQt5开发验证K线视觉想法工具V1.1 _增加标记类型_线段

目录 运行情况&#xff1a; 代码&#xff1a; 承接 【python_PyQt5开发验证K线视觉想法工具V1.0】 博文 https://blog.csdn.net/m0_37967652/article/details/131966298 运行情况&#xff1a; 添加线段数据在K线图中用线段绘制出来 代码&#xff1a; 1 线段标记的数据格式…

Django模型将模型注释同步到数据库

1、安装django-comment-migrate库 pip install django-comment-migrate 2、将库注册到settings.py文件中 INSTALLED_APPS [...django_comment_migrate, # 表注释... ] 3、加注释 3.1、给模型&#xff08;表&#xff09;加注释 在模型的class Meta中编辑 verbose_name&…