微信小程序实现头部_微信小程序特定区域滚动到顶部时固定的方法
2020-04-15 14:00:01  By: shinyuu

本文主要介绍了微信小程序--特定区域滚动到顶部时固定的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧!

小程序特定区域固定


如图所示,当页面滚动到导航条到达搜索栏下方时固定,向上滚动到导航条位置时又恢复原样。以下是代码展示:

1.wxml

<scroll-view style="width:100%;height: 100%;" scroll-y="true" bindscroll="scrollTopFun">
  <view class="{{top>130 ? ´topnav´ : ´´}}">
    <--这里写大于130,表示距离顶部130rpx时固定,可根据需要修改-->
    ...
  </view>
</scroll-view>


2.wxss

.topnav{
  position: fixed;
  top: 85rpx;
  z-index:99;
  background: #fff;
  width: 100%;
}


3.js

data = {
  top:0
}

//控制回到顶部按钮的显示与消失
scrollTopFun(e){
  let that = this;
  that.top = e.detail.scrollTop;
  that.$apply();
}


其实整个思路很简单, 小程序自带的组件scroll-view自带有属性bindscroll(滚动时触发)。通过这个属性获取浏览器滚动条距离顶部的位置,通过这个位置判断class类的显示就可以了。

以上所述是小编给大家介绍的微信小程序--特定区域滚动到顶部时固定的方法详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

若资源对你有帮助,浏览后有很大收获,不妨小额打赏我一下,你的鼓励是维持我不断写博客最大动力。

想获取DD博客最新代码,你可以扫描下方的二维码,关注DD博客微信公众号(ddblogs)。

或者你也可以关注我的新浪微博,了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)

如对资源有任何疑问或觉得仍然有很大的改善空间,可以对该博文进行评论,希望不吝赐教。

为保证及时回复,可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)

感谢你的访问,祝你生活愉快、工作顺心、欢迎常来逛逛。


猜你喜欢的

快速评论


技术评论

  • 该技术还没有评论、赶快抢沙发吧...
DD记账
top
+