路由方式

路由 / wx.switchTab
官方参考文档

wx.switchTab

实现底部导航栏

1.配置信息

app.json"tabBar": {"custom": true,"list": [{"pagePath": "pages/home/index","text": "首页"},{"pagePath": "pages/my/index","text": "我的"}]}

2.tabBar组件

实现一个公共组件custom-tab-bar,在代码根目录下添加入口文件:
index.js

Component({data: {value: 'home',list: [{value: 'home',label: '首页',icon: 'home'},{value: 'my',label: '我的',icon: 'user'},],},lifetimes: {ready() {const pages = getCurrentPages();const curPage = pages[pages.length - 1];if (curPage) {const nameRe = /pages\/(\w+)\/index/.exec(curPage.route);if (nameRe === null) return;if (nameRe[1] && nameRe) {this.setData({value: nameRe[1],});}}},},methods: {handleChange(e) {wx.switchTab({url: `/pages/${e.detail.value}/index`});}}
});

index.json

{"component": true,"styleIsolation": "apply-shared","usingComponents": {"t-tab-bar": "tdesign-miniprogram/tab-bar/tab-bar","t-tab-bar-item": "tdesign-miniprogram/tab-bar-item/tab-bar-item"}
}

index.wxml

<t-tab-bar value="{{ value }}" theme="tag" split="{{ false }}" bind:change="handleChange"><t-tab-bar-item icon="home" value="home">首页</t-tab-bar-item><t-tab-bar-item icon="user" value="my">我的</t-tab-bar-item>
</t-tab-bar>

wx.navigateTo

wx.navigateTo({url: '/pages/game/index?id=1',})

需要跳转的页面需要注册在app.json的pages数组里:

  "pages": ["pages/home/index","pages/my/index","pages/game/index"],

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

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

相关文章

[Java 基础]正则表达式

正则表达式是一种强大的文本模式匹配工具&#xff0c;它使用一种特殊的语法来描述要搜索或操作的字符串模式。在 Java 中&#xff0c;我们可以使用 java.util.regex包提供的类来处理正则表达式。 :::color3 正则表达式不止 Java 语言提供了相应的功能&#xff0c;很多其他语言…

ArcGIS安装出现1606错误解决办法

问题背景&#xff1a; 由于最近Arcgis10.2打是有些功能不正常退出&#xff0c;比如arctoolbox中的&#xff0c;table to excel 功能&#xff0c;只要一点击&#xff0c;arcgis就报错退出&#xff0c;平常在使用过程中&#xff0c;也经常出现一些莫名其妙的崩溃现象&#xff0c…

wpf 解决DataGridTemplateColumn中width绑定失效问题

感谢酪酪烤奶 提供的Solution 文章目录 感谢酪酪烤奶 提供的Solution使用示例示例代码分析各类交互流程 WPF DataGrid 列宽绑定机制分析整体架构数据流分析1. ViewModel到Slider的绑定2. ViewModel到DataGrid列的绑定a. 绑定代理(BindingProxy)b. 列宽绑定c. 数据流 关键机制详…

语音转文本ASR、文本转语音TTS

ASR Automatic Speech Recognition&#xff0c;语音转文本。 技术难点&#xff1a; 声学多样性 口音、方言、语速、背景噪声会影响识别准确性&#xff1b;多人对话场景&#xff08;如会议录音&#xff09;需要区分说话人并分离语音。 语言模型适配 专业术语或网络新词需要动…

通用embedding模型和通用reranker模型,观测调研

调研Qwen3-Embedding和Qwen3-Reranker 现在有一个的问答库&#xff0c;包括150个QA-pair&#xff0c;用10个query去同时检索问答库的300个questionanswer Embedding模型&#xff0c;query-question的匹配分数 普遍高于 query-answer的匹配分数。比如对于10个query&#xff0c…

基于YOLOv8+Deepface的人脸检测与识别系统

摘要 人脸检测与识别系统是一个集成了先进计算机视觉技术的应用&#xff0c;通过深度学习模型实现人脸检测、识别和管理功能。系统采用双模式架构&#xff1a; ​​注册模式​​&#xff1a;检测新人脸并添加到数据库​​删除模式​​&#xff1a;识别数据库中的人脸并移除匹…

Grdle版本与Android Gradle Plugin版本, Android Studio对应关系

Grdle版本与Android Gradle Plugin版本&#xff0c; Android Studio对应关系 各个 Android Gradle 插件版本所需的 Gradle 版本&#xff1a; https://developer.android.com/build/releases/gradle-plugin?hlzh-cn Maven上发布的Android Gradle Plugin&#xff08;AGP&#x…

用c语言实现简易c语言扫雷游戏

void test(void) {int input 0;do{menu();printf("请选择&#xff1a; >");scanf("%d", &input);switch (input){menu();case 1:printf("扫雷\n");game();break;case 2:printf("退出游戏\n");break;default:printf("输入…

系统辨识的研究生水平读书报告期末作业参考

这是一份关于系统辨识的研究生水平读书报告&#xff0c;内容系统完整、逻辑性强&#xff0c;并深入探讨了理论、方法与实际应用。报告字数超过6000字 从理论到实践&#xff1a;系统辨识的核心思想、方法论与前沿挑战 摘要 系统辨识作为连接理论模型与客观世界的桥梁&#xff…

开源、免费、美观的 Vue 后台管理系统模板

随着前端技术的不断发展&#xff0c;Vue.js 凭借其轻量、高效、易上手的特性&#xff0c;成为国内外开发者最喜爱的前端框架之一。在构建后台管理系统时&#xff0c;Vue 提供了以下优势&#xff1a; 响应式数据绑定&#xff1a;让页面和数据保持同步&#xff0c;开发效率高。 …

适合 Acrobat DC 文件类型解析

文件类型 (File Type)ProgID (Continuous)ProgID (Classic)主要用途.pdfAcroExch.Document.DCAcroExch.Document.20XX (版本特定)Adobe PDF文档格式&#xff0c;用于存储文档内容和格式.pdfxmlAcroExch.pdfxmlAcroExch.pdfxmlPDF与XML结合的格式&#xff0c;可能用于结构化数据…

C/C++数据结构之漫谈

概述 在当今的数字化时代&#xff0c;无论是刷短视频、社交聊天&#xff0c;还是使用导航软件、网络购物&#xff0c;背后都离不开计算机技术的支持。但你是否想过&#xff1a;为什么同样的功能&#xff0c;有的软件运行得飞快&#xff0c;有的却严重卡顿&#xff0c;半天没有响…

4步使用 vue3 路由

路由的基本使用步骤分为以下4步 第一步&#xff1a;定义路由组件&#xff1a;略 第二步&#xff1a;定义路由链接和路由视图&#xff1a; <template><div class"app-container"><h1>App根组件</h1><router-link to"/home">…

VScode使用npm启动项目以及npm install ,npm start报错问题处理

安装启动步骤 打开cmd 输入指令 npm -v 查看npm是否安装&#xff0c;需要先安装node.js node.js安装&#xff1a;node.js安装 安装包下载后&#xff0c;一直点击next &#xff0c;安装完成&#xff0c;打开cmd 输入 node -v 查看安装是否成功 使用VScode 打开项目&#xf…

《仿盒马》app开发技术分享-- 回收金提现记录查询(端云一体)

开发准备 上一节我们实现了回收金提现的功能&#xff0c;并且成功展示了当前账户的支出列表&#xff0c;但是我们的提现相关的记录并没有很好的给用户做出展示&#xff0c;用户只知道当前账户提现扣款&#xff0c;并不知道回收金的去向&#xff0c;这一节我们就要实现回收金记…

芯片的起点——从硅到晶圆制造

第1篇&#xff1a;芯片的起点——从硅到晶圆制造 在讨论汽车芯片如何“上车”之前&#xff0c;我们必须先回到源头&#xff0c;从一颗芯片是如何从沙子一步步炼成讲起。很多人知道芯片很复杂&#xff0c;却未必清楚它的每一层结构、每一道工艺有何意义。本系列文章将从硅的提纯…

vscode python debugger 如何调试老版本python

找到老版本资源&#xff1a; 找到老版本python debugger插件&#xff0c;现在官方github 都是24之后的release 了&#xff0c;调不了3.6 老项目 pdb&#xff1a; 太麻烦 debugpy vscode python debugger 的底层实现&#xff0c;我们可以指定老版本的debugger 来调试&#…

MVCC 怎么实现的

✅ 什么是 MVCC?它是怎么实现的?(适合基础不牢固者) 一、MVCC 是什么? MVCC 全称是:Multi-Version Concurrency Control,中文叫:多版本并发控制。 主要用于解决数据库的读写并发冲突问题,它的作用是让读操作无需加锁,也能读到符合事务隔离要求的数据版本。 你可以…

深度解析企业风控API技术实践:构建全方位企业风险画像系统

引言 在当前的商业环境中&#xff0c;企业风险评估已成为各类商业决策的重要依据。本文将从技术实践的角度&#xff0c;详细介绍企业风控API的集成应用&#xff0c;重点关注API的调用方式、数据结构以及风险维度的划分&#xff0c;帮助开发者快速构建企业风险画像系统。 关键…

Mac 系统 Node.js 安装与版本管理指南

Mac 系统 Node.js 安装与版本管理指南 一、环境检查 在终端执行以下命令验证当前环境&#xff1a; node -v # 查看 Node.js 版本&#xff08;未安装会提示命令不存在&#xff09; npm -v # 查看 npm 版本&#xff08;需 Node.js 安装完成后生效&#xff09;二、安装方法 …