一、效果圖
image
二扣孟、涉及到組件
1.view組件
2.swiper組件
三胆描、原理
整體來講是比較簡(jiǎn)單的，頂部的navbar是使用flex進(jìn)行布局的粗蔚；下面的內(nèi)容區(qū)域則是使用到swiper組件，使用方式比較簡(jiǎn)單饶火，可以查看微信小程序的文檔鹏控。
四、代碼
wxml：
<view class="movie-container">
<!-- 導(dǎo)航欄 -->
<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的數(shù)據(jù) -->
<!-- 自定義組件 放在<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;
}
/* 下邊框左右動(dòng)畫 */
.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({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
navbarActiveIndex: 0,
navbarTitle: [
"商品",
"評(píng)論",
"商家"
]
},
/**
* 點(diǎn)擊導(dǎo)航欄
*/
// 導(dǎo)航點(diǎn)擊事件
onNavBarTap: function (event) {
// 獲取點(diǎn)擊的navbar的index
let navbarTapIndex = event.currentTarget.dataset.navbarIndex
// 設(shè)置data屬性中的navbarActiveIndex為當(dāng)前點(diǎn)擊的navbar
this.setData({
navbarActiveIndex: navbarTapIndex
})
},
/**
*
*/
// 導(dǎo)航滑動(dòng)事件
onBindAnimationFinish: function ({detail}) {
// 設(shè)置data屬性中的navbarActiveIndex為當(dāng)前點(diǎn)擊的navbar
this.setData({
navbarActiveIndex: detail.current
})
}
})
本文完~当辐，喜歡就點(diǎn)個(gè)贊唄。
