wxml:
<view class="tab-item {{top<block_2ScrollTop-60?'active':''}}" bindtap="toblock1">商品</view>
<view class="tab-item {{top>=block_2ScrollTop-60&&top<block_3ScrollTop-60?'active':''}}" bindtap="toblock2">评分</view>
<view class="tab-item {{top>=block_3ScrollTop-60?'active':''}}"bindtap="toblock3">详情</view>
<scroll-view style='height:{{winHeight}}' scroll-y="true" class="scoll-h" >
<block>
<view id='block_1'>
</view>
</block>
<block>
<view id='block_2'>
</view>
</block>
<block >
<view id='block_3'>
</view>
</block>
</scroll-view>
js:
var that = this;
// 高度自适应
wx.getSystemInfo({
success: function (res) {
var clientHeight = res.windowHeight,
clientWidth = res.windowWidth,
rpxR = 750 / clientWidth;
var calc = clientHeight * rpxR - 180;
that.setData({
winHeight: calc
});
}
});
var query = wx.createSelectorQuery()
query.select('#tab-con').boundingClientRect(function (res) {
that.setData({
tabScrollTop: res.top-60
})
}).exec()
query.select('#block_1').boundingClientRect(function (res) {
that.setData({
block_1ScrollTop: res.top
})
}).exec()
query.select('#block_2').boundingClientRect(function (res) {
that.setData({
block_2ScrollTop: res.top
})
}).exec()
query.select('#block_3').boundingClientRect(function (res) {
that.setData({
block_3ScrollTop: res.top
})
console.log(res.top)
}).exec()
onPageScroll: function (e) { // 获取滚动条当前位置
console.log(e)
this.setData({
top: e.scrollTop
})
if (e.scrollTop > this.data.tabScrollTop) {
this.setData({
tabFixed: true
})
console.log("我锁定了")
} else {
this.setData({
tabFixed: false
})
}
},
toblock1:function(){
wx.pageScrollTo({ scrollTop: this.data.block_1ScrollTop})
},
toblock2: function () {
wx.pageScrollTo({ scrollTop: this.data.block_2ScrollTop})
},
toblock3: function () {
wx.pageScrollTo({ scrollTop: this.data.block_3ScrollTop})
}
工作比较忙,只能提供一个思路了,有空再整理吧.......