微信小程序项目：tab导航栏

最新推荐文章于 2024-09-20 10:08:11 发布

新人如附件

最新推荐文章于 2024-09-20 10:08:11 发布

阅读量6.8k

点赞数 5

分类专栏：微信小程序（一）文章标签： css html javascript

本文链接：https://blog.csdn.net/qq_42957563/article/details/106432353

版权

微信小程序（一）专栏收录该内容

4 篇文章 0 订阅

订阅专栏

这里写两种的代码，一开始是使用的第二种（使用变量控制wx：if）后来发现了个更便利的方法一（“tabBar”）

参看： https://www.cnblogs.com/min-min-min/p/7452880.html
https://www.cnblogs.com/qinlinkun/p/12881811.html
https://blog.csdn.net/runner_123/article/details/80434119

方法一：

效果
在这里插入图片描述
加在app.json内，pagePath自定义到切换的页

  "tabBar": {
    "color": "#fff",
    "selectedColor": "#fff",
    "backgroundColor": "#31c27c",
    "position": "top",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "推荐"
      },
      {
        "pagePath": "pages/index/index2",
        "text": "排行榜"
      },
      {
        "pagePath": "pages/index/index3",
        "text": "搜索"
      }
    ]
  },

方法二：

效果：
在这里插入图片描述

代码：

.js

  data: {
    navbar:['推荐','发现'],
        currentTab:2,
  },
  //响应点击导航栏
  navbarTap:function(e){
    var that=this;
    that.setData({
      currentTab:e.currentTarget.dataset.idx,
      TypeItem:that.data.navbar[that.data.currentTab]
    })
  },

.wxml

<!--pages/subject/subject.wxml-->

<!--导航菜单-->
<view class="navbar" style="z-index:50">
<!--循环-->
 <view wx:for="{{navbar}}" data-idx="{{index}}" wx:key="unique" class="item {{currentTab==index ? 'active' : ''}}" bindtap="navbarTap">
    <view class="notice" wx:if="{{count[index]>0}}">{{count[index]}}</view>
    {{item}}
    <!--<text  bindtap="navbarTap">{{item}}</text>-->
  </view>
  </view>
  <!--推荐 话说id是啥-->
<view hidden="{{currentTab !== 0}}" id="two">
  <template is="list" data="{{maintainRecordlist}}" />
  <view>
  推荐
  </view>
</view>
<!--发现-->
<view hidden="{{currentTab !== 1}}" id="one">
  <template is="list" data="{{maintainRecordlist}}" />
  <view class="products">
  发现
  热门栏目
  </view>
  <view class="classify"> 
  分类
  </view>
</view>

.wcss

/* pages/subject/subject.wxss */
/*圆点数字标注*/
.notice {
  width:28rpx;
  height:28rpx;
  color:#fff;
  text-align:center;
  background-color:#ec9e14;
  border-radius:50%;
  position:absolute;
  float:left;
 /* margin-top: 8rpx;*/
 top:5rpx;
  font-size: 15rpx;
  right:30rpx;
  line-height:30rpx; }

/*顶部导航样式*/
.navbar{
flex: none;
display: flex;
background: #ffffff;
margin-top: 20rpx;
z-index: 50;
}
.navbar .item{
position: relative;
flex: auto;
text-align: center;
line-height: 100rpx;
font-size: 35rpx;
color: #666666;
font-family: Microsoft YaHei;
}
.navbar .item.active{
color: #ec9e14;
font-size: 35rpx;
font-family: Microsoft YaHei;
border: none;
}
.navbar .item.active:after{
  border: none;
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4rpx;

  font-size: 24rpx;
  color: #666666;
  font-family: Microsoft YaHei;
 }
 .products{
  position: fixed;
  top: 120rpx;
  bottom: 450rpx;
  left: 0;
  width: 100%;
  height: calc(100% - 500rpx);
  border: #666666;
  border-style: solid;
}
.classify{
  position: fixed;
  top:840rpx ;
  bottom: 0;
  left: 0;
  width: 100%;
  border: #ec9e14;
  border-style: solid;

}