小程序实现锚点定位商品详情页

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})
}

 

 

 

工作比较忙,只能提供一个思路了,有空再整理吧.......

相关推荐
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页