微信小程序開(kāi)發(fā)--導(dǎo)航跟隨
|
最近開(kāi)發(fā)小程序的時(shí)候遇到這樣一個(gè)需求：如圖1
頁(yè)面向下滾動(dòng)到白色導(dǎo)航的位置時(shí)，白色導(dǎo)航固定到頁(yè)面最上方；當(dāng)頁(yè)面向上滾動(dòng)到白色導(dǎo)航時(shí)，白色導(dǎo)航恢復(fù)到原始位置；點(diǎn)擊各個(gè)導(dǎo)航，平滑的跳到相應(yīng)位置。
思路1: 1.給導(dǎo)航設(shè)置position: absolute; 頁(yè)面向下滾動(dòng)到白色導(dǎo)航的位置時(shí)，將給導(dǎo)航設(shè)置為position: fixed; 2.綁定小程序滾動(dòng)事件bindscroll，監(jiān)聽(tīng)滾動(dòng)距離； 代碼如下： wxml:
<scroll-view class="layout" bindscroll='layoutScroll' scroll-y="true" >
<view class='banner'>
<text>我是一個(gè)banner</text>
</view>
<!-- 導(dǎo)航開(kāi)始 -->
<view class='nav clearfix {{navFixed?"positionFixed":""}}'>
<view class='nav_row'>
<text>導(dǎo)航1</text>
</view>
<view class='nav_row'>
<text>導(dǎo)航2</text>
</view>
<view class='nav_row'>
<text>導(dǎo)航3</text>
</view>
<view class='nav_row'>
<text>導(dǎo)航4</text>
</view>
</view>
<!-- 導(dǎo)航結(jié)束 -->
<!-- 內(nèi)容開(kāi)始 -->
<view class='content content1'>
<text>我是內(nèi)容1</text>
</view>
<view class='content content2'>
<text>我是內(nèi)容2</text>
</view>
<view class='content content3'>
<text>我是內(nèi)容3</text>
</view>
<view class='content content4'>
<text>我是內(nèi)容4</text>
</view>
<!-- 內(nèi)容結(jié)束 -->
</scroll-view>
wxss：
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.positionFixed{
position: fixed;
left: 0;
top: 0;
}
page{
width: 100%;
height:100%;
}
.layout{
width: 100%;
height: 100%;
background: #eee;
}
.banner{
width: 100%;
height: 200px;
line-height: 200px;
background: #FFB11A ;
}
.banner text{
text-align: center;
display: block;
}
.nav{
width: 100%;
height: 45px;
line-height: 45px;
background: #fff;
}
.nav_row{
float: left;
width: 25%;
font-family: PingFangSC-Light;
font-size: 16px;
color: #333333;
}
.nav_row text{
text-align: center;
display: block;
}
.content {
width: 100%;
height: 200px;
font-family: PingFangSC-Light;
font-size: 16px;
color: #333333;
padding: 15px;
}
.content1{
background: #F5BBA4;
}
.content2{
background: #E9ED9A;
}
.content3{
background: #9DE59C;
}
.content4{
background: #98A5E2;
}
js：
Page({
data: {
scrollTop:'', //滑動(dòng)的距離
navFixed:false, //導(dǎo)航是否固定 },
//頁(yè)面滑動(dòng)
layoutScroll: function (e) {
this.data.scrollTop = this.data.scrollTop * 1 + e.detail.deltaY * 1;
console.log(this.data.scrollTop)
console.log(this.data.navFixed)
if (this.data.scrollTop <= -200){
this.setData({
navFixed:true
})
}else{
this.setData({
navFixed: false
})
}
}
})
這個(gè)代碼能基本實(shí)現(xiàn)需求，但是存在很大的弊端： 1.導(dǎo)航固定后，頁(yè)面卡頓一下 2.導(dǎo)航效果延遲較長(zhǎng)，用戶體驗(yàn)很差 總體來(lái)說(shuō)這種方案并不可取，所以進(jìn)行第二次迭代
思路2: 未完待續(xù)。。。
注意： 1.整個(gè)滑動(dòng)的頁(yè)面應(yīng)該寫(xiě)在scroll-view中； 2.scroll-view一定 |
