1. 思路
实现这个效果的思路并不难，主要分为两个部分
- 动态的获取要设置图钉元素距离顶部的距离
- 监听页面滚动事件，当页面滚动的距离大于等于图钉元素距离顶部的距离时，给设置图钉的元素加上一个固定定位。
2. 动态获取距离
我们都知道，微信小程序和vue类似，一般情况下是不需要直接获取dom元素的，都是用数据控制视图。但是当前这个需求，我们需要获取到这个dom元素，并且找到他的scrollTop这样一个值，那么，经过阅读了微信小程序的文档之后，我们发现，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节点的上边界坐标
res[1].scrollTop // 显示区域的竖直滚动位置
})
那么，在我们当前的这个需求中，一进入页面就要获取到我们要设置图钉的元素的scrollTop，所以，我们要在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. 根据判断的结果，动态修改类
<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
