uniapp微信小程序自定义tabbar，并且实现每次切换都刷新页面

最新推荐文章于 2024-05-31 12:34:03 发布
最新推荐文章于 2024-05-31 12:34:03 发布
阅读量7.4k 收藏 11
点赞数 2
分类专栏： 前端 文章标签： 微信小程序 小程序 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40922656/article/details/122059995
版权
本文介绍了如何在uniapp中为微信小程序创建自定义tabbar，并通过uni.switchTab()方法实现在切换tab时刷新页面。首先在page.json配置文件中启用自定义tabbar，并设置样式。接着，封装一个公共tabbar组件用于页面导航。在每个使用自定义tabbar的页面中，引入组件并调用uni.hideTabBar()来隐藏默认tabbar。
摘要由CSDN通过智能技术生成

0、page.json定义页面pages

//page.json
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
   
			"path": "pages/indexPage/index",  //首页
			"style": {
   
				"navigationStyle": "custom", 
				"navigationBarTextStyle": "white" 
			}
		},
		{
   
			"path": "pages/my/index",
			"style": {
   
				"navigationStyle": "custom&
最低0.47元/天 解锁文章
孟孟_mengmeng
关注
  • 2
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
uniapp 微信小程序tabbar凸起的显示
08-25
在`uniapp`中处理微信小程序的tabbar凸起效果并确保其不闪烁，是一项技术性工作，涉及到CSS样式、事件处理以及可能的动画优化。 首先，我们需要了解微信小程序中的`tabbar`配置。在`app.json`文件中，我们可以定义...
微信小程序双击底部导航栏刷新页面
glorious_future的博客
04-02 1131
参考了某团和某宝，单击或双击底部tab刷新当前页面 但是tab如果不是自定义的tab，并没有双击事件，所以大概思路就是判断第一次点击时间和第二次的点击时间，如果小于3000ms，就刷新列表，回到顶部 还有就是当屏幕滚动到一定高度之后，动态替换当前页面的tab图片 首先是达到一定高度动态切换当前页面tab图片 /** * @name 获取滚动高度 * @date 2021-04-01 */ getScrollTop(e){ let {scrollTop}=
微信小程序点击tabBar刷新页面
热门推荐
老四的博客
10-24 3万+
微信小程序点击导航栏菜单tabBar第一次的时候页面内容会刷新，那是因为调用了onLoad函数，但是点击其他菜单页再次返回第一点击的页面，页面无刷新，我的解决方法 就是调用onShow函数： onShow: function(){ var that =this; wx.request({ url: app.globalData.web_url+'yourApi?open_id='+ wx...
uniapp，跳转tabbar页面，并刷新页面
最新发布
fu_miao_qi_lai的博客
05-31 447
【代码】uniapp，跳转tabbar页面，并刷新页面。
【uniapp】点击底部tabs，刷新页面
Qxn530的博客
08-24 1446
点击底部tabs，刷新页面
小程序跳转tabbar，tabbar页面不刷新
qq_46490956的博客
12-11 877
在小程序项目中 我发现 wx.switchTab 跳转是触发onLoad事件 但是只会触发一次 如果我通过退出登录 是不会再次触发onLoad事件 的 而wx.reLaunch是可以跳转到tabBar页面的 再次触发onLoad事件。它和wx.switchTab的区别就是：前者可以触发onLoad事件，而后者则不能触发。wx.switchTab：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。wx.reLaunch：关闭所有页面，打开到应用内的某个页面。
【微信小程序】页面tabBar切换、下拉刷新
yzq0820的博客
09-13 1万+
在 pages.json 中提供 tabBar 配置，不仅仅是为了方便快速开发导航，更重要的是在App和小程序端提升性能。在这两个平台，底层原生引擎在启动时无需等待js引擎初始化，即可直接读取 pages.json 中配置的 tabBar 信息，渲染原生tab
微信小程序 返回tabBar页面刷新控制
sunidd的博客
04-16 2965
tabBar中的某个页面是用来发布数据的，发布数据之前在tabBar中各页面切换时该页面（publish）已填数据不会丢失（该页面已填写数据需要保存）。发布数据后进入页面2（publishsuccess），显示发布成功，但是发布数据后再进入该tabBar的发布页面则需要清除数据。
微信小程序学习笔记（3）导航、刷新与生命周期
游星的博客
08-27 627
微信小程序的导航、刷新事件与生命周期
uni-app的tabBar用法(自动、点击刷新页面，loading加载框)
weixin_63543108的博客
08-13 7135
url: 'https://www.baidu.com', // 外部网页的URL。url: 'https://www.baidu.com', // 外部网页的URL。url: 'https://www.baidu.com', // 外部网页的URL。// 异步重新设置 src，相当于刷新 web-view。// 在页面重新显示时，刷新 web-view 组件。//给点击tabBar时加一个1s的loading加载框。//点击tabBar自动刷新页面。//点击tabBar自动刷新页面。
uniapp小程序自定义动态tabbar
04-08
微信、支付宝、百度等小程序平台都提供了预设的TabBar样式，但往往不能满足所有设计需求，因此自定义动态TabBar成为了解决这一问题的关键。 3. 自定义TabBar的需求 - 动态内容：根据用户权限或业务状态动态改变...
微信小程序 自定义tabbar (源码)
05-31
微信小程序 自定义tabbar (源码)微信小程序 自定义tabbar (源码)微信小程序 自定义tabbar (源码)微信小程序 自定义tabbar (源码)微信小程序 自定义tabbar (源码)微信小程序 自定义tabbar (源码)微信小程序 自定义...
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
10-17
主要介绍了微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能,结合实例形式分析了微信小程序自定义顶部TabBar选项卡页面切换功能的相关布局、样式及功能实现技巧,需要的朋友可以参考下
微信小程序自定义tabBar,中间圆形凸起
05-31
在微信小程序开发中，自定义`tabBar`是提升用户界面体验的重要环节。原生的微信小程序`tabBar`虽然提供了基本的样式和功能，但往往无法满足开发者对个性化设计的需求。本文将深入探讨如何实现一个中间圆形凸起的...
微信小程序踩坑，有关tabBar的页面跳转不刷新问题
hyx153183740的博客
04-21 5792
微信小程序踩坑，有关tabBar的页面跳转不刷新问题 如果你想从一个页面携带参数，跳转到tabBar页面，你就会发现只有第一次跳转的时候，带着参数跳转成功了，第二次页面就不刷新了，这该咋办？因为微信小程序默认把tabBar页面加载到缓存中，下次直接读取，不再重新加载页面。解决办法： wx.switchTab({ url: "/pages/countTime/countTime",...
uniapp 跳转到tabbar页面并携带参数，刷新组件
oceanxy11的博客
06-07 1486
uniapp 跳转到tabbar页面并携带参数，刷新组件
uniapp微信小程序切换到tabber页面没有自动刷新
铁锤妹妹的博客
10-28 4828
通过uni.switchTab跳转到tabber页面比如个人中心页面，更新的数据没有刷新。导致页面的数据还是修改之前的。
解决uniapp项目开发从某一页面返回到tabbar页面时，页面不刷新，无法重新获取跟新后的数据，无法重新渲染页面问题。
m0_55315930的博客
05-12 8809
解决uniapp项目开发从某一页面返回到tabbar页面时，页面不刷新，无法重新获取跟新后的数据，无法重新渲染页面问题。
uni-app微信小程序，路由跳转和路由返回的页面数据刷新问题
lsklike的博客
08-21 1758
uni-app微信小程序，路由跳转和路由返回的页面数据刷新问题
uniapp微信小程序自定义tabbar
08-24
对于uniapp微信小程序，你可以通过自定义组件来实现自定义tabbar。以下是一种实现方法： 1. 在 uniapp 项目中创建一个新的自定义组件，例如 "custom-tabbar"。 2. 在 custom-tabbar 组件的文件夹中，创建一个 JSON 文件，命名为 "custom-tabbar.json"。在该文件中定义组件使用的自定义属性，例如： ```json { "component": true, "usingComponents": {} } ``` 3. 在 custom-tabbar 组件的文件夹中，创建一个 WXML 文件，命名为 "custom-tabbar.wxml"。在该文件中编写自定义tabbar的布局，例如： ```html <view class="custom-tabbar"> <!-- 自定义的tabbar按钮 --> <view class="custom-tabbar-item" bindtap="navigateToPage"> <!-- 按钮图标 --> <image src="{{ activeIndex === 0 ? 'icon1-active' : 'icon1' }}"></image> <!-- 按钮文字 --> <text class="{{ activeIndex === 0 ? 'active' : '' }}">Tab1</text> </view> <view class="custom-tabbar-item" bindtap="navigateToPage"> <!-- 按钮图标 --> <image src="{{ activeIndex === 1 ? 'icon2-active' : 'icon2' }}"></image> <!-- 按钮文字 --> <text class="{{ activeIndex === 1 ? 'active' : '' }}">Tab2</text> </view> <!-- 更多按钮 --> <view class="custom-tabbar-item more" bindtap="showMoreOptions"> <!-- 更多按钮图标 --> <image src="more-icon"></image> </view> </view> ``` 4. 在 custom-tabbar 组件的文件夹中，创建一个 WXSS 文件，命名为 "custom-tabbar.wxss"。在该文件中编写自定义tabbar的样式，例如： ```css .custom-tabbar { display: flex; align-items: center; height: 50px; background-color: #fff; } .custom-tabbar-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; } .custom-tabbar-item image { width: 30px; height: 30px; } .custom-tabbar-item text { font-size: 12px; margin-top: 5px; } .custom-tabbar-item.more { position: relative; } .custom-tabbar-item.more image { width: 40px; height: 40px; } .active { color: #007aff; } ``` 5. 在需要使用自定义tabbar的页面中，引入 custom-tabbar 组件，例如： ```html <template> <view> <!-- 页面内容 --> </view> <!-- 引入自定义tabbar组件 --> <custom-tabbar></custom-tabbar> </template> <script> import customTabbar from '@/components/custom-tabbar/custom-tabbar' export default { components: { customTabbar }, // 页面逻辑代码 } </script> <style> /* 页面样式 */ </style> ``` 通过以上步骤，你就可以在uniapp微信小程序中实现自定义tabbar了。你可以根据自己的需求修改自定义tabbar的布局和样式，以及处理相应的点击事件。希望能对你有所帮助！
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值