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

Wepy-- 小程序自定义底部 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}}

importwepy from'wepy';

exportdefaultclasstabBar extends wepy.component{

// props 接收父组件传递过来的值

props={

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

tabBar:{

type:Object,

default:{}

}

}

components={

}

data={

}

onLoad(){

}

computed={}

methods={

}

event={}

}

.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;

}

}

2- tabBar 的数据 , 我放在了启动文件中 app.wpyglobalData={

userInfo:null,

// tabBar 数据

tabBar:{

list:[

{

pagePath:"home",

text:"首页",

icon_class:"iconfont icon-tab-home",// 这里用的是阿里图标, 可以替换成图片

selected:true

// 图片写法

// img: '未选中的图片路径',

// img_act: '被选中的图片路径'

},

{

pagePath:"find",

text:"发现",

icon_class:"iconfont icon-tab-find",

selected:false

},

{

pagePath:"news",

text:"消息",

icon_class:"iconfont icon-tab-news",

selected:false

},

{

pagePath:"myInfo",

text:"我的",

icon_class:"iconfont icon-tab-my",

selected:false

}

]

}

}

// 处理 tabBar 中点击, 被点击, 将当前的数据对象中 selected 改成 true, 其余的就得改成 false; 这里的 id 是标识, 在调用时手动传入的; id 与 tabBar 数组每一个对象索引要对应

tabBarClickHandle(id,that){

lettbList=this.globalData.tabBar.list;

tbList.forEach((item,index)=>{

if(id==index){

tbList[id].selected=true;

}else{

tbList[index].selected=false;

}

});

that.$apply();

returnthis.globalData.tabBar;

}

3- 首页中使用组件 剩余的 发现, 消息, 我的这三个页面中都是这样的用法, 都是这五步, 不过剩余的三个 在第四步中 id 要变发现 --id-1 消息 --id-2 我的 --id-3

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

importwepyfrom'wepy';

importtabBarBottomfrom'@/components/tabBarBottom';//: 先导入组价

exportdefaultclassHomeextendswepy.page{

config={

navigationBarTitleText:"首页"

}

components={

tabBarBottom,// 声明组件

}

data={

tabBarData:{},// 组件数据 < 传递给组件的 >

}

onLoad(){

//: 获取数据, 更新数据 tabBarClickHandle() 启动文件中编写的 ---- 0 就是形参 id 的实参

this.tabBarData=this.$parent.tabBarClickHandle(0,this);

this.$apply();

}

computed={

}

methods={

}

event={

}

}

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

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

:

来源: https://www.cnblogs.com/yk95/p/9597493.html