1. 思路
實現(xiàn)這個效果的思路并不難，主要分為兩個部分
- 動態(tài)的獲取要設置圖釘元素距離頂部的距離
- 監(jiān)聽頁面滾動事件诵原，當頁面滾動的距離大于等于圖釘元素距離頂部的距離時挽放，給設置圖釘?shù)脑丶由弦粋€固定定位。
2. 動態(tài)獲取距離
我們都知道吗蚌，微信小程序和vue類似纯出，一般情況下是不需要直接獲取dom元素的，都是用數(shù)據控制視圖侮措。但是當前這個需求分扎，我們需要獲取到這個dom元素胧洒，并且找到他的scrollTop這樣一個值墨状，那么肾砂，經過閱讀了微信小程序的文檔之后宏悦，我們發(fā)現(xiàn)，SelectorQuery wx.createSelectorQuery()這樣一個api源葫，可以返回一個 SelectorQuery 對象實例砖瞧。
示例代碼：
const query = wx.createSelectorQuery()
query.select('#the-id').boundingClientRect()
query.selectViewport().scrollOffset()
query.exec(function(res){
res[0].top // #the-id節(jié)點的上邊界坐標
res[1].scrollTop // 顯示區(qū)域的豎直滾動位置
})
那么块促，在我們當前的這個需求中，一進入頁面就要獲取到我們要設置圖釘?shù)脑氐膕crollTop竭翠，所以，我們要在data中逃片，先定義一個值，然后在生命周期onload中呀狼，獲取這個值损离。
<script>
import wepy from 'wepy'
export default class Index extends wepy.page {
config = {
navigationBarTitleText: 'test'
}
data = {
affix: false,
offsetHeight: 0
}
computed = {
}
onPageScroll(e) {
console.log(e.scrollTop)
if (e.scrollTop > this.offsetHeight) {
this.affix = true
} else {
this.affix = false
}
this.$apply()
}
methods = {
}
getData() {
}
events = {}
onLoad() {
console.log(this)
var query = wepy.createSelectorQuery()
console.log(query)
query.select('#data').boundingClientRect()
query.exec((res) => {
this.offsetHeight = res[0].top
this.$apply()
// console.log(wepy)
// console.log(this.offsetHeight)
// console.log(this)
})
}
}
</script>
3. 根據判斷的結果僻澎，動態(tài)修改類
<style lang="less">
.affix {
width: 100%;
height: 100rpx;
background-color: #66ccff;
color: #fff;
}
.fix{
position: fixed;
top: 0;
}
</style>
<view class="{{affix?'affix fix':'affix'}}" id="data">
我是圖釘
</view>
4. 完整代碼
不見惹
image
