Wepy--小程序自定义底部tabBar
PS后续:
说来惭愧, 没想到这篇文章浏览的人有点多. 说实话写的挺乱的. 并且自定义tabbar还有闪屏的问题.
因为有好几位道友都问了这个问题, 其中一位因为项目很急,所以就研究了一下(也是借鉴大佬的想法), 差不多解决了闪屏的问题.但还是有点小瑕疵.
解决自定义tabbar闪屏的问题, 参考链接: https://developers.weixin.qq.com/community/develop/doc/000c6e038c0ce05413f71e7ce56c04
本人也是前端路上的小白(工作满打满算才 一年半...), 所以写的有什么不对的地方, 还望指出呐.
解决闪屏的代码就直接放压缩包链接了, 需要的话可以下载去借鉴 : https://files.cnblogs.com/files/yk95/wepy-poster-test.zip
运行项目之前, 还是去看一下大佬的文章, 这样思路更清晰.
运行项目, 需要对wepy有所了解, 不了解的可以去查看官方文档,
还有小程序项目的appId需要弄成测试号, 不然这是我的(因为懒,就没删appId),没法跑.
还有, 项目的初始页面得是自定义tabbar页面的其中一个, 也就是在app.json中config下的pages, 不然的话会出问题(否则只能在每个页面去隐藏官方tabbar了) -- 先看参考链接, 先看参考链接, 先看参考链接,
对于下面的文章, 因为写的不好, 并且问题也多, 所以不建议去看了. 可以直接下载代码压缩包,毕竟在编译器上看代码还是最爽的.
因为需求,小程序自带的tabBar不能满足, 所以只能来自己重新写一个. 先看效果图吧
首页:
发现:
消息:
我的:
接下来看代码:
1- 组件-- tabBarBottom.wpy 这里页面也可以用循环来写, 不过就要在样式上再去调整, 我这里没有用循环, 就将就看吧.....
view 中的 c-y 与 c-gray 是公共样式中, 控制图标颜色的切换; 因为这里的图标我用的是阿里云图标, 不是图片, 可以自己替换成图片, 根据 selected 进行图片切换
<template>
<view class="tabBarBox">
<!-- 首页 -->
<navigator class="itemView" url="{{tabBar.list[0].pagePath}}" open-type="redirect" hover-class="none">
<view class="item_icon {{tabBar.list[0].selected ? 'c-y' : 'c-gray'}} {{tabBar.list[0].icon_class}}"></view>
//如果替换成图片 写法 替换图片注意样式, 样式应该要进行调整
//<image class="" src="{{tabBar.list[0].selected ? 'tabBar.list[0].img_act' : 'tabBar.list[0].img'}}">
<view class="item_text {{tabBar.list[0].selected ? 'c-y' : 'c-gray'}}">{{tabBar.list[0].text}}</view>
</navigator>
<!-- 发现 -->
<navigator class="itemView" url="{{tabBar.list[1].pagePath}}" open-type="redirect" hover-class="none">
<view class="item_icon {{tabBar.list[1].selected ? 'c-y' : 'c-gray'}} {{tabBar.list[1].icon_class}}"></view>
<view class="item_text {{tabBar.list[1].selected ? 'c-y' : 'c-gray'}}">{{tabBar.list[1].text}}</view>
</navigator>
<!-- 发布 -->
<view class="addView">
<image class="add_icon" src="../images/add.png"></image>
</view>
<!-- 消息 -->
<navigator class="itemView2 itemView" url="{{tabBar.list[2].pagePath}}" open-type="redirect" hover-class="none">
<view class="item_icon {{tabBar.list[2].selected ? 'c-y' : 'c-gray'}} {{tabBar.list[2].icon_class}}"></view>
<view class="item_text {{tabBar.list[2].selected ? 'c-y' : 'c-gray'}}">{{tabBar.list[2].text}}</view>
</navigator>
<!-- 我的 -->
<navigator class="itemView" url="{{tabBar.list[3].pagePath}}" open-type="redirect" hover-class="none">
<view class="item_icon {{tabBar.list[3].selected ? 'c-y' : 'c-gray'}} {{tabBar.list[3].icon_class}}"></view>
<view class="item_text {{tabBar.list[3].selected ? 'c-y' : 'c-gray'}}">{{tabBar.list[3].text}}</view>
</navigator>
<!-- <view></view> -->
</view>
</template>
<script>
import wepy from 'wepy';
export default class tabBar extends wepy.component {
// props 接收父组件传递过来的值
props = {
// 接收父级传递的tabBar信息
tabBar: {
type: Object,
default: {}
}
}
components = {
}
data = {
}
onLoad() {
}
computed = {}
methods = {
}
event = {}
}
</script>
<style lang="scss">
.tabBarBox{
width: 100%;
height: 100rpx;
background-color: #fff;
position: fixed;
bottom: 0;
z-index: 9999;
border-top: 1px #afafaf solid;
}
.itemView2{
margin-left: 150rpx;
}
.itemView{
width: 150rpx;
height: 100rpx;
text-align: center;
display: inline-block;
padding-top: 6rpx;
.item_icon{
font-size: 50rpx;
}
.item_text{
font-size: 28rpx;
}
}
.addView{
width: 150rpx;
position: fixed;
bottom: 0;
text-align: center;
display: inline-block;
.add_icon{
width: 120rpx;
height: 120rpx;
}
}
</style>
2- tabBar的数据 , 我放在了启动文件中 app.wpy
1 globalData = { 2 userInfo: null,
// tabBar数据 3 tabBar:{ 4 list: [ 5 { 6 pagePath: "home", 7 text: "首页", 8 icon_class: "iconfont icon-tab-home", //这里用的是阿里图标, 可以替换成图片 9 selected: true
//图片写法
// img: '未选中的图片路径',
// img_act: '被选中的图片路径'
10 }, 11 { 12 pagePath: "find", 13 text: "发现", 14 icon_class: "iconfont icon-tab-find", 15 selected: false 16 }, 17 { 18 pagePath: "news", 19 text: "消息", 20 icon_class: "iconfont icon-tab-news", 21 selected: false 22 }, 23 { 24 pagePath: "myInfo", 25 text: "我的", 26 icon_class: "iconfont icon-tab-my", 27 selected: false 28 } 29 ] 30 } 31 }
// 处理tabBar中点击, 被点击,将当前的数据对象中 selected 改成true, 其余的就得改成 false; 这里的id是标识, 在调用时手动传入的; id 与 tabBar数组每一个对象索引要对应 32 tabBarClickHandle(id, that) { 33 let tbList = this.globalData.tabBar.list; 34 tbList.forEach((item, index) => { 35 if (id == index) { 36 tbList[id].selected = true; 37 } else { 38 tbList[index].selected = false; 39 } 40 }); 41 that.$apply(); 42 return this.globalData.tabBar; 43 }
3- 首页中使用组件 剩余的 发现,消息,我的这三个页面中都是这样的用法, 都是这五步, 不过剩余的三个 在第四步中 id要变 发现--id-1 消息--id-2 我的--id-3
1 <template> 2 <view id="HomePage"> 3 <view>
// ⑤: 使用组件, 将数据传递给组件 4 <tabBarBottom :tabBar.sync="tabBarData"></tabBarBottom> 5 </view> 6 </view> 7 </template> 8 <script> 9 import wepy from 'wepy'; 10 import tabBarBottom from '@/components/tabBarBottom'; //①:先导入组价 11 export default class Home extends wepy.page{ 12 config = { 13 navigationBarTitleText: "首页 14 } 15 components = { 16 tabBarBottom, // ② 声明组件 17 } 18 data = { 19 tabBarData: {}, //③ 组件数据 <传递给组件的> 20 } 21 onLoad() {
//④: 获取数据,更新数据 tabBarClickHandle()启动文件中编写的---- 0就是形参id的实参
22 this.tabBarData = this.$parent.tabBarClickHandle(0, this); 23 this.$apply(); 24 } 25 computed = { 26 27 } 28 methods = { 29 30 } 31 event = { 32 33 } 34 } 35 </script>
慢慢积累,慢慢成长,加油!!
文章中如果有错误,请您指出,我会第一时间去修改;
①:
