Wepy--小程序自定义底部tabBar

2023-11-22 13:28:10

因为需求,小程序自带的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>

慢慢积累,慢慢成长,加油!!

文章中如果有错误,请您指出,我会第一时间去修改;

①:

Wepy--小程序自定义底部tabBar

码农公寓

相关文章