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

如何从tabbar页面传数据

无论是百度小程序还是微信小程序,app.json中规定的tabbar页面是不支持传参的,例如:

<navigator url='../service/service?typeid=6' openType="switchTab"> 
服务项目 
</navigator> 

上面的navigater跳转有个属性:openType="switchTab"意思是打开tabbar页面service,虽然有个参数typeid=6,但是typeid=6并不能呗tabbar页面接收,造成打开tabbar页面的时候用于都是默认栏目。

(1)第一步:通过bindtap绑定方法触发缓存,把typeid存起来
虽然tabbar不支持传参,但是我们可以通过缓存的方式获取传递的参数,那么上面的navigator直接跳转的方式就不行了,需要封装一个方法:

<view class='service_li' bindtap='show_service' data-typeid='11' data-listtype='3'> 
服务项目 
</view> 

index页面的“服务项目”通过bindtap绑定一个show_service方法,这个show_service会传递后边的data-*里边的所有参数。
在index.js中写上show_service方法:

show_service: function (e) { var data = e.currentTarget.dataset; var title = data.title; //获取传递的titlevar typeid = data.typeid; //获取传递的typeidvar listtype = data.listtype; //获取传递的listtype//通过setStorageSync方法将typed存入stypeid中,名字可以自己任意定wx.setStorageSync('stypeid', typeid) wx.switchTab({ //通过switchTab方法跳转到对应页面url: '/pages/service/service?typeid=' + typeid + "&title=" + title + "&listtype=" + listtype, //后边参数其实无效可以直接写成:‘/pages/service/service’}) }, 

这样我们就把用户点击首页所传递的参数typeid存到缓存里边了

(2)第二步:在service中去获取typeid
在service.js中的onload或者onshow中加入typeid的方法,为了兼容用户是直接通过tabbar进入的情况,需要一个默认的typeid,参考代码:

var stypeid = wx.getStorageSync('stypeid');//通过缓存获取typeid 
var typeid = stypeid ? stypeid : that.data.typeid; //如果stypeid存在读取,否则读取默认的typeid

然后我们可以直接通过getList()方法直接读取api获取内容列表了

that.getList(typeid); 

说明:
(1)
如果你不是通过首页的show_service方法进入service页面的,那么就不会触发更新缓存,所以typeid的值是不会变的,通过点击tabbar进入service页面会永远显示某一个页面,你可以在onHide方法中增加一个重置或者情况stypied的方法,不过不建议这么弄

(2)service页面的切换栏目后,我们可以在switch_tab方法中加入修改缓存的方法,动态存入当前栏目的typeid

switch_cat: function (e) { var that = this; var CATEGORYS = wx.getStorageSync('categorys')//调用栏目缓存 var data = e.currentTarget.dataset; var typeid = data.typeid; var listtype = data.listtype; var curtypeid = data.typeid; that.setData({ curtypeid: curtypeid, listtype: listtype, page: 1 }) wx.setNavigationBarTitle({ title: CATEGORYS[curtypeid]['typename'] + '-' + wx.getStorageSync('system').seotitle }); that.getList(typeid); }, 

相关文章:

如何从tabbar页面传数据

无论是百度小程序还是微信小程序&#xff0c;app.json中规定的tabbar页面是不支持传参的&#xff0c;例如&#xff1a; <navigator url../service/service?typeid6 openType"switchTab"> 服务项目 </navigator> 上面的navigater跳转有个属性&#…...

软考高级系统架构设计师系列论文七十四:基于构件的软件开发

软考高级系统架构设计师系列论文七十四:基于构件的软件开发 一、构件相关知识点二、摘要三、正文四、总结一、构件相关知识点 软考高级系统架构设计师系列之:面向构件的软件设计,构件平台与典型架构...

图为科技_边缘计算在智能安防领域的作用

边缘计算在智能安防领域发挥着重要的作用。智能安防系统通常需要处理大量的图像、视频和传感器数据&#xff0c;并对其进行实时分析和处理。边缘计算可以将计算和数据处理功能移动到离数据源更接近的地方&#xff0c;例如摄像头、传感器设备或安防终端。 以下是边缘计算在智能…...

Android 13 - Media框架(7)- NuPlayer::Source

Source 在播放器中起着拉流&#xff08;Streaming&#xff09;和解复用&#xff08;demux&#xff09;的作用&#xff0c;Source 设计的好坏直接影响到播放器的基础功能&#xff0c;我们这一节将会了解 NuPlayer 中的通用 Source&#xff08;GenericSource&#xff09;关注本地…...

MySql015——使用子查询

一、创建customers表 ######################## # Create customers table ######################## use study;CREATE TABLE customers (cust_id int NOT NULL AUTO_INCREMENT,cust_name char(50) NOT NULL ,cust_address char(50) NULL ,cust_city char…...

leetcode 355 设计推特

用链表存储用户发送的每一个推特&#xff0c;用堆获取最先的10条动态 class Twitter {Map<Integer,Set<Integer>> followMap;//规定最新的放到最后Map<Integer,Tweet> postMap;//优先队列(堆&#xff09;PriorityQueue<Tweet> priorityQueue;int time…...

倒数 2 周|期待 2023 Google开发者大会

9 月 6-7 日&#xff0c;中国上海 前沿科技&#xff0c;新知同享 趣味体验&#xff0c;灵感齐聚 技术生态&#xff0c;多元共进 关注官网最新信息&#xff0c;敬请期待大会开幕 2023 Google 开发者大会官网 相信你一定记得&#xff0c;在今年 5 月的 Google I/O 大会上&am…...

代码随想录day57

516最长回文子序列 class Solution { public:int longestPalindromeSubseq(string s) {vector<vector<int>>dp(s.size(),vector<int>(s.size(),0));for(int i0;i<s.size();i)dp[i][i]1;for(int is.size()-1;i>0;i--){for(int ji1;j<s.size();j){if…...

YOLOv5、v8改进:CrissCrossAttention注意力机制

目录 1.简介 2. yolov5添加方法&#xff1a; 2.1common.py构建CrissCrossAttention模块 2.2yolo.py中注册 CrissCrossAttention模块 2.3修改yaml文件。 1.简介 这是ICCV2019的用于语义分割的论文&#xff0c;可以说和CVPR2019的DANet遥相呼应。 和DANet一样&#xff0c;…...

RabbitMQ特性介绍和使用案例

❤ 作者主页&#xff1a;李奕赫揍小邰的博客 ❀ 个人介绍&#xff1a;大家好&#xff0c;我是李奕赫&#xff01;(&#xffe3;▽&#xffe3;)~* &#x1f34a; 记得点赞、收藏、评论⭐️⭐️⭐️ &#x1f4e3; 认真学习!!!&#x1f389;&#x1f389; 文章目录 RabbitMQ特性…...

Ansible 使用 RHEL 系统角色

安装 RHEL 系统角色软件包&#xff0c;并创建符合以下条件的 playbook /home/greg/ansible/timesync.yml 在所有受管节点上运行 使用 timesync 角色 配置该角色&#xff0c;以使用当前有效的 NTP 提供商 配置该角色&#xff0c;以使用时间服务器 172.25.254.254 配置该角色&am…...

重新认识Android中的线程

线程的几种创建方式 new Thread&#xff1a;可复写Thread#run方法。也可以传递Runnable对象&#xff0c;更加灵活。缺点&#xff1a;缺乏统一管理&#xff0c;可能无限制新建线程&#xff0c;相互之间竞争&#xff0c;及可能占用过多系统的资源导致死机或oom。 new Thread(new…...

前端(十五)——GitHub开源一个react封装的图片预览组件

&#x1f475;博主&#xff1a;小猫娃来啦 &#x1f475;文章核心&#xff1a;GitHub开源一个react封装的图片预览组件 文章目录 组件开源代码下载地址运行效果展示实现思路使用思路和api实现的功能数据和入口部分代码展示 组件开源代码下载地址 Gitee&#xff1a;点此跳转下载…...

DELL Power Edge R740 安装 OracleLinux-R7-U9-Server

一、准备好 OracleLinux-R7-U9-Server-x86_64-dvd 安装介子&#xff1a; 二、通过 iDRAC挂dvd 安装介子 三、在 iDRAC 开机控制选择虚拟 CD/DCD/ISO 电源控制选择 复位系统&#xff08;热启动&#xff09; 四、进入安装阶段 五、配置时区 六、配置磁盘 七、删除之前的旧分区 …...

深入了解OpenStack:创建定制化QCOW2格式镜像的完全指南

OpenStack 创建自定义的QCOW2格式镜像 前言 建议虚机网络配置为 NAT 或 桥接&#xff0c;因为未来 KVM虚机 需要借助 虚机 的外网能力进行联网安装软件包 虚机在启动前&#xff0c;必须在 VMware Workstation 上为其开启虚拟化引擎 虚拟化 Intel VT-x/EPT 或 AMD-V 安装kvm …...

【Java 中级】一文精通 Spring MVC - 数据格式化器(六)

&#x1f449;博主介绍&#xff1a; 博主从事应用安全和大数据领域&#xff0c;有8年研发经验&#xff0c;5年面试官经验&#xff0c;Java技术专家&#xff0c;WEB架构师&#xff0c;阿里云专家博主&#xff0c;华为云云享专家&#xff0c;51CTO 专家博主 ⛪️ 个人社区&#x…...

Linux内核学习(十二)—— 页高速缓存和页回写(基于Linux 2.6内核)

目录 一、缓存手段 二、Linux 页高速缓存 三、flusher 线程 Linux 内核实现了一个被叫做页高速缓存&#xff08;page cache&#xff09;的磁盘缓存&#xff0c;它主要用来减少对磁盘的 I/O 操作。它是通过把磁盘中的数据缓存到内存中&#xff0c;把对磁盘的访问变为对物理内…...

大数据-玩转数据-Flink窗口函数

一、Flink窗口函数 前面指定了窗口的分配器, 接着我们需要来指定如何计算, 这事由window function来负责. 一旦窗口关闭, window function 去计算处理窗口中的每个元素. window function 可以是ReduceFunction,AggregateFunction,or ProcessWindowFunction中的任意一种. Reduc…...

Docker网络-探索容器网络如何相互通信

当今世界&#xff0c;企业热衷于容器化&#xff0c;这需要强大的网络技能来正确配置容器架构&#xff0c;因此引入了 Docker Networking 的概念。Docker 是一种容器化平台&#xff0c;允许您在独立、轻量级的容器中运行应用程序和服务。Docker 提供了一套强大的网络功能&#x…...

ESP32-CAM模块Arduino环境搭建测试

ESP32-CAM模块Arduino环境搭建测试 一.ESP32OV2640摄像头模块CameraWebServer视频查看 二.测试ESP32-CAM(后续称cam模块)代码是否上传执行成功测试 const int led0 12; const int led1 13;void setup() {// put your setup code here, to run once:pinMode(led0, OUTPUT);pin…...

为什么迅雷下载比浏览器稳?从原理到实战的完整使用手册

目录 为什么迅雷下载比浏览器稳&#xff1f;从原理到实战的完整使用手册 前言 一、核心原理&#xff1a;为什么迅雷下载断网也不怕&#xff1f; 1. 断点续传&#xff1a;下载到一半断网也能续 2. 多线程下载&#xff1a;同时开多个 “下载通道” 3. P2P 分布式加速&#…...

豆包大模型免费API调用实战:逆向工程原理、集成方案与风险规避

1. 项目概述与核心价值最近在折腾大模型应用开发的朋友&#xff0c;估计都绕不开一个核心问题&#xff1a;API调用成本。无论是做个人项目练手&#xff0c;还是小团队内部测试&#xff0c;动辄按token计费的商业API&#xff0c;账单看着都让人心疼。特别是当你需要频繁调用、进…...

Skeleton骨架系统:基于Tailwind CSS的现代前端UI架构实践

1. 项目概述&#xff1a;骨架系统在现代前端开发中的价值回归如果你在前端领域摸爬滚打了一段时间&#xff0c;尤其是深度使用过 Tailwind CSS&#xff0c;那么你很可能已经对“组件库”这三个字又爱又恨。爱的是它们能极大提升开发效率&#xff0c;恨的是它们往往伴随着沉重的…...

S32K3 FlexCAN实战:从MCAL配置到DMA接收,手把手教你避开那些手册里没写的坑

S32K3 FlexCAN深度实战&#xff1a;从寄存器配置到DMA优化全链路解析 在车载电子架构快速迭代的今天&#xff0c;S32K3系列MCU凭借其强大的FlexCAN模块成为汽车电子开发者的首选。但官方文档往往只勾勒出理想状态下的功能框架&#xff0c;当工程师真正着手实现CAN FD通信时&…...

PX4-Autopilot扩展卡尔曼滤波状态估计系统深度解析与实战调优

PX4-Autopilot扩展卡尔曼滤波状态估计系统深度解析与实战调优 【免费下载链接】PX4-Autopilot PX4 Autopilot Software 项目地址: https://gitcode.com/gh_mirrors/px/PX4-Autopilot PX4-Autopilot作为开源无人机飞控系统的标杆&#xff0c;其核心状态估计模块EKF2&…...

终极指南:boardgame.io v0.50重大更新,打造更强大的回合制游戏框架

终极指南&#xff1a;boardgame.io v0.50重大更新&#xff0c;打造更强大的回合制游戏框架 【免费下载链接】boardgame.io State Management and Multiplayer Networking for Turn-Based Games 项目地址: https://gitcode.com/gh_mirrors/bo/boardgame.io boardgame.io是…...

3个步骤掌握APK Installer:在Windows上直接安装Android应用的终极指南

3个步骤掌握APK Installer&#xff1a;在Windows上直接安装Android应用的终极指南 【免费下载链接】APK-Installer An Android Application Installer for Windows 项目地址: https://gitcode.com/GitHub_Trending/ap/APK-Installer 你是否厌倦了在Windows电脑上使用笨重…...

AutoHotkey v2脚本实现CapsLock长按触发AI编程助手,提升Cursor编辑器效率

1. 项目概述&#xff1a;当CapsLock键成为你的AI编程副驾 作为一名在Windows平台上折腾了十几年效率工具的老码农&#xff0c;我见过太多“快捷键增强”工具&#xff0c;它们要么功能繁杂到记不住&#xff0c;要么侵入性太强干扰正常输入。直到我遇到了“牛马”&#xff08;nm…...

图片重复检测革命:AntiDupl.NET如何智能清理你的数字相册

图片重复检测革命&#xff1a;AntiDupl.NET如何智能清理你的数字相册 【免费下载链接】AntiDupl A program to search similar and defect pictures on the disk 项目地址: https://gitcode.com/gh_mirrors/an/AntiDupl 在数字摄影普及的今天&#xff0c;我们每个人的硬…...

基于Java的教学仪器设备销售网站(10017)

有需要的同学&#xff0c;源代码和配套文档领取&#xff0c;加文章最下方的名片哦 一、项目演示 项目演示视频 二、资料介绍 完整源代码&#xff08;前后端源代码SQL脚本&#xff09;配套文档&#xff08;LWPPT开题报告/任务书&#xff09;远程调试控屏包运行一键启动项目&…...