uni-app 怎么自定义顶部导航和底部导航,弹性布局增加数据自适应(简易)
程序员文章站
2022-03-02 09:46:42
uni-app 怎么自定义顶部导航和底部导航,弹性布局增加数据自适应,简单易懂底部效果:1.首先弄点底部的原始数据,比如首页、个人中心等文字,默认图标,点击后的图标#### 2.写标签和样式主要样式还有一些基本的样式/* 图片 /image{width: 100%;height: 100%;}/ 弹性布局 /.fle{display: flex;}.fle_all{display: flex;align-items: center;justify-content: c...
uni-app 怎么自定义顶部导航和底部导航,弹性布局增加数据自适应,简单易懂
底部效果:
1.首先弄点底部的原始数据,比如首页、个人中心等文字,默认图标,点击后的图标
data() {
return {
bot_is_click: [],
bot_nav: [{
src: "../../static/01.png",
name: "首页",
click_src: "../../static/02.png",
}, {
src: "../../static/01.png",
name: "分类",
click_src: "../../static/02.png",
}, {
src: "../../static/01.png",
name: "商城",
click_src: "../../static/04.png",
}, {
src: "../../static/01.png",
name: "个人中心",
click_src: "../../static/05.png",
}],
}
2.写标签和样式
<view class="bot_nav" style="position: relative;">
</view>
<view class="bot_nav " style="position: fixed;">
<view class="fle1 fle_all " :class="item.is_click?'cur':''" v-for="(item,index) in bot_nav" :key='index' @tap="bot_nav_click(index)">
<view class="fle fle_col">
<view class="fle_sta fle_all wth100">
<view class="img">
<image :src="item.click_src" mode="" v-if="bot_is_click[index].is_click"></image>
<image :src="item.src" mode="" v-if="!bot_is_click[index].is_click"></image>
</view>
</view>
<view class="fle_end wth100 fle_all">
<text>{{item.name}}</text>
</view>
</view>
</view>
</view>
主要样式
.bot_nav{
border-top: 1rpx solid #eee;
position: absolute;
bottom: 0%;
height: 120rpx;
width: 100%;
color: #999;
background-color: white;
display: flex;
z-index: 99;
}
.bot_nav .img{
width: 40rpx;
height: 40rpx;
margin-top: 10rpx;
margin-bottom: 10rpx;
background-color: #ccc;
}
.bot_nav .cur{
color: #333;
}
还有一些基本的样式,这些基本样式我是放在app.vue里全局使用的,单页面也可以用
/* 图片 */
image{
width: 100%;
height: 100%;
}
/* 弹性布局 */
.fle{
display: flex;
}
.fle_all{
display: flex;
align-items: center;
justify-content: center;
}
.fle_all2{
display: flex;
align-items: center;
justify-content: space-between;
}
.fle_jus2{
display: flex;
align-items: center;
}
.fle_all3{
display: flex;
align-items: center;
justify-content: space-around;
}
.fle_jus3{
display: flex;
justify-content: space-around;
}
.fle_col{
display: flex;
flex-direction: column;
}
.fle_row{
display: flex;
flex-direction: row;
}
.fle_wra{
/* 换行 */
flex-wrap: wrap;
}
.fle_sta{
align-self: flex-start;
}
.fle_end{
align-self: flex-end;
}
.fle_bas{
align-self: baseline;
}
.fle_ali{
display: flex;
align-items: center;
}
.fle_jus{
display: flex;
justify-content: center;
}
.fle1{
flex: 1;
}
.fle1_2{
flex: 1.5;
}
.fle2{
flex: 2;
}
.fle3{
flex: 3;
}
.fle4{
flex: 4;
}
.fle5{
flex: 5;
}
.fle6{
flex: 6;
}
.fle7{
flex: 7;
}
3.在加载页面前,初始一个点击存储器,默认第一个为true,在用户点击其他图片时把存储器的数据都设置为false,再把点击的下标赋值为true,这样一个自定义的底部就写好了
onShow() {
for (var i = 0; i < this.bot_nav.length; i++) {
if (i == 0) {
this.bot_is_click.push({
is_click: true
})
}
this.bot_is_click.push({
is_click: false
})
}
},
methods: {
bot_nav_click(e) {
for (var i = 0; i < this.bot_is_click.length; i++) {
this.bot_is_click[i].is_click = false
}
this.bot_is_click[e].is_click = true
},
}
4.顶部导航效果,其实很简单,只需写左下角的一小块就可以了,在pages.json里取消默认的头部导航
(全局取消在globalStyle里写,单页面取消在pages里写)
(1)需要全局取消:“navigationStyle”:“custom”
(2)仅单页面:“navigationStyle”:“custom”
(3)个别不取消但是大部分取消,个别页面default,全局custom
{
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/component/index",
"style": {
"navigationBarTitleText": "首页",
"navigationStyle":"default"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8",
"navigationStyle":"default"
}
}
5.设置完成后在页面写一个占位置的块,给自定义导航留个家,里面的箭头是字体图标,可以换成图片或者其他文字,字体图标的点击事件可以重写
<view class="top_nav ">
<view class="top_nav " style="position: fixed;">
<view class="fle_end fle_all3 abs " style="height: 60rpx;top: 50%;left: 3%;">
<view class="">
<view class="iconfont col_w fon_3" @tap="come_b">

</view>
</view>
<view class="text fle_all mle10" style="padding: 0rpx 10rpx;height: 42rpx;">
<text class="col_w fon_4">会员中心
</text>
</view>
</view>
</view>
</view>
css
<style>
@import "./conmen/iconfont.css";
.iconfont{
font-family:"iconfont" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
/* 自定义顶部和底部 */
.top_nav{
padding: 0rpx;
height: 150rpx;
z-index: 99;
width: 100%;
background-color: #ccc;
}
</style>
自定义导航写完啦,有任何问题和想法都可以在底下评论,我每天都会看的
本文地址:https://blog.csdn.net/TChildeSeven/article/details/107529593
上一篇: flex是什么 Flex介绍