自定义微信小程序tabBar+权限管理+页面跳转不刷新

自定义微信小程序tabBar+权限管理+页面跳转不刷新


一.需求

   1.tabBar在实际的项目中,被UI要求字体大小为20rpx,而微信自带的是24rpx

    2.tabBar加上了权限管理(只有会员才可以看到专属的tabBar入口)

    3.tabBar点击后,如果是同样的tabBar禁止重新加载数据

    4.tabBar对应的页面要有缓存(也就是跳转不刷新)

二.实现思路

    1.把所有的tabBar页面写在一个页面,使用Swiper+scroll-view实现,balabalabalala~~

    2.使用switchTab的跳转方式缓存页面

    结果:因为一开始项目就采用了4个页面的方式,所以只能填坑选择了第二种

三.实现方法

    1.自定义tabBar(我使用了组件的方式)


tabBar代码

 解析:使用navigator标签进行页面跳转,防止左上角的左返回按钮出现。open-type是跳转方式,hover-class是指定点击时的样式,使用tabStatu和每一个数组的current相比较来实现是否点击的是当项,如果是就隐藏navigator,显示block禁止同一个按钮的多次点击。image的标签也是通过当前点击项的tabStute来判断显示的是哪一张图片。


tabBarj的son(普通用户)

   

根据身份添加会员的权限

2.实现跳转时就遇到了switchTab根本不管用啊,怎么跳转不了捏~

    排查:wx.switchTab({url:'地址'})的官方说明地址必须是在app.json的tabBar中注册的。

    那就去注册吧


app.json中注册tabBar

这样的写法是为了防止加载时出现文字,图片的信息

但是又遇到了问题,自定义的tabbar出现在app.json的tabBar上方,别着急,在app.js中使用wx.wx.hideTabBar(),隐藏掉就好了。哈哈。大功告成。

如果你有更好的方法,可以告诉我哦~

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 上午看paper找学习状态定义啊难难难 中午看棋书很馋仙豆糕 下午和mason下棋首先复盘他国象联盟的棋1.爱送兵...
    dq920813阅读 161评论 0 0
  • 周末的早晨,胡先生被刺眼的阳光照醒,不耐烦地嘟囔了一句,妈的,晚上忘记拉窗帘了。 他坐起身来,回头望了一下熟睡在旁...
    接地气的仙儿阅读 3,448评论 72 89
  • 安静,万物生春,花呀,开了,红色,是梅。那一刻,她最美。风带来他的信吗,是吗。写不出,那种滋味,是没有文字能言...
    硫酸铜的二次方阅读 150评论 1 1