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