自定义微信小程序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(),隐藏掉就好了。哈哈。大功告成。
如果你有更好的方法，可以告诉我哦~
网友评论