【移動(dòng)應(yīng)用開(kāi)發(fā)技術(shù)】小程序中怎么實(shí)現(xiàn)頂部tab切換以及滑動(dòng)切換時(shí)導(dǎo)航欄會(huì)隨著移動(dòng)的效果

【移動(dòng)應(yīng)用開(kāi)發(fā)技術(shù)】小程序中怎么實(shí)現(xiàn)頂部tab切換以及滑動(dòng)切換時(shí)導(dǎo)航欄會(huì)隨著移動(dòng)的效果

這篇文章給大家分享的是有關(guān)小程序中怎么實(shí)現(xiàn)頂部tab切換以及滑動(dòng)切換時(shí)導(dǎo)航欄會(huì)隨著移動(dòng)的效果的內(nèi)容。在下覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨在下過(guò)來(lái)看看吧。實(shí)現(xiàn)的效果：js:Page({

data:

{

//

tab切換

currentTab:

0,

},

swichNav:

function

(e)

{

console.log(e);

var

that

=

this;

if

(this.data.currentTab

===

e.target.dataset.current)

{

return

false;

}

else

{

that.setData({

currentTab:

e.target.dataset.current,

})

}

},

swiperChange:

function

(e)

{

console.log(e);

this.setData({

currentTab:

e.detail.current,

})

},

onLoad:

function

(options)

{

//

生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載

},

onReady:

function

()

{

//

生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面初次渲染完成

},

onShow:

function

()

{

//

生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示

},

onHide:

function

()

{

//

生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面隱藏

},

onUnload:

function

()

{

//

生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面卸載

},

onPullDownRefresh:

function

()

{

//

頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽(tīng)用戶下拉動(dòng)作

},

onReachBottom:

function

()

{

//

頁(yè)面上拉觸底事件的處理函數(shù)

},

onShareAppMessage:

function

()

{

//

用戶點(diǎn)擊右上角分享

return

{

title:

'title',

//

分享標(biāo)題

desc:

'desc',

//

分享描述

path:

'path'

//

分享路徑

}

}

})wxml:<view

class="page">

<!--頂部導(dǎo)航欄-->

<view

class="swiper-tab">

<view

class="tab-item

{{currentTab==0

?

'on'

:

''}}"

data-current="0"

bindtap="swichNav">Tab1</view>

<view

class="tab-item

{{currentTab==1

?

'on'

:

''}}"

data-current="1"

bindtap="swichNav">Tab2</view>

<view

class="tab-item

{{currentTab==2

?

'on'

:

''}}"

data-current="2"

bindtap="swichNav">Tab3</view>

</view>

<!--內(nèi)容主體-->

<swiper

class="swiper"

current="{{currentTab}}"

duration="200"

bindchange="swiperChange">

<swiper-item>

<view>我是tab1</view>

</swiper-item>

<swiper-item>

<view>我是tab2</view>

</swiper-item>

<swiper-item>

<view>我是tab3</view>

</swiper-item>

</swiper>

</view>wxss:.page

{

margin-left:

10rpx;

margin-right:

10rpx;

}

.swiper-tab

{

display:

flex;

flex-direction:

row;

line-height:

80rpx;

border-bottom:

2rpx

solid

#777;

}

.tab-item

{

width:

33.3%;

text-align:

center;

font-size:

15px;

color:

#777;

}

.swiper

{

height:

1100px;

background:

#dfdfdf;

}

.on

{

color:

blue;

border-bottom:

5rpx

so