微信小程序实现navbar导航栏
一、效果图
二、涉及到组件
1.view组件
2.swiper组件
三、原理
整体来讲是比较简单的，顶部的navbar是使用flex进行布局的；下面的内容区域则是使用到swiper组件，使用方式比较简单，可以查看微信小程序的文档。
四、代码
wxml：
1 <view class="movie-container"> 2 <!-- 导航栏 --> 3 <view class="navbar"> 4 <block wx:for="{{navbarTitle}}" wx:key="index"> 5 <view class="navbar-item {{navbarActiveIndex === index ? 'navbar-item-active' : ''}}" data-navbar-index="{{index}}" catchtap="onNavBarTap"> 6 <text>{{item}}</text> 7 </view> 8 </block> 9 </view> 10 <view class="movie-content-wrapper"> 11 <swiper current="{{navbarActiveIndex}}" bindanimationfinish="onBindAnimationFinish"> 12 <swiper-item wx:for="{{navbarTitle}}" wx:key="index"> 13 <scroll-view scroll-y="{{true}}"> 14 {{item}} 15 </scroll-view> 16 </swiper-item> 17 </swiper> 18 </view> 19 </view>
wxss：
1 .movie-container{ 2 display: flex; 3 flex-direction: column; 4 } 5 .navbar{ 6 display: flex; 7 position: absolute; 8 left: 0; 9 top: 0; 10 z-index: 500; 11 width: 100%; 12 height: 50px; 13 flex-direction: row; 14 text-align: center; 15 color: #A8A8A8; 16 font-size: 15px; 17 box-sizing: border-box; 18 background-color: #FFF; 19 border-bottom: 1rpx solid #DFDFDF; 20 } 21 .navbar-item{ 22 flex: 1; 23 padding: 26rpx 0px; 24 } 25 .navbar-item-active{ 26 transition: all 0.3s; 27 border-bottom: 10rpx solid #494949; 28 color: #494949; 29 } 30 31 .movie-content-wrapper{ 32 padding-top: 50px; 33 }
js:
1 Page({ 2 3 /** 4 * 页面的初始数据 5 */ 6 data: { 7 navbarActiveIndex: 0, 8 navbarTitle: [ 9 "热映", 10 "Top250", 11 "口碑榜", 12 "新片榜" 13 ] 14 }, 15 16 /** 17 * 点击导航栏 18 */ 19 onNavBarTap: function (event) { 20 // 获取点击的navbar的index 21 let navbarTapIndex = event.currentTarget.dataset.navbarIndex 22 // 设置data属性中的navbarActiveIndex为当前点击的navbar 23 this.setData({ 24 navbarActiveIndex: navbarTapIndex 25 }) 26 }, 27 28 /** 29 * 30 */ 31 onBindAnimationFinish: function ({detail}) { 32 // 设置data属性中的navbarActiveIndex为当前点击的navbar 33 this.setData({ 34 navbarActiveIndex: detail.current 35 }) 36 } 37 })
代码比较简单，记录学习一下。
