第一张图是简单的tab切换第二张图用于可滑动的tab列表（tab比较多的时候，还想实现tab导航和内容联动的效果）2021.9.2 更1. 简单的tab切换：判断当前点击的下标(index)是否和激活(act)相等，相等就添加激活样式……1、 html<view>
<!-- tab栏切换动态改变激活样式 -->
<view class="nav">
转载
2024-01-10 15:54:42
655阅读
公司自己的项目案例需求： 导航栏初始为透明状态，字体为白色。在页面上滑到第一个元素触碰到导航栏的这个过程中，将导航栏渐变为白色背景，黑色字体实现思路： 首先原生的导航栏是肯定没办法满足需求的，只能使用自定义导航栏。我们想要使用自定义导航栏来实现这个需求则需要解决以下几个问题1、如何获取页面的滑动距离？2、如何获取页面第一
转载
2023-08-25 23:22:32
285阅读
# UniApp iOS滑动穿透的解决方案
在移动开发中，用户交互的流畅度是非常重要的。特别是在使用UniApp进行iOS应用开发时，滑动穿透现象是个值得关注的问题。滑动穿透指的是，当在某个层（如`modal`或`popup`）上进行滑动操作时，底层的页面也能接收到滑动事件，从而导致不必要的交互。
## 问题说明
在iOS设备中，当用户在某个滚动视图上执行滑动操作时，默认的行为会导致背后的界
滚动穿透问题 在做商城类项目时通常都会有商品分类这一项，而大部分的商品分类是由tab分页栏或下拉菜单实现的，咱家此次遇到的问题便是下拉菜单滚动滚动穿透问题。首先声明下定义滚动穿透：在页面本身具有滚动条且页面中含有可滚动元素的前提下，将可滚动元素的X或Y轴滚动到极限后若继续滑动将带动整体页面沿同方向滚动。如下图：&n
转载
2023-10-10 11:14:02
362阅读
# 解决iOS滑动穿透问题
在开发过程中，我们可能会遇到iOS上的滑动穿透问题，即在弹出层或侧边栏等滑动容器内，当内容超出容器高度时，滑动操作会穿透到底层页面，造成页面整体滑动的情况。这会影响用户体验并导致交互问题。在本文中，我们将介绍如何解决iOS滑动穿透问题，并提供代码示例。
## 问题分析
iOS上的滑动穿透问题是由于iOS的默认行为导致的。在iOS中，当一个容器内的内容滚动到顶部或底
原创
2024-03-28 07:34:49
221阅读
今天给Vue项目中加了一个第三方的滑动解锁组件，效果图稍后贴出，一般做这个的目的就是为了减少一些恶意注册、频繁登录等，虽说一般都需要后端的支持，只是前端做处理的话，并没有啥卵用。。不过总比没有好。组件的demo地址：https://www.ukobd2.com/wholesale/fvdi-j2534-diagnostic-interface-147.html实现后的效果如下图：(未解锁的情况)(
# 层级穿透滑动（Touch Propagation）在iOS中的实现
层级穿透滑动（Touch Propagation）是一个重要的交互概念，特别是在iOS等移动应用开发中。它指的是用户在触摸屏幕时，触摸事件能够穿越多个层级的视图，最终达到特定的目标。这种机制在多层级视图（Hierarchy）中非常常见，尤其是复杂的用户交互。
## 1. 什么是触摸事件传播？
在iOS中，触摸事件的传播遵
# iOS 滑动穿透 cs
在iOS开发中，我们经常会遇到这样的情况：当一个ScrollView或TableView位于一个父视图上，并且在ScrollView或TableView上有一个子视图，我们想要在子视图上进行滑动操作时，发现无法滑动，而是触发了父视图的滚动操作。这种情况被称为“滑动穿透”。
## 问题分析
滑动穿透问题的根本原因在于UIScrollView及其子类（例如UITabl
原创
2024-06-22 06:36:57
112阅读
# iOS 弹窗滑动穿透的实现与分析
在iOS应用开发中，我们常常需要实现各种弹窗，比如提示框、确认框等。然而，当我们在弹窗中进行滑动操作时，有时会遇到“滑动穿透”的问题：手势操作意外地传递给了底层的视图，导致底层视图也在响应触摸事件。
本文将通过理论讲解与代码示例，深入剖析如何处理弹窗中的滑动穿透问题，并实现自定义的弹窗组件。
## 滑动穿透的原因
在iOS中，用户交互是基于触摸事件的。
实现"iOS禁止滑动穿透"的流程如下：
| 步骤 | 描述 |
| ---- | ---- |
| 步骤一 | 监听滑动事件 |
| 步骤二 | 禁止滑动穿透 |
下面是每一步需要做的事情以及相应的代码：
### 步骤一：监听滑动事件
在iOS中，我们可以使用UIScrollViewDelegate来监听滑动事件。首先，你需要在你的视图控制器中遵循UIScrollViewDelegate协
原创
2024-01-25 05:16:06
117阅读
在移动端页面开发中，经常会去封装一个遮罩层（全屏弹窗）的组件，但是如果是固定定位的position：fixed；在弹出的时候会遇到一些小坑，之前搜索了一下，网上的博客也好评论也罢，总是有点缺陷或者累赘代码太多。就比如今天的主题，如何防止遮罩层（全屏弹窗）下方body内容继续滚动呢？ 移动端开发遮罩层（弹窗）防止滚动穿透完美解决方案首先，pc的肯定直接就给body设置一个overflow：
# UniApp iOS 滚动穿透实现指南
在开发移动应用时，特别是在 iOS 环境下，常常会遇到“滚动穿透”的需求。滚动穿透意味着在一个滚动元素（如弹出层、模态框等）上进行滚动时，能够滚动到背后的内容。Imagine this situation: you have a modal that you want to show content above the background. When
直奔主题，这两天我负责开发的app内容遇到了一个问题：弹框底层页面还是能滑动问题（在Android和ios12系统一下是正常的，ios高版本可滑动）也就是我们所说的滑动穿透事件 我遇到的两种情况：第一种：如图（当弹框中内容不需要滑动）遇到这种情况网上一顿找，看看是什么原因造成的。说简单点就是滑动穿透事件造成滑动穿透事件：
转载
2023-07-17 16:29:06
963阅读
# 修复 UniApp 在 iOS 16 上出现白屏的问题
在开发使用 UniApp 的项目时，遇到在 iOS 16 上出现白屏的问题并不少见。这种情况可能会让刚入行的开发者感到困惑，但通过一系列系统的排查与处理，我们可以找出问题并解决它。以下是一个详细的指南，希望对你有所帮助。
## 整体流程
在开始深入代码之前，我们先来看看整个问题排查的基本步骤。以下是处理流程的表格：
```mark
原创
2024-10-10 06:57:34
265阅读
一 什么是上拉触底上拉触底是移动端的专有名词，通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为。二 监听页面的上拉触底事件在页面的 .js 文件中，通过 onReachBottom() 函数即可监听当前页面的上拉触底事件。示例代码如下。/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
console.log('触发了上拉触底的事件
<template>
<view class="page-body" :style="'height:' + height + 'px'">
<scroll-view class="nav-left" scroll-y :style="'height:' + height + 'px'" :scroll-top="scrollLeftTop" scroll-wi
转载
2023-12-10 02:29:03
86阅读
# iOS 弹出层滑动穿透的实现指南
在iOS开发中，弹出层（Modal View）是用户与应用交互的重要方式。为了提升用户体验，有时候我们需要实现弹出层中的滑动穿透效果，使得用户在弹出层上滑动时可以同时影响到后面的视图。本文将详细讲解如何实现这一效果，适合刚入行的小白开发者。
## 1. 流程概述
我们将通过以下步骤来实现弹出层滑动穿透：
| 步骤 | 说明
ios弹框滑动穿透的描述
在开发iOS应用的过程中，我们常常会遇到“弹框滑动穿透”的问题。这个问题通常发生在用户触摸屏幕并试图在弹框上滑动时，滑动的手势可能会穿透到弹框后面的视图，导致用户无法正常与弹框交互。在许多情况下，这可能会影响到用户体验，导致用户面对不必要的错误操作，从而影响应用的整体可用性。
## 问题背景
在现代移动应用中，用户在进行操作时经常需要弹出提示框（例如，确认框或警告框
属性名类型默认值说明平台差异说明scroll-xBooleanfalse允许横向滚动scroll-yBooleanfalse允许纵向滚动upper-thresholdNumber50距顶部/左边多远时（单位px），触发 scrolltoupper 事件lower-thresholdNumber50距底部/右边多远时（单位px），触发 scrolltolower 事件scroll-topNumber
# UniApp 在 iOS 中实现滑动返回功能
## 引言
在移动应用程序开发中，用户体验至关重要。滑动返回功能是现代移动应用中常用的一种交互方式，特别是在 iOS 设备上。本文将介绍如何在 UniApp 中实现这一功能，同时提供相关的代码示例和说明。
## UniApp 概述
UniApp 是一个使用 Vue.js 开发的跨平台前端框架，能够同时适配微信小程序、H5、App 等多个平台。虽
