微信小程序开发 tabbar组件常见问题

一、 tabbar不显示问题

问题

刚开始我在app.json中配置了下面的代码,但tabbar并没有显示。代码如下:

"tabBar": {"custom": true,"color": "#7A7E83","selectedColor": "#3cc51f","borderStyle": "black","backgroundColor": "#ffffff","list": [{"pagePath": "pages/tPages/tPage1","text": "首页"},{"pagePath": "pages/tPages/tPage2","text": "我的"}]}

通过官方文档了解到,可以通过自定义组件来实现自定义tabbar(微信小程序官方文档)

解决

仿照官网提供的例子对比看自己的问题在哪里
参考官方文档,我对程序做出了如下调整:

  1. 首先在项目的根目录下添加了custom-tab-bar文件夹,在此文件夹下新增了一个组件。
    在这里插入图片描述
    【js代码如下】

Component({/*** 组件的属性列表*/properties: {},/*** 组件的初始数据*/data: {selected: 10,color: "#7A7E83",selectedColor: "#3cc51f",list: [{"pagePath": "pages/tPages/tPage1","text": "首页"},{"pagePath": "pages/tPages/tPage2","text": "我的"}]},attached() {},/*** 组件的方法列表*/methods: {switchTab(e) {const data = e.currentTarget.datasetconst iUrl = data.pathconsole.log('/'+iUrl)wx.switchTab({url: '/'+iUrl,success: function (e) {var page = getCurrentPages().pop();if (page == undefined || page == null) return;page.onLoad();}})this.setData({selected: data.index})}}
})

【wxml代码如下】

<view class="tab-bar"><view class="tab-bar-border"></view><view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab"><view>{{selected}}</view><view style="color: {{selected === index ? selectedColor : color}}">{{index}}-{{item.text}}-{{item.pagePath}}</view></view>
</view>

【json代码如下】

{"component": true
}

【wxss代码如下】

.tab-bar {position: fixed;bottom: 0;left: 0;right: 0;height: 48px;background: white;display: flex;padding-bottom: env(safe-area-inset-bottom);
}.tab-bar-border {background-color: rgba(0, 0, 0, 0.33);position: absolute;left: 0;top: 0;width: 100%;height: 1px;transform: scaleY(0.5);
}.tab-bar-item {flex: 1;text-align: center;display: flex;justify-content: center;align-items: center;flex-direction: column;
}.tab-bar-item image {width: 27px;height: 27px;
}.tab-bar-item view {font-size: 10px;
}
  1. 在pages文件夹下新建一个文件夹放你的tab相关的各类文件。这里我主要是新建了两个组件,也就是我需要在tabbar里显示的内容。(这步我本来就做好了,如果你的tabbar不显示可以对比看看是不是哪里配置错了)
    两个组件差不多,这里就记录一个吧。
    【js代码如下】
// tPage1.js
Component({pageLifetimes: {show() {if ( typeof this.getTabBar === 'function'&& this.getTabBar() ){ this.getTabBar().setData({ selected: 0 })}}}
})

【json代码如下】

{"usingComponents": {}
}

【wxml代码如下】

<scroll-view class="scrollarea" scroll-y type="list"><view class="container">这里是第一个页面!</view>
</scroll-view>

【wxss无代码】

  1. 最后检查app.json中的配置
    ※ pages中是否将所有的tab页面配置完整,保证无遗漏
    ※ tabBar的配置需要添加custom配置为true
    ※ tabBar中list里面的pagePath一定不要配错了!
{"pages": ["pages/tPages/tPage1","pages/tPages/tPage2"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "WeChat","navigationBarTextStyle":"black"},"tabBar": {"custom": true,"color": "#7A7E83","selectedColor": "#3cc51f","borderStyle": "black","backgroundColor": "#ffffff","list": [{"pagePath": "pages/tPages/tPage1","text": "首页"},{"pagePath": "pages/tPages/tPage2","text": "我的"}]}
}

二、 tabbar切换无法刷新问题

可以尝试在tab-bar组件js的切换tab的函数里添加page.onLoad()来刷新页面。
在这里插入图片描述如果此时还是不能刷新,有可能是路径出现了问题,打印路径看一下目标路径开头是否有个“/”。因为我的url是没有“/”的,所以自己补充了一个,页面就成功刷新啦!
在这里插入图片描述

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

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

相关文章

C++ | Leetcode C++题解之第113题路径总和II

题目&#xff1a; 题解&#xff1a; class Solution { public:vector<vector<int>> ret;unordered_map<TreeNode*, TreeNode*> parent;void getPath(TreeNode* node) {vector<int> tmp;while (node ! nullptr) {tmp.emplace_back(node->val);node …

单点登录与JWT

JWT:JSON Web Token JWT的作用是用户授权&#xff08;Authorization&#xff09;,而不是用户的身份认证&#xff08;Authentication&#xff09; 授权&#xff08;Authorization&#xff09;vs认证&#xff08;Authentication&#xff09; 用户认证指的是使用用户名、密码来…

pytest:指定测试用例执行顺序

在自动化测试中&#xff0c;测试用例的执行顺序有时对测试结果具有重要影响。本文将介绍如何在pytest框架中使用pytest-ordering插件以及Collection hooks来控制测试用例的执行顺序。 方式1&#xff1a; 使用pytest-ordering插件控制执行顺序 1.1 安装pytest-ordering插件 首…

XShell-连接-Centos 7

XShell 连接Centos 7 一.准备 安装XShell XShell下载地址&#xff1a; 在虚拟机上安装Centos 7&#xff0c;具体操作自行学习 二.Centos 7的准备 1.网络适配器修改为NAT 2.获取IP 输入命令&#xff1a; ip addr我的Centos 7对外IP为192.168.174.129 三.XShell连接Cento…

设计模式:适配器模式(Adapter)

设计模式&#xff1a;适配器模式&#xff08;Adapter&#xff09; 设计模式&#xff1a;适配器模式&#xff08;Adapter&#xff09;模式动机模式定义模式结构时序图模式实现在单线程环境下的测试在多线程环境下的测试模式分析优缺点适用场景应用场景应用实例适配器模式和代理模…

新书推荐:7.1 do while语句

本节必须掌握的知识点&#xff1a; 示例二十二 代码分析 汇编解析 ■do while语句其语法形式&#xff1a; do{ 语句块; }while(表达式) ■语法解析&#xff1a; ●执行do循环体内的语句块&#xff1b; ●判断while语句里的表达式&#xff0c;表达式为真继续下次循环&#…

上位机图像处理和嵌入式模块部署(f103 mcu运行freertos)

【 声明:版权所有,欢迎转载,请勿用于商业用途。 联系信箱:feixiaoxing @163.com】 mcu一般有两个用途,一个是控制,一个是非控制。控制类的应用一般要求实时性比较高,什么时候做什么,都是有严格的时间要求的。而非控制类的应用,则要求实现尽可能多的功能,比如…

PanTools v1.0.25 多网盘批量管理工具 批量管理、分享、转存、重命名、复制...

一款针对多个热门网盘的文件管理、批量分享、批量转存、批量复制、批量重命名、批量链接检测、跨账号移动文件、多账号文件搜索等&#xff0c;支持不同网盘的不同账号的资源文件操作。适用于网站站长、资源爱好者等&#xff0c;对于管理名下具有多个网盘多个账号具有实用的效果…

2024.05.26 第 399 场周赛

Leetcode 第 399 场周赛 优质数对的总数 I Leetcode 优质数对的总数 I 给你两个整数数组 nums1 和 nums2&#xff0c;长度分别为 n 和 m。同时给你一个正整数 k。 如果 nums1[i] 可以被 nums2[j] * k 整除&#xff0c;则称数对 (i, j) 为 优质数对&#xff08;0 < i < n…

React自定义Componment和State深层次理解-07

本节主要从底层原理上分析下React开发相关的内容和注意事项&#xff0c;本节会围绕使用展开&#xff0c;而非源码讲解。 Componment详解 什么是组件 在 MVVM架构出现之前&#xff0c;组件主要分为两种。 狭义上的组件&#xff0c;又称为 UI 组件&#xff0c;比如 Tabs 组件、…

PC端应用订阅SDK接入攻略

本文档介绍了联想应用联运sdk接入操作指南&#xff0c;您可在了解文档内容后&#xff0c;自行接入应用联运sdk。 1. 接入前准备 1. 请先与联想商务达成合作意向。 2. 联系联想运营&#xff0c;提供应用和公司信息&#xff0c;并获取商户id、app id、key&#xff08;公私钥、…

Linux定时计划

定时计划 一、计划任务种类 突发性&#xff1a;临时决定只执行一次的任务 at&#xff1a;处理执行一次任务就结束定时性&#xff1a;每隔一定时间需要重复执行此命令 crontab&#xff1a;指定任务&#xff0c;按照设定的周期一直循环执行二、作用 定时任务可以用于自动备份…

如何将Windows PC变成Wi-Fi热点?这里提供详细步骤

序言 Windows 10和Windows 11都有内置功能,可以将你的笔记本电脑(或台式机)变成无线热点,允许其他设备连接到它并共享你的互联网连接。以下是操作指南。 由于Windows中隐藏的虚拟Wi-Fi适配器功能,你甚至可以在连接到另一个Wi-Fi网络或无线路由器时创建Wi-Fi热点,通过另…

Navicat 连接 OceanBase 快速入门 | 社区版

Navicat Premium&#xff08;16.1.9或更高版本&#xff09;正式支持 OceanBase全线数据库产品。OceanBase为现代数据架构打造的开源分布式数据库。兼容 MySQL 的单机分布式一体化国产开源数据库&#xff0c;具有原生分布式架构&#xff0c;支持金融级高可用、透明水平扩展、分布…

分布式音乐播放器适配了Stage模型

OpenAtom OpenHarmony&#xff08;以下简称“OpenHarmony”&#xff09;应用开发自API 8及其更早版本一直使用的是FA模型进行开发。FA模型是Feature Ability的缩写&#xff0c;它和PA&#xff08;Particle Ability&#xff09;两种类型是过往长期推广的术语&#xff0c;深入人心…

95.网络游戏逆向分析与漏洞攻防-ui界面的设计-ui的设计与架构

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 如果看不懂、不知道现在做的什么&#xff0c;那就跟着做完看效果&#xff0c;代码看不懂是正常的&#xff0c;只要会抄就行&#xff0c;抄着抄着就能懂了 内容…

精品丨快速申请免费https证书

https域名证书对提高网站排名有一定的好处&#xff0c;所以当今很多企业为了给网站一个好的安全防护&#xff0c;就会去申请该证书。如今很多企业虽然重视网站的安全防护&#xff0c;但是也重视成本&#xff0c;所以为了节约成本会考虑申请免费的https证书。 第一个好处 企业不…

用Prometheus全面监控MySQL服务:一篇文章搞定

简介 在现代应用中&#xff0c;MySQL数据库的性能和稳定性对业务至关重要。有效的监控可以帮助预防问题并优化性能。Prometheus作为一款强大的开源监控系统&#xff0c;结合Grafana的可视化能力&#xff0c;可以提供全面的MySQL监控方案。 设置Prometheus 安装Prometheus 使…

机器学习预测-CNN手写字识别

介绍 这段代码是使用PyTorch实现的卷积神经网络&#xff08;CNN&#xff09;&#xff0c;用于在MNIST数据集上进行图像分类。让我一步步解释&#xff1a; 导入库&#xff1a;代码导入了必要的库&#xff0c;包括PyTorch&#xff08;torch&#xff09;、神经网络模块&#xff0…

queue学习

std::queue 类是一种容器适配器&#xff0c;它提供队列的功能——尤其是 FIFO&#xff08;先进先出&#xff09;数据结构。此类模板用处为底层容器的包装器——只提供特定的函数集合。queue 在底层容器尾端推入元素&#xff0c;从首端弹出元素。 元素访问 front 访问第一个元素…