技术小白之记录微信小程序顶部导航栏

现在来说说顶部导航栏的代码，先来看看简单的顶部导航栏的截图：
在这里插入图片描述如有侵权行为，请联系博主进行删除
可以从上面的图片看到有写着[简介]和[试看]的导航栏内容，下面来记录下代码过程：
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}}"> 
<view class='topic7'>
<text class='tp1'>药屋少女的呢喃</text>
<text class='tp1_1'>《药屋少女的呢喃》，是小说家 日向 夏 著作，插画家 しのとうこ负责插画，连载于日本web小说网站「成为小说家吧」的轻小说，2014年书籍化，所属HERO文库。2017年漫画化，漫画家 ねこクラゲ 作画。</text>
</view>
</view> 
 
<!--试看--> 
<view hidden="{{currentTab!==1}}"> 
 <image src='http://thyrsi.com/t6/378/1538308974x-1566688526.jpg'class='tupian1'></image>
</view>

上述代码中
1.wx:for="{{navbar}}“表示在组件上使用 wx:for 控制属性绑定一个数组“navbar”，即可使用数组中各项的数据重复渲染该组件。
2.data-idx=”{{index}}"表示默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为item。
3.class="item {{currentTab==index ? ‘active’ : ‘’}}“这个没大看懂，有知道的人请帮忙说明下，感谢~
4.wx:key=“unique”——如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态，
当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。（这个unique没看懂~有知道的请帮帮忙解释下，感谢！）
5.bindtap=“navbarTap”，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件"navbarTap"处理函数。
6. hidden=”{{currentTab!==0}}"表示显示和隐藏的意思，当事件currentTab不等于0时，包含hidden的组件内容被隐藏，等于0时，显示内容。

wxss


page{ 
 display: flex;    //flex布局方式
 flex-direction: column;            //column：主轴为垂直方向，起点在上沿。
 height: 100%; 
} 
.navbar{ 
 flex: none;     //flex属性是flex-grow, flex-shrink 和 flex-basis的简写， none (0 0 auto)。
 display: flex; 
 background: #fff; 
} 
.navbar .item{ 
 position: relative;     /相对定位
 flex: auto;        //flex属性是flex-grow, flex-shrink 和 flex-basis的简写，auto (1 1 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: rgb(255, 0, 34); 
}

var app = getApp()
Page({
  data: {
    navbar: ['简介', '试看'],     /*可以添加多个item*/
    currentTab: 0                      /*初始显示的页面*/
  },
  navbarTap: function (e) {           /*上述中所说的触发事件*/
    this.setData({
      currentTab: e.currentTarget.dataset.idx       /*用来获取值，（不过还是有些不大清楚，能够解释的大佬们请帮忙讲讲，感谢~）*/
    })
  }
})

以上就是完整的顶部导航栏的代码，由于初次接触有很多不太明白的地方，可能也有理解错的地方，请多担待和指出，谢谢~

技术小白之记录微信小程序顶部导航栏

猜你喜欢