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

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

}

 

 

 

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