Swiper运用在苹果移动端的变暗bug修复

利用swiper2实现轮播图两侧显示前后屏的虚影 效果图: var mySwiper = new Swiper('.swiper-container',{ pagination: '.pagination', paginationClickable: true, autoplay:4000, loop:true, loopedSlides :2, loopAdditionalSlides : 2, //loo... 阅读详情

有时候我们在手机端制作全屏滑动的时候可以用到swiper这个插件,插件好用是好用,但是有的时候就会出现一些小bug,比如运用swipper之后苹果手机打开点击或者长按的时候就会变暗,这个时候我们需要用到一些属性控制他就可以使他不会变暗了,一下为css控制的代码:

* {
    outline: none;
    webkit-focus-ring-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

解释一下:

1、webkit-focus-ring-color是聚焦环颜色

 

2、-webkit-tap-highlight-color 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。

当用户点击iOS的Safari浏览器中的链接或JavaScript的可点击的元素时,覆盖显示的高亮颜色。

该属性可以只设置透明度。如果未设置透明度,iOS Safari使用默认的透明度。当透明度设为0,则会禁用此属性;当透明度设为1,元素在点击时不可见。

3、-webkit-touch-callout 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。

当你触摸并按住触摸目标时候,禁止或显示系统默认菜单。在iOS上,当你触摸并按住触摸的目标,比如一个链接,Safari浏览器将显示链接有关的系统默认菜单。这个属性可以让你禁用系统默认菜单。

微信小程序Webview深度解析:从原理到实战避坑指南 在移动端混合开发领域,Webview技术是实现原生应用与Web内容融合的关键桥梁。其核心原理在于通过原生组件容器加载并渲染H5页面,实现跨平台代码复用与动态内容承载。这项技术的核心价值在于平衡开发效率与用户体验,尤其在快速复用成熟H5业务、集成特定Web SDK等场景中具有不可替代性。然而,其通信机制、性能表现与平台限制也带来了显著的工程挑战。本文聚焦于微信小程序中的Webview组件,深入剖析其与H5页面的双向通信机制、性能优化策略及常见问题排查方案,旨在帮助开发者掌握在复杂业务场景下,如何高效、稳定地运 阅读详情

相关推荐

swiper轮播图息屏一段时间或快速滑动切换时出现疯狂抖动

gitHub代码下载:https://github.com/Syleapn/uni-app-swiper 以前做小程序项目的时候,没专门测试人员,都是开发者自测,可能我的手机性能比较不错(哈哈)或时机不对,总之没发掘到这个bug;近期做项目,测试了不同的手机,发现在一些手机上会出现这个bug,尤其是对于性能差的一些手机,出现的概率尤其的大。由于本次项目是基于uni-app的,直接就用uni-ap...

Syleapn的博客 5093

微信小程序开发中遇到的坑

微信小程序踩坑

qq_41687299的博客 1770

vue+swiper实现左右滑动内容区同时导航高亮

vue+swiper实现左右滑动内容区同时导航高亮 曾经碰了不少坑,在搞明白各种参数传递之后恍然大悟,主要是利用index索引在不同组件间传递,使二者产生联系。 附上实现效果图: 这里我主要是实现上方导航的点击跳转到相应的内容区以及滑动内容区上方导航高亮 实现的代码 首先创建好所需要的组件文件,然后在router中index.js引入相应的组件 因为我是基于首页home这个组件上做的,所以我...

hhxlin的博客 1449

Rollbar.js 分布式追踪实战教程:如何把前后端整条链路串成一条

浏览器报错、后端也报错,你常分不清这俩是不是同一次请求。本文以 Rollbar.js 分布式追踪(Tracing)为例,讲清怎么开启、怎么写 Span、traceId 如何贯穿整条链路,读完你能在几分钟内把一次请求的前后端错误串成一条线。 ## 👀 先看效果:一次请求的链路长什么样 用户点了“提交订单”,页面弹错,后端日志里也有一条异常,但没人能证明这两个错属于同一笔订单,排查全靠对着时间戳

gitblog_00786的博客 916

苹果CMS v10三端影视系统部署与实战指南

苹果CMS是基于ThinkPHP开发的主流PHP影视建站系统,其v10版本通过模板-逻辑-数据三层解耦实现高可维护性,支持PC、H5响应式及微信小程序三端统一内容分发。核心原理在于RESTful API网关对接、JSON采集规则驱动与Nginx+PHP7.4轻量栈高效协同,技术价值体现为快速部署(≤12分钟)、稳定采集(72小时无僵死)与首屏极速加载(≤1.8秒)。广泛应用于中小型影视网站搭建、广告变现站点及垂直内容平台,尤其适合需兼顾开发效率与长期运营可控性的技术团队。

weixin_32932149的博客 252

SafariSwiper:底物调整允许通过在工具栏上滑动来快速浏览Safari中的选项卡

SafariSwiper Cydia现在免费提供! Safari在最新版本的iOS中的选项卡切换器看起来很棒,但是它执行的所有动画都使切换选项卡变得不必要地缓慢。 SafariSwiper允许您通过简单地在工具栏上滑动即可在选项卡之间快速切换: 要获得更好的演示,请的。 用构建。 有关更新,请在Twitter 上关注我。

取消ScrollView滚动时的阴影

ICS之前版本: 在默认的情况下,使用ScrollView/HorizontalScrollView的时候,滑动的时候,在其边界的地方都有阴影。 通过设置属性fadingEdge为true可以取消该阴影及边框效果。 ? 1 android:fadingEdge="none"

JokAr 1210

DBSCAN聚类算法——机器学习(理论+图解+python代码)

一、前言 二、DBSCAN聚类算法 三、参数选择 四、DBSCAN算法迭代可视化展示 五、常用的评估方法:轮廓系数 六、用Python实现DBSCAN聚类算法 一、前言 去年学聚类算法的R语言的时候,有层次聚类、系统聚类、K-means聚类、K中心聚类,最后呢,被DBSCAN聚类算法迷上了,为什么呢,首先它可以发现任何形状的簇,其次我认为它的理论也是比较简单易懂的。今年在python...

huacha__的博客 20万+

swiper轮播图缩略图效果彩色到黑白的变化的解决方案

#thumbs .swiper-slide { opacity: 0.6; width: 25%; height: 40px; margin: auto 30px; cursor: pointer; filter: grayscale(100%); } #thumbs .swiper-slide-thumb-active { opacity: 1; filter: grayscale(0); } Done!

挖掘大数据价值,让决策者快速洞悉趋势,让大众读懂数据背后的故事。 843

Bellhop水声信道模型的仿真

Bellhop是一种基于射线追踪的水声信道模型,广泛用于预测水下环境中的声压场。它通过模拟声波在水中的传播路径,计算声场分布,适用于复杂的水下通信场景。

yt94832的博客 1315

Ubuntu 22.04下Colmap带CUDA支持的编译安装全攻略(附显卡架构查询指南)

本文详细指导在Ubuntu 22.04系统上从源码编译安装支持CUDA加速的Colmap,解决了官方版本无GPU支持导致处理速度慢的问题。重点包括环境依赖准备、CUDA工具链配置、显卡计算能力查询以及完整的编译安装步骤,旨在帮助研究者和开发者高效部署高性能三维重建工具。

gold8的专栏 344

h5项目各种小问题解决方案

判断iOS系统版本号 if(navigator.userAgent.match(/iphone/i)){ var verinfo = navigator.userAgent.match(/os [\d._]*/gi); version = (verinfo+"").replace(/[^0-9|_.]/ig,"").replace(/_/ig,".");//获取具体的系统版...

qq_35515563的博客 492

SAP采购订单中项目类别B(限制)的控制逻辑

在笔者所在企业中,框架类采购订单中项目类别需要选择B(限制)。今天笔者从比较全面的角度分析了一下这个项目类别B到底可以决定些什么?控制到什么?先从后台SPRO中打开相应的配置菜单。 打开项目类别B之后,可以看到一些配置信息,这里有一点与其它配置不同的地方,即无法新增项目,也无法修改现有项目。这个疑惑今后再去解决吧。当前只研究项目类别B的控制逻辑。 下面就参考上图中的配置分段来分析和测试其控制逻辑, 1、如项目类别配置图,所需材料值为不允许;经测试,如下图在采购订单创建时,不能输入物料编号条目。

专注SAP应用技术文章写作,致力于拉近用户与系统间的距离; 6032

swiper的基础使用(十七)

这次内容我们接着介绍在swiper页面的翻页动画--3D覆盖流效果。   首先搭建swiper页面,设置CSS样式,为了观看效果,这一章依然在slide当中添加背景图片。

never__ends的博客 924

BarTender破解版风险与低成本正版替代方案全解析

在工业自动化和企业信息化领域,标签打印与条形码技术是连接物理世界与数字系统的关键环节。其核心原理是通过软件驱动打印设备,将可变数据(如序列号、生产日期)与固定模板结合,生成可追溯的标识载体。这项技术的价值在于实现生产流程可视化、供应链管理精细化与质量控制自动化,广泛应用于仓储物流、制造执行、零售门店等场景。然而,软件授权合规性常成为企业成本控制的痛点,尤其面对BarTender这类行业标准工具时,部分用户可能寻求破解方案。但破解版软件通常采用内存补丁、伪造许可证等技术手段绕过验证,不仅存在法律风险,更会引发

weixin_32736961的博客 735

基于JAVA的GB28181实现之SIP服务核心组件解析

本文深入解析了基于JAVA的GB28181标准中SIP服务的核心组件实现,包括协议栈选择、消息处理引擎、事务管理器等关键技术点。通过实战案例分享海康威视、大华设备的特殊处理技巧,并提供性能优化和常见问题排查指南,帮助开发者高效构建稳定的视频监控系统。

weixin_30892037的博客 264

去除滑动阴影

当滑动控件ScrollView、ListView、ViewPager等滑动到最顶部或者最底部,再继续滑动的时候,会出现阴影,可以直接设置android:overScrollMode=”never”或在代码中setOverScrollMode(View.OVER_SCROLL_NEVER)去掉。...

qq_36487432的博客 469

60、拓扑码:从理论到应用

本博客深入探讨了拓扑码的基本理论、构造方法及其在量子计算中的应用。重点介绍了颜色码的拓扑起源、编码量子比特的计算方法、弦算子的构造与性质、边界条件的影响、同调描述以及与统计模型相关的错误阈值分析。同时,还涵盖了拓扑码的历史发展、与其他拓扑码的关系、与凝聚态系统的联系,以及其在激发态和高维中的表现。博客展示了拓扑码在容错量子计算和未来量子信息领域的广阔前景。

o1p2q3r的博客 129

总结一些谷歌新版本浏览器测试手机端swipe事件遇到的问题

最近使用谷歌新版本浏览器测试手机端swipe事件时碰到无效的效果, 原因是谷歌新版浏览器禁止了移动端的一些默认事件,具体解决方法如下: 1、改body加上css样式: body{touch-action:none;} 2.js加上如下代码: document.addEventListener(       'touchmove',       func

weixin_39495540的博客 2222

ROS2入门到精通—— ROS2实战专栏(实时更新)

Nav2专栏介绍

BigDavid123的博客 2370

温度PID控制PLC程序

温度PID稳定控制程序,适用于欧姆龙PLC,对其他PLC也具有很大参考价值

自定义图片:点击图片变暗的效果

效果图如下: 效果图1]效果图2]代码如下: import android.content.Context; import android.graphics.Bitmap; import...

heiyl的专栏 310

RU DOS版、EFI版32bit/64bit BIOS常用工具

DOS版、EFI版的RU工具,可用来查看IO、MEM、PCI、SMBIOS等资源。亲测在EFI SHELL下可用。

swiper轮播图切换指示点改变背景颜色

在前几天做h5移动端的时候,发现项目里有个轮播图切换,且指示点为文字背景颜色随着轮播图切换而改变,效果如下图: 多次百度未果决定自己写一下,下面是代码: <div class="swiper-card"> <div class="swiper-container swiper2" id="swiper-container-2"> <div class=...

Gengjinyue的博客 8322

华为的C语言编程规范.pdf

华为技术有限公司内部技术规范。本规范制定了编写C语言程序的基本原则、规则和建议。从代码的清晰、简洁、可测试、安全、程序效率、可移植各个方面对C语言编程作出了具体指导。

数学建模模型总结

这是本人在两年内准备参加数学建模竞赛搜集到的模型资料,已经经过了本人的筛选和整理,希望能够对准备参加数学建模竞赛的学弟学妹们提供一些帮助!

PC safari浏览器轮播异常

问题:PC轮播 ios浏览器离开页面一段时间后再回来,会飞速轮播 思路:监听是否离开当前浏览页面,离开就停止定时器,再回来就开启定时器 代码: //ios兼容,离开页面再回来,飞速轮播 var hidden, visibilityChange; if (typeof document.hidden !== "undefined") {     hidden = "hidden";     v...

李小暖的前端路 520

Swiper滑动Html5手机浏览器自适应

http://blog.youkuaiyun.com/dyyaries/article/details/46442187

sinat_33337475的博客 1311

Swiper页面背景高斯模糊与展示页面轮播

先看下效果 http://1.coverflow.applinzi.com/Swiper/demos/index.html (兼容各种浏览器 ) 这种动态的效果是用swiper的3D 覆盖流效果做的 参考 http://www.swiper.com.cn/demo/index.html 让背景图片变的模糊有几种办法 1 css 中加入-webkit-filter: blur(15px);

网络改变中国 3648

swiper导致图片文字变模糊

用swiper做pc端图片轮播。 但是图片里的文字会变得模糊。 解决方法: 1. roundLengths 设定为true将slide的宽和高取整(四舍五入)以防止某些分辨率的屏幕上文字或边界(border)模糊。 2. translate3d导致模糊 translate3d的值中出现了小数点,导致模糊。 f12可以看到中心位的transform有小数,将小数全部设置为整数。 我用的是swiper3版本的,设置中心图片的transform,f12可以看到中心位的类为: .swiper-slide.swi

qq_43654065的博客 2132
上一篇: 6种css3鼠标滑过动画效果
下一篇: AngularJS 模块
哈哈hyc
博客等级 码龄8年 131粉丝 87原创
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值