wepy公共样式_Wepy--小程序自定义底部tabBar

PS后续:

说来惭愧, 没想到这篇文章浏览的人有点多. 说实话写的挺乱的. 并且自定义tabbar还有闪屏的问题.

因为有好几位道友都问了这个问题,  其中一位因为项目很急,所以就研究了一下(也是借鉴大佬的想法),  差不多解决了闪屏的问题.但还是有点小瑕疵.

本人也是前端路上的小白(工作满打满算才 一年半...), 所以写的有什么不对的地方, 还望指出呐.

运行项目之前, 还是去看一下大佬的文章, 这样思路更清晰.

运行项目, 需要对wepy有所了解, 不了解的可以去查看官方文档,

还有小程序项目的appId需要弄成测试号, 不然这是我的(因为懒,就没删appId),没法跑.

还有, 项目的初始页面得是自定义tabbar页面的其中一个, 也就是在app.json中config下的pages,  不然的话会出问题(否则只能在每个页面去隐藏官方tabbar了)  -- 先看参考链接,先看参考链接,先看参考链接,

对于下面的文章, 因为写的不好, 并且问题也多, 所以不建议去看了. 可以直接下载代码压缩包,毕竟在编译器上看代码还是最爽的.

因为需求,小程序自带的tabBar不能满足, 所以只能来自己重新写一个. 先看效果图吧

首页:

发现:

消息:

我的:

接下来看代码:

1- 组件-- tabBarBottom.wpy  这里页面也可以用循环来写, 不过就要在样式上再去调整, 我这里没有用循环, 就将就看吧.....

view 中的 c-y 与 c-gray 是公共样式中, 控制图标颜色的切换;  因为这里的图标我用的是阿里云图标, 不是图片, 可以自己替换成图片, 根据 selected 进行图片切换

//如果替换成图片 写法 替换图片注意样式, 样式应该要进行调整

//

{{tabBar.list[0].text}}

{{tabBar.list[1].text}}

{{tabBar.list[2].text}}

{{tabBar.list[3].text}}

exportdefaultclass tabBar extends wepy.component {//props 接收父组件传递过来的值

props ={

// 接收父级传递的tabBar信息

tabBar: {

type: Object,default: {}

}

}

components={

}

data={

}

onLoad() {

}

computed={}

methods={

}

event={}

}

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;

}

}

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

2

3

//⑤: 使用组件, 将数据传递给组件

4

5

6

7

8

9 import wepy from 'wepy';10 import tabBarBottom from '@/components/tabBarBottom'; //①:先导入组价11 export defaultclass 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

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

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

①: