微信小程序顶部固定不可滑动的顶部分页导航栏

最新推荐文章于 2023-07-28 17:27:11 发布

大白菜程序猿

最新推荐文章于 2023-07-28 17:27:11 发布

阅读量1.2k

点赞数 1

分类专栏：微信小程序文章标签：微信小程序前端小程序

本文链接：https://blog.csdn.net/m0_50641264/article/details/125164939

版权

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

19 篇文章 7 订阅

订阅专栏

微信小程序顶部固定不可滑动的顶部分页导航栏

wxml代码

<!--pages/index/article_list/article_list.wxml-->
<!--导航条--> 
<view class="navbar"> 
 <text wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key="unique" bindtap="navbarTap">{{item}}</text> 
</view> 
 
<!--首页--> 
<view hidden="{{currentTab!==0}}"> 
 tab_01 
</view> 
 
<!--搜索--> 
<view hidden="{{currentTab!==1}}"> 
 tab_02 
</view> 
 
<!--我--> 
<view hidden="{{currentTab!==2}}"> 
 tab_03 
</view> 

<!--我--> 
<view hidden="{{currentTab!==3}}"> 
 tab_04
</view>

wxss代码

/* pages/index/article_list/article_list.wxss */
page{ 
  display: flex; 
  flex-direction: column; 
  height: 100%; 
 } 
 .navbar{ 
  flex: none; 
  display: flex; 
  background: #fff; 
 } 
 .navbar .item{ 
  position: relative; 
  flex: auto; 
  text-align: center; 
  line-height: 80rpx; 
 } 
 .navbar .item.active{  
  color: #FFCC00; 
 } 
 .navbar .item.active:after{ 
  content: ""; 
  display: block; 
  position: absolute; 
  bottom: 0; 
  left: 0; 
  right: 0; 
  height: 4rpx; 
  background: #FFCC00; 
 }

js中的代码

var app = getApp()
Page({
data: {
    navbar: ['JAVA', 'Python', 'C','Linux'],
    currentTab: 0
  },
  navbarTap: function (e) {
    this.setData({
      currentTab: e.currentTarget.dataset.idx
    })
  }
  )}