前言
最近在做小程序的项目，发现fixed定位的元素在用onPageScroll页面整个刷新的时候不会随着页面滚动，fixed元素固定死的，很影响用户体验。所以自己稍微优化了一下，下面是我的解决思路，文章是三毛钱的技术，权当整理记录吧。
修改之前和修改之后的对比图
解决思路
当你没思路的时候可以看看大神是怎么做的，有赞的小程序组件做的很完善，里面有个页面移动tab吸顶的效果，感觉和我要的效果类似，然后看源码，看到tab标签用了sticky这个属性吸顶的，如下图
如下图，源码中也是通过fixed来定位的，但是不是开始就设置这个属性，接着看。
下图中，当页面滚动的时候给个fixed属性，找到方法了，我也可以在滚动的时候再增加fixed属性，开始完善自己的功能。
解决方法
- .js 设置默认属性，页面滚动的时候设置fixed属性，所以先判断页面是否在滚动
data{
isScroll:false,
}
- .wxml，search用的组件是有赞的，可以看看官方文档是怎么引用的。大家看下面的置顶元素中的代码，当isScroll为true的时候设置了一个con_top的样式，.con_top就是fixed定位。当view变成fixed定位后，就会少掉原先的高度，所以下面加了层撑起高度的view,判断方法与之相反!isScroll； 还有个问题：我们置顶的元素不一定只有search,可能还有别的元素，所以高低确定不了，再写一个获取fixedBox高度的方法给到撑起的那个元素，页面才不会闪动。
<view>
//置顶元素开始
<view class="{{isScroll?'con_top':''}}" id="fixedBox">
<van-search value="{{ value }}" placeholder="请输入搜索关键词" />
//别的置顶元素
</view>
<view style="height:{{fixedHeight}}" hidden="{{!isScroll}}"></view>
//置顶元素结束
//列表开始
<view>
...
</view>
//列表结束
</view>
.con_top{
position: fixed;
top: 0;
z-index: 1;
left: 0;
right: 0;
}
- 获取fixedBox高度的方法如下
//获取顶部置顶框的高度
getFixedHeight:function(){
var that = this;
var query = wx.createSelectorQuery();
//选择id
query.select('#fixedBox').boundingClientRect()
query.exec(function (res) {
var height = res[0].height;
that.setData({
fixedHeight:height + 'px'
})
})
},
- 最后我们滚动的时候把isScroll设置为true就可以了,正好小程序page有页面滚动的方法onPageScroll，和H5对比，小程序开发太easy了，因为很多接口本身就写好了，不用我们自己写，也好也不好。
//页面滚动触发事件的处理函数
onPageScroll:function(e){
var scrollTop = e.scrollTop;
if(scrollTop >= 0){
this.setData({
isScroll:true
})
}else{
this.setData({
isScroll:false
})
}
},
总结
以上就是我的解决思路，可能这种细节有的时候会忽略，但是细节做好了，才能提升用户体验。源码地址在后面，大家可以自行下载。
