【干货#011】小程序页面滚动实现广告条隐藏

缘起

小程序需要在手机狭小的屏幕中放入尽量多的内容，而老板想在在页面放个广告条，由于挤占了不然就不大的页面控件，对程序的功能操作又有较大的影响。如何兼顾两者的需求？

下面介绍一种默认显示页面首部广告条，但在用户上滚页面时隐藏广告条，而工具栏保持不动的方法。

方法

实现方法就是使用CSS的定位样式实现，默认使用相对定位relavtive方式，在页面上滚到隐藏广告条时，搜索框切换为使用固定定位fixed方式。

首先在页面视图WXML中添加广告条和搜索框组件，如下图所示，搜索框组件的position样式使用变量绑定。

在页面注册文件中绑定页面滚动触发事件的处理函数onPageScroll，如下图所示，在页面滚动位置超过广告条高度(100px)时，就切换定位方式。

结论

以上，就完成了小程序页面滚动实现广告条隐藏，此种方式的缺点是用户在滚动比较快时，工具栏的固定显示有迟滞现象。

更多实战干货，可查看：

小程序页面滚动实现广告条隐藏

细解小程序自适应单位rpx

小程序实现地址自动解析和导航

小程序"页面滚动"与"滚动视图区域"区别

小程序使用有赞ZanUI

更多常见错误，可查看：

解决 Page[pages/XXX/XXX] not found错误

解决"Failed to load image"错误

关注晓程序干货店，分享小程序开发干货知识

【干货#011】小程序页面滚动实现广告条隐藏相关推荐

IOS微信小程序页面滚动导致滚动穿透的解决办法
IOS微信小程序页面滚动导致滚动穿透的解决办法当微信小程序页面存在弹窗并且有可滚动的列表时,IOS默认的页面滚动会使弹窗滚动列表失焦,从而出现弹窗列表无法滚动的情况第一步第二步当微信小程序页面 ...
微信小程序页面滚动到指定位置
给需要滚到特定位置的元素或者组件添加一个id,通过这个id值可确定位置数据,具体代码如下: var that= this;var query = wx.createSelectorQuery().in ...
微信小程序页面上下滚动、左右滑动（二）
系列文章目录微信小程序页面上下滚动.左右滑动(一) 文章目录系列文章目录前言项目结构解决问题1 1.pretest页面 2.test页面解决问题2 总结参考前言在上一篇文章,讲解了再 ...
微信小程序页面竖向滚动逻辑
微信小程序页面竖向滚动逻辑 1.实现下面类似的数组注:下面这个生成的数组最好是整数,滑动的时候会失去精度的,要不然你永远会差一点,让你崩溃的.而且你永远不知道差在哪里. this.leftScrol ...
微信小程序 - 页面插入添加 Banner 广告超详细教程（支持自定义样式、位置、大小等）及注意事项
前言如果您需要点击弹出的广告,请访问: 微信小程序 - 页面插入广告(激励式广告). 本文将从 0-1 完成整个过程,您只需要按照步骤操作即可, 代码干净整洁注释详细,快速将代码移植到您的微信小程序 ...
微信小程序 - 页面插入广告（激励式广告）超详细教程
前言例如,李拴蛋在小程序观看付费电影,他没有钱支付,此时小程序开发者允许他通过观看一条广告,来获取观看资格. 小程序开发者通过植入广告,让用户观看广告来获得了收益, 本文将站在小白的角度,从 0 ...
微信小程序-通知滚动小提示
代码地址如下: http://www.demodashi.com/demo/14044.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
微信小程序+.NET(九) 小程序之简单的广告拦截
微信小程序之简单的广告拦截导语:我们在web-view内嵌网上的某些网站比如我内嵌的小说网站,会包含某些影响使用和含有诱导链接的垃圾广告,这时我们该怎么处理呢? 首先,要是自己写的网站,就可 ...
小程序也能接广告了，微信小程序广告位投放指南!
小程序也能接广告了,微信小程序广告位投放指南! 3月15日消息,据爆料,微信已经开始秘密测试在小程序中投放广告,并且流传出了一份<微信小程序广告位投放指引>,意味着微信小程序已经准备开启广 ...

【干货#011】小程序页面滚动实现广告条隐藏

缘起

方法

结论

【干货#011】小程序页面滚动实现广告条隐藏相关推荐

最新文章

热门文章