微信浏览器下拉黑边解决方案 wScroollFix

这篇文章主要介绍了微信浏览器下拉黑边解决方案 wScroollFix,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

开始

由于在开发微信页面的时候下拉黑边的情况很常见，有时候会比较影响体验，因此开发了wScrollFix库，用于隐藏微信下拉的黑边问题

npm地址
github地址

什么是黑边

相信很多在微信上面做网页开发的同学都会发现，当页面被划到顶部或者底部的时候，如果继续滑动，页面会被整个进行下滑，露出上面或者下面的黑底，黑底上面标明了当前访问页面的域名信息，黑边的作用也很明显，由于在微信内浏览器并没有像传统浏览器地址栏那样子的设计，为了在一定程度上面防止钓鱼网站，所以通过下拉显示域名信息，如下图

什么情况下会出现黑边

现象就像上面所说的，如果到了元素的滚动边缘，即元素的scrollTop为0之后继续下滑，或者是到滚动到底部的时候，继续操作就会出现以上的黑边情况。

情况分析

上面我们分析了在微信浏览器中出现黑边的情况，接下去我们聊一聊如何解决，
根据以上的思路，可以分为以下几种情况去解决

对于不需要滚动的页面，我们可以直接将body元素的 touch事件直接preventDefault掉，这样子页面根元素就不会对页面有滚动事件的响应了

第二种情况是页面中有滚动的元素，那么应用于情况1的解决方法就不能用了，用了之后会使得整个页面的滚动失效，因此只能另辟蹊径，回想下我们刚才的黑边的出现情况，在scrollTop为0的时候，继续操作会使得浏览器出现黑边，因此我们可以让滚动的顶部不要到达scrollTop <= 0，还有底部不要到达，这样子上划下划到极限都不会出现黑边了

第三种情况是第二种情况的特殊情况，就是当列表不是静态的，而是动态加载的时候，某些操作，比如在列表加载之前滑动，或者是加载完之后默认的scrollTop为0还继续向上滑动时，可能就会出现黑边

解决方案

对于我封装的wScrollFix库，主要解决的是上面说的情况2和情况3，情况1直接按照上面的做法对touch事件进行绑定就行了
下面我说下解决情况2的方法：代码如下

可以看到这个方法接受一个参数，用于将获取滚动的容器元素，首先将scrollTop设置成1，然后在touchstart,scroll,touchmove事件对页面元素滚动进行检测，确保scrollTop在1和底部高度减1之间，这样子就不会出现黑边

对于情况3，其实就是要在动态列表插入之后能够，能够将scrollTop改成1，这边我用了MutationObserver方案，代码如下：

代码使用了防抖防止插入多次频繁回调，回调的部分的逻辑也比较简单，就是将scrollTop变成1

wScrollFix

封装的wScrollFix使用很简单，可以通过npm i wscrollfix直接进行模块引入，也可以在github直接进行下载引入./dist/wScrollFix.js, 会向全局暴露wScrollFix方法。

使用方法就是把容器元素对象或者选择器作为参数调用wScrollFix,如果有情况3的出现，需要再传一个true，即 wScrollFix(el,true)

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 微信小程序iOS下拉白屏晃动问题解决方案

    这篇文章主要介绍了微信小程序iOS下拉白屏晃动问题解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 问题 感觉ios的小程序每个页面都可以下拉出现白屏 有时页面带有滑动的属性会跟着晃动,体验不是很好 解决办法: 先禁止页面下拉 <config> { navigationBarTitleText: "购物车", disableScroll:true } </config> 这样的话页面整个都拉不动了,下面溢

  • 微信小程序 iPhoneX底部安全区域（底部小黑条）适配(一分钟解决)

    iPhone X   对于微信小程序的tabbar来说,会被底部小黑条覆盖,需要处理,大概思路是,得到手机型号.分别判断样式,即可,如下: 安全区域指的是内容可见区域(图中蓝色部分): 处理前后效果图: 步骤: 1.在app.js的onLaunch函数内调用wx.getSystemInfo,获得手机型号(res.model),并存储为全局变量: onLaunch: function() { let _self = this; wx.getSystemInfo({ success: res =>

  • 微信小程序 select 下拉框组件功能

    微信小程序 select 下拉框组件功能

    一.源码地址 https://github.com/imxiaoer/WeChatMiniSelect 二.效果图 录屏图片质量较差,所以大家会看到残影(捂脸) 三.组件源码 1. select.wxml <view class="select-box"> <view class="select-current" catchtap="openClose"> <text class="current-name

  • 微信小程序下拉加载和上拉刷新两种实现方法详解

    方法一:onPullDownRefresh和onReachBottom方法实现小程序下拉加载和上拉刷新 首先要在json文件里设置window属性 设置js里onPullDownRefresh和onReachBottom方法 下拉加载说明: 当处理完数据刷新后,wx.stopPullDownRefresh可以停止当前页面的下拉刷新. onPullDownRefresh(){ console.log('--------下拉刷新-------') wx.showNavigationBarLoadin

  • 黑科技 Python脚本帮你找出微信上删除你好友的人

    黑科技 Python脚本帮你找出微信上删除你好友的人

    相信大家在微信上一定被上面的这段话刷过屏,群发消息应该算是微信上流传最广的找到删除好友的方法了.但群发消息不仅仅会把通讯录里面所有的好友骚扰一遍,而且你还得挨个删除好几百个聊天记录,回复大家的疑问和鄙视.作为一个互联网从业者,除了群发消息就不能有更高效.不打扰好友的方式么? 答案是当然有,微信在拉好友进群聊的时候,如果这个人删除了你好友的话,会提示你一下「请先发送朋友验证申请给某某,对方将你加为微信朋友后,你才能邀请其加入群聊.」有办法了,那我把微信好友拉一个大群里面,然后默默的删掉微信群不就好

  • 微信小程序下拉框搜索功能的实现方法

    微信小程序下拉框搜索功能的实现方法

    最近在做一个项目的时候,需要用到下拉框搜索,网上搜了半天没找到想要的,决心自己动手写一个. 首先看下效果图: 左边是输入框,可以进行模糊查询,右边图标进行选择. 代码部分,我定义了五个参数,和一个自定义的方法, list:下拉框数组, _width:组件宽度, _height:组件高度, bind:action: 自定义方法 考虑到每个人用的时候用的对象数组结构不同我预留了两个字段,做自定义(可不写),怎么样是不是很强大. actualvalue:下拉框实际值, showvalue:下拉框显示值

  • 微信小程序 下拉刷新及上拉加载原理解析

    这篇文章主要介绍了微信小程序 下拉刷新及上拉加载实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.下拉刷新的概念及应用场景. 概念: 下拉刷新是移动端更新列表数据的交互行为,用户通过手指在屏幕上子上而下的滑动,可以触发页面的下拉刷新,更新列表数据. 应用场景: 在移动端,数据列表是常见的页面效果,更新列表数据是最基本的页面需求,相比于按钮刷新,定时刷新来说,下拉刷新的用户体验方便友好,已经成为移动端刷新列表数据的最佳解决方案. 微信小

  • 微信小程序实现下拉刷新动画

    微信小程序实现下拉刷新动画

    微信小程序动画之下拉刷新动画的具体代码,供大家参考,具体内容如下 简易的效果 下面放代码: js: var animation = wx.createAnimation({}) var i = 1; Page({ data: { donghua: true, left1: Math.floor(Math.random() * 250 + 1), left2: Math.floor(Math.random() * 250 + 1), left3: Math.floor(Math.random()

  • 微信小程序实现下拉框功能

    微信小程序实现下拉框功能

    微信小程序里没有和HTML里的下拉框一样的组件,想要相同的效果只能自己写一个,先看效果 下面来看一下代码: 首先WXML <view class='select_box'> <view class='select' catchtap='selectTap'> <text class='select_text'>{{selectData[index]}}</text> <image class='select_img {{show&&&q

  • Android实现屏蔽微信拉黑和删除联系人功能示例

    Android实现屏蔽微信拉黑和删除联系人功能示例

    Android实现屏蔽微信拉黑和删除联系人功能,废话不多说,具体如下: 实现效果: 让微信永远弹不出那个删除的对话框不就相当于屏蔽掉该功能了吗?哈哈效果如图: 实现原理: 1.我们知道,其实微信每次删除联系人都会弹出此页面 2.如果你对AccessibilityService有过了解或者有看过我之前的两篇博客,你会知道,其实每次弹出这个框,都会触发AccessibilityEvent.TYPE_WINDOW_STATE_CHANGED这个事件,所以我们只要在每次触发该事件的时候进行判断当前页面是

随机推荐