小程序中fixed定位元素和页面方法onPageScroll滚动效果优化

2020年08月06日 15:25 · 阅读 1573

前言

最近在做小程序的项目，发现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
    })
  }
},

总结

以上就是我的解决思路，可能这种细节有的时候会忽略，但是细节做好了，才能提升用户体验。源码地址在后面，大家可以自行下载。

github.com/lirongrong/…