小程序的导航写法及滑动后固定在头部, 直接看效果图
20180622_120652.gif
如果导航效果满足要求继续查看代码
- 前段代码这里是比较重要的
<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;">
这里可以监听滑动的距离 然后进行逻辑处理 主要逻辑是判断滑动位置后来处理导航的 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
})
}
},
//监听滑动
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可以动态获取其他的高度 然后修改这里值 */
/** 获取方法参考文档 */
/** scrollTop 在模拟器上检测不是太灵敏 可在真机上测试 基本上不会出现延迟问题 */
var navtopHeight = 192;
/** 方法2: detail.scrollTop */
if (-e.detail.scrollTop <= -navtopHeight) {
this.setData({
navFixed: true
})
} else {
this.setData({
navFixed: false
})
}
}
附上代码 git地址
以上代码自己完善后即刻达到效果图 方法不一欢迎讨论
