一、效果图
image
二、涉及到组件
1.view组件
2.swiper组件
三、原理
整体来讲是比较简单的，顶部的navbar是使用flex进行布局的；下面的内容区域则是使用到swiper组件，使用方式比较简单，可以查看微信小程序的文档。
四、代码
wxml：
<view class="movie-container">
<!-- 导航栏 -->
<view class="navbar">
<block wx:for="{{navbarTitle}}" wx:key="index">
<view class="navbar-item " data-navbar-index="{{index}}" catchtap="onNavBarTap">
<text>{{item}}</text>
</view>
<view class="line" style="width:{{100/navbarTitle.length}}%;transform:translateX({{100*navbarActiveIndex}}%);"></view>
</block>
</view>
<view class="movie-content-wrapper">
<swiper current="{{navbarActiveIndex}}" bindchange="onBindAnimationFinish">
<!-- 这里可以自定义组件，我为了方便直接for的数据 -->
<!-- 自定义组件 放在<scroll-view>里面代替 {{item}} -->
<swiper-item wx:for="{{navbarTitle}}" wx:key="index">
<scroll-view scroll-y="{{true}}">
{{item}}
</scroll-view>
</swiper-item>
</swiper>
</view>
</view>
wxss：
.movie-container{
display: flex;
flex-direction: column;
}
.navbar{
display: flex;
position: absolute;
left: 0;
top: 0;
z-index: 500;
width: 100%;
height: 50px;
flex-direction: row;
text-align: center;
color: #A8A8A8;
font-size: 15px;
box-sizing: border-box;
background-color: #FFF;
border-bottom: 1rpx solid #DFDFDF;
}
.navbar-item{
flex: 1;
padding: 26rpx 0px;
}
/* 下边框左右动画 */
.line{position: absolute;bottom: 0;left: 0;height: 4rpx;background: red;transition: all .3s ease-out .1s;}
.movie-content-wrapper{
padding-top: 50px;
}
JS:
Page({
/**
* 页面的初始数据
*/
data: {
navbarActiveIndex: 0,
navbarTitle: [
"商品",
"评论",
"商家"
]
},
/**
* 点击导航栏
*/
// 导航点击事件
onNavBarTap: function (event) {
// 获取点击的navbar的index
let navbarTapIndex = event.currentTarget.dataset.navbarIndex
// 设置data属性中的navbarActiveIndex为当前点击的navbar
this.setData({
navbarActiveIndex: navbarTapIndex
})
},
/**
*
*/
// 导航滑动事件
onBindAnimationFinish: function ({detail}) {
// 设置data属性中的navbarActiveIndex为当前点击的navbar
this.setData({
navbarActiveIndex: detail.current
})
}
})
本文完~，喜欢就点个赞呗。
