微信禁止下拉查看URL的处理方法

2024-09-29 23:11:08

场景：

微信下拉时可以查看到URL，本身是微信的一种安全策略之一，也是一种用户交互友好的体验；

效果原理：

微信下拉弹性效果其实是浏览器本身的一种特性，重点就是scroll值的一种体现；

处理策略：

1、直接禁止mobile端的touchmove事件；

这种策略一般适用页面只有一屏不需要下拉情况下使用；

var touch1 = function(){
  document.querySelector(‘body‘).addEventListener(‘touchmove‘, function (e) {
    e.preventDefault();
  });
}

弊端：对于大小不同的屏要考虑到内容一屏全部显示，不然2+屏的内容就没有办法看了；

2、禁止touchmove同时判断scroll的位置是否到达顶部；

考虑到下拉时滚动条是否到达顶部 <= 10 来禁止touchmove事件，同时考虑存在先上拉再下拉的情况所以监听的touchend事件并计算一次touch事件流中的最高点位置用以判断

var touch2 = function () {
  var lastY;//最后一次y坐标点
  var betterY;//每次touch最高点
  document.querySelector(‘body‘).addEventListener('touchstart', function(event) {
    lastY = event.originalEvent.changedTouches[0].clientY;
    betterY = lastY;
  });
  document.querySelector(‘body‘).addEventListener('touchmove', function(event) {
    var y = event.originalEvent.changedTouches[0].clientY;
    if(y > betterY){
      betterY = y;
    }
    var st = document.body.scrollTop; //滚动条高度
    if (y >= lastY && st <= 10) {
      lastY = y;
      event.preventDefault();
    }
    lastY = y;
  });
  document.querySelector(‘body‘).addEventListener('touchend', function(event) {
    var y = event.originalEvent.changedTouches[0].clientY;
    var st = document.body.scrollTop; //滚动条高度
    if(y < betterY && st <= 10){
      event.preventDefault();
    }
  });
}

弊端：第一次的touchmove存在漏洞问题，touchmove的过程中也存在漏洞

3、监听scroll的滚动事件，禁止高度<0；

每当滚动条的高度小于0时就重置为0，强制回退顶部位置

var touch3 = function () {
  window.onscroll = function () {
    var top = document.documentElement.scrollTop || document.body.scrollTop;
    if(top <= 0){
      document.body.scrollTop = 0;
    }
  }
}

弊端：会存在下拉URL闪屏的现象

总结：

可以考虑以上三种策略结合来使用会更好；也有些人把touchmove禁掉后自己模拟touchmove处理，也是可以做到的就是比较复杂而已；

以上所述是小编给大家介绍的微信禁止下拉查看URL的处理方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复

微信小程序下拉列表的实现实例代码

微信小程序下拉列表 wxml代码: <view class="phone_one" bindtap="clickPerson"> <view class="phone_personal">{{firstPerson}}</view> <image src="../../image/v6.png" class="personal_image {{selectArea ? 'r
微信小程序（六）：列表上拉加载下拉刷新示例

1.列表(本部分内容出入官方文档) 对于这个功能,微信小程序中并没有提供类似于Android中listview性质的控件,所以我们需要使用 wx:for 控制属性绑定一个数组,用数组中各项的数据重复渲染该组件,来达到列表的效果. <view wx:for="{{array}}"> {{index}}: {{item.message}} </view> Page({ data: { array: [{ message: 'foo', }, { message: '
详解微信小程序开发之下拉刷新上拉加载

微信小程序中的下拉刷新,上拉加载的功能很常见,目前我知道的有两种可行的方法,一是scroll-view,二是整个页面刷新.今天说说第一种,自己造轮子,难免有些瑕疵,日后慢慢完善. 上gif: 原理: scroll-view中有监听滑动的方法,这个跟Android类似.其中用到了滑动到顶部,滑动到底部的方法. 1.下拉刷新,在滑动到顶部时,bindscrolltoupper被调用,根据自己的业务逻辑请求即可.我的demo只是随机换了个关键字. 2.上拉加载,在滑动到底部时,bindscrollto
微信小程序下拉菜单的实现

微信小程序下拉菜单看下实现效果图: 实例: //wcss /**DropDownMenu**/ /*总菜单容器*/ .menu { display: block; height: 28px; position: relative; } /*一级菜单*/ .menu dt { font-size: 15px; float: left; /*hack*/ width: 33%; height: 38px; border-right: 1px solid #d2d2d2; border-botto
微信小程序下拉菜单简单实例

微信小程序下拉菜单简单实例 wcss /**DropDownMenu**/ /*总菜单容器*/ .menu { display: block; height: 28px; position: relative; } /*一级菜单*/ .menu dt { font-size: 15px; float: left; /*hack*/ width: 33%; height: 38px; border-right: 1px solid #d2d2d2; border-bottom: 1px sol
微信小程序 scroll-view实现上拉加载与下拉刷新的实例

微信小程序 scroll-view实现上拉加载与下拉刷新的实例实现效果图: 如图,使用小程序的scroll-view实现的上拉加载数据,下拉刷新数据,试下代码如下: js文件代码: var url = "http://192.168.30.4:8080/gtxcx/carrier/getCarrier.action"; var page = 1; var GetList = function (that) { that.setData({ hidden: false }); wx.r
微信小程序详解下拉加载与上拉刷新实现方法

微信小程序下拉刷新上拉加载的两种实现方法实现效果图: 方法一:onPullDownRefresh和onReachBottom方法实现小程序下拉加载和上拉刷新首先要在json文件里设置window属性属性类型描述 enablePullDownRefresh Boolean 是否开启下拉刷新,详见页面相关事件处理函数. 设置js里onPullDownRefresh和onReachBottom方法属性类
微信小程序列表的上拉加载和下拉刷新的实现

微信小程序可谓是9月21号之后最火的一个名词了,一经出现真是轰炸了整个开发人员,当然很多App开发人员有了一个担心,微信小程序的到来会不会让移动端App颠覆,让移动端的程序员失业,身为一个Android开发者我是不相信的,即使有,那也是需要个一两年的过度和打磨才能实现的吧. 不管微信小程序是否能颠覆当今的移动开发格局,我们都要积极向上的心态去接收,去学习.不排斥新技术,所以,心动不如行动,赶紧先搭建一个微信小程序开发工具.那么接下来就让我们来开始学习列表的上拉加载和下拉刷新的实现吧(通过聚合数据
微信禁止下拉查看URL的处理方法

场景: 微信下拉时可以查看到URL,本身是微信的一种安全策略之一,也是一种用户交互友好的体验: 效果原理: 微信下拉弹性效果其实是浏览器本身的一种特性,重点就是scroll值的一种体现: 处理策略: 1.直接禁止mobile端的touchmove事件: 这种策略一般适用页面只有一屏不需要下拉情况下使用: var touch1 = function(){ document.querySelector('body').addEventListener('touchmove', function (e
微信浏览器禁止页面下拉查看网址实例详解

微信浏览器禁止页面下拉查看网址实例详解此类事件是手机touchmove默认事件行为,可以通过js代码隐藏事件: $('body').on('touchmove', function (event) {event.preventDefault();}); or document.addEventListener('touchmove', function(e){e.preventDefault()}, false); 但这样往往会把页面原生的scroll效果也一同去掉了,下面的代码可以完美解决这
JavaScript禁止微信浏览器下拉回弹效果

本文实例为大家分享了JavaScript禁止微信浏览器下拉回弹的效果,供大家参考,具体内容如下方法1: <script type="text/javascript"> var overscroll = function(el){ el.addEventListener('touchstart', function(){ var top = el.scrollTop; var totalScroll = el.scrollHeight; var currentScroll
Android开发Popwindow仿微信右上角下拉菜单实例代码

先给大家看下效果图: MenuPopwindow: package com.cloudeye.android.cloudeye.view; import android.app.Activity; import android.content.Context; import android.graphics.drawable.ColorDrawable; import android.view.LayoutInflater; import android.view.View; import an
Android开发之禁止下拉通知栏的方法

本文实例讲述了Android开发之禁止下拉通知栏的方法.分享给大家供大家参考,具体如下: 1.在AndroidManifest.xml中添加权限 <uses-permission android:name="android.permission.EXPAND_STATUS_BAR"/> <uses-permission android:name="android.permission.STATUS_BAR"/> 2.在相应的activity中
微信浏览器下拉黑边解决方案 wScroollFix

这篇文章主要介绍了微信浏览器下拉黑边解决方案 wScroollFix,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下开始由于在开发微信页面的时候下拉黑边的情况很常见,有时候会比较影响体验,因此开发了wScrollFix库,用于隐藏微信下拉的黑边问题 npm地址 github地址什么是黑边相信很多在微信上面做网页开发的同学都会发现,当页面被划到顶部或者底部的时候,如果继续滑动,页面会被整个进行下滑,露出上面或者下面的黑底,黑底上面标明了当前
AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法

本文实例讲述了AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法.分享给大家供大家参考,具体如下: 1.分页加载数据的基础上,如何通过滚动加载,实现分页加载数据的效果,github上,针对AngularJS,有一款不错的插件,地址为:https://github.com/sroze/ngInfiniteScroll 2.下面来看官方给出的文档 (1)使用样例: <ANY infinite-scroll='{expression}' [infinite-scroll-di
Vue记住滚动条和实现下拉加载的完美方法

滚动条常见于移动端 App 在滚动点击进入的时候问题描述当我们在开发 web app 的时候,经常会遇到一个问题,就是当从一个可滚动的列表页进入到下一个详情页面,然后返回列表页面的时候,很难去还原滚动条的状态,无法记住进来时候的位置. 以前我尝试过很多方法: 有 vue-router 自带的 scrollBehavior,需要记住 scrollTop,然后还原,但是管理这个 scrollTop 显得很麻烦,有的时候还不容易取值还有使用纯 CSS 的方式,在列表页面放置一个 router-v
C#省份城市下拉框联动简单实现方法

本文实例讲述了C#省份城市下拉框联动简单实现方法.分享给大家供大家参考.具体分析如下: 复制代码代码如下: //定义字典 Dictionary<string, string> Address = new Dictionary<string, string>(); void loadData() { //这是你要添加的数据 //也可以选择动态添加但是考虑到数据不多不影响性能就这么做了 Address.Add("绵阳", "四川&quo
Android RecyclerView 上拉加载更多及下拉刷新功能的实现方法

RecyclerView 已经出来很久了,但是在项目中之前都使用的是ListView,最近新的项目上了都大量的使用了RecycleView.尤其是瀑布流的下拉刷新,网上吧啦吧啦没有合适的自己总结了一哈. 先贴图上来看看: 使用RecyclerView实现上拉加载更多和下拉刷新的功能我自己有两种方式: 1.使用系统自带的Android.support.v4.widget.SwipeRefreshLayout这个控价来实现. 2.自定义的里面带有RecyleView的控件. 使用RecycleVie

微信禁止下拉查看URL的处理方法

相关推荐

随机推荐