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

wxml:

< view class= "tab-item {{top bindtap= "toblock1">商品 view >

< view class= "tab-item {{top>=block_2ScrollTop-60&&top 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})

}

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