慢慢相遇 慢慢相识 慢慢拥抱 慢慢相处 慢慢在一起 慢慢一起走 喜欢才不是随随便便就可以开始
和结束的事情 这世界太快 我想和你慢慢来再久一点.
自定义taBar导航栏目的在于我们可以可以更好的拥有样式控制,更好的满足交互上的动效;这是我们的学习的初心,总结下目前有几种方式可以自定义导航
1.直接在index页面写导航,随后使用v-if条件判断切换;优点:上手最快没有什么顾虑,缺点:inex页面代码很长
2.custom-tab-bar官方接口,该方式有利于提升性能,同时可以使用原生taBar的所有接口,优点:可以满足自己的一些样式定制,缺点:无法支持SVG,GIF等格式,和原生一样需要在pages.json文件中配置
3.组件是完全自定义,自行控制样式和图片甚至任何操作;缺点:点击的时候会一闪一闪的
快速定义组件
来自codezzen大佬提供一个代码段学习,定义组件只需要在component目录下建立vue文件(建议插件名字和vue文件名字是一致的)
//例如
component/fr-tabar/fr-tabar.vue
随后文件中需要包含name和props ,即可完成一个组件的建立
//组件名字
name:'fr-tabar',
//定义组件参数
props:{
inexActive:{
type:Number,//定义参数类型
default:0 //定义参数默认默认值
}
}
组件界面完整代码
<template>
<view class="">
<view class="fr-taber">
<view class="fr-taber-view" >
<block v-for="(tars ,index) in tarList" :key="index">
<view class="fr-taber-icon" @tap="frTaBar(index,tars.rout)">
<image class="fengrui-img" :src="inxexActive == index ? tars.icon_active : tars.icon " mode="widthFix"></image>
</view>
</block>
</view>
</view>
</view>
</template>
<script>
export default {
name: "fr-tabar",//组件名字
//组件的参数
props: {
// 检测类型
// 文本
inxexActive: {
type: Number,
default: 0,
},
},
data() {
return {
title: 'Hello',
tarList:[
{
title:'首页',
icon:'../../static/tabar/home.png',
icon_active:'../../static/tabar/home_h.png',
rout:'../../pages/index/index'
},
{
title:'专题',
icon:'../../static/tabar/catelog.png',
icon_active:'../../static/tabar/catelog_h.png',
rout:'../../pages/car/car'
},
{
title:'搜索',
icon:'../../static/tabar/res.png',
icon_active:'../../static/tabar/res_h.png',
rout:'../../pages/search/search'
}
]
}
},
onLoad() {
},
methods: {
frTaBar(e,l){
let tar_rout = l;
uni.switchTab({
url: tar_rout
});
}
}
}
</script>
<style>
.fengrui-img{
height: 100%;
width: 100%;
}
.fr-taber-icon {
height: 56upx;
width: 56upx;
border: 1px solid red;
}
.fr-taber-list {}
.fr-taber-view {
background-color: #f3f3f3;
border-radius: 200upx;
height: 80upx;
width: 76%;
margin: auto;
display: flex;
justify-content: space-around;
align-items: center;
padding: 0upx 20upx;
}
.fr-taber {
width: 100%;
position: fixed;
bottom: 40upx;
height: auto;
}
</style>
自定义tabar
这里提到是的是开头说的第三种方式,自己写组件自己写样式;但是但是点击的时候会闪一下屏幕,目前的解决方式是在pages.json中配置tabar界面 随后定义导航,这样就可以解决页面闪烁问题。坑永远是跳不出去的,tabr的上的图片会闪烁一次 第二次者不会;
此外因为在pages.json中配置了就得使用uni.switchTab跳转,该跳转无法支持参数;我们就得在固定写死inxexActive
总结
本文文章适合学习一下最简单的组件封装和定义tabar基础,若在项目上使用得多测试
完整代码下载
https://yinfengrui.lanzouw.com/i042a2d
评论列表(6条)
111
之前提问了,wordpress用了第三方模板,是可以使用你这个小程序吗?
@伊凡:可以的
@伊凡:多谢
哈喽,问一下,我wordpress安装了第三方模板,对于你这个程序有影响吗?
@伊凡:不影响