小程序的導航寫法及滑動后固定在頭部, 直接看效果圖
20180622_120652.gif
如果導航效果滿足要求繼續(xù)查看代碼
- 前段代碼這里是比較重要的
<scroll-view scroll-x="true" class="nav {{navFixed? 'positionFixed':''}}" scroll-left="{{navScrollLeft}}" scroll-with-animation="{{true}}">
<block wx:for="{{navData}}" wx:for-index="idx" wx:for-item="navItem" wx:key="idx">
<view class="nav-item {{currentNavTab == idx ?'active':''}}" data-current="{{idx}}" bindtap="switchNav">{{navItem.text}}</view>
</block>
</scroll-view>
- 前段整體布局要使用scroll-view
<scroll-view class="layout" bindscroll='layoutScroll' scroll-y="true" style="height: {{windowHeight}}px;">
這里可以監(jiān)聽滑動的距離 然后進行邏輯處理 主要邏輯是判斷滑動位置后來處理導航的 class 這個class 就是定位屬性
.positionFixed{
position: fixed;
left: 0;
top: 0;
}
- data配置信息看好
data: {
adData: ['http://pic.qiantucdn.com/58pic/17/70/72/02U58PICKVg_1024.jpg', 'http://pic2.ooopic.com/12/09/64/46bOOOPICf5_1024.jpg'],
navData: [
{
text: '首頁'
},
{
text: '健康'
},
{
text: '情感'
},
{
text: '職場'
},
{
text: '育兒'
},
{
text: '糾紛'
},
{
text: '青蔥'
},
{
text: '上課'
},
{
text: '下課'
}
],
currentNavTab: 0,
scrollTop: '', //滑動的距離
navFixed: false, //導航是否固定
- onLoad 方法獲取寬高
wx.getSystemInfo({
success: (res) => {
this.setData({
pixelRatio: res.pixelRatio,
windowHeight: res.windowHeight,
windowWidth: res.windowWidth
})
},
})
- js主要事件
//導航點擊
switchNav(event) {
var cur = event.currentTarget.dataset.current;
//每個tab選項寬度占1/5
var singleNavWidth = this.data.windowWidth / 5;
//tab選項居中
this.setData({
navScrollLeft: (cur - 2) * singleNavWidth
})
if (this.data.currentNavTab == cur) {
return false;
} else {
this.setData({
currentNavTab: cur
})
}
},
//監(jiān)聽滑動
layoutScroll: function (e) {
/** 1. 利用 e.detail.deltaY 已放棄 */
//this.data.scrollTop = this.data.scrollTop * 1 + e.detail.deltaY * 1;
// const query = wx.createSelectorQuery();
// query.select('.nav').boundingClientRect();
// query.selectViewport().scrollOffset();
// query.exec(function (res) {
// });
/** 我這里寫了固定值 如果使用rpx 可用query可以動態(tài)獲取其他的高度 然后修改這里值 */
/** 獲取方法參考文檔 */
/** scrollTop 在模擬器上檢測不是太靈敏 可在真機上測試 基本上不會出現延遲問題 */
var navtopHeight = 192;
/** 方法2: detail.scrollTop */
if (-e.detail.scrollTop <= -navtopHeight) {
this.setData({
navFixed: true
})
} else {
this.setData({
navFixed: false
})
}
}
附上代碼 git地址
以上代碼自己完善后即刻達到效果圖 方法不一歡迎討論
