在iOS平台上开发微信小程序时，经常会遇到滚动穿透的问题。这一问题通常发生于页面嵌套了多个滚动元素（例如，滚动视图和列表组件）时，导致用户在某些情况下无法正常滚动或事件传递出现异常。这不仅影响用户体验，同时也影响了小程序的功能性，使得开发者需要深入分析并解决这一问题。
### 问题背景
在移动设备上，用户往往会在多个场景下使用小程序，例如：
- **场景一**：用户在浏览商品时，滑动商品列表
最近在学习微信小程序，所以把一些重点给记录下来 废话不多说，先来一波效果图： gif动图太小了 这边再来几张图片 重点说明 本接口数据来源于玩Android开放api 地址：https://www.wanandroid.com/ 详细功能介绍： 上边是一个可滑动的横向分类栏 下面是点击分类栏切换到的界面以及下边可滑动改变当前页面数据，以及数据在请求数据时加载时间过长，所以将已加载过的数据进行本地化
转载
2024-01-05 14:39:09
115阅读
scroll-view 是一个可以滚动的视图区域的容器组件。一、重要属性 scroll-view 的滚动属性，实现了两套功能左右或上下滚动下拉更新1.1 与滚动有关的属性：
scroll-x 允许横向滚动
scroll-y 允许纵向滚动纵向滚动<scroll-view scroll-y style="height: 300rpx;">
<view id="demo1" clas
转载
2023-12-22 12:59:33
239阅读
# iOS小程序滚动穿透解析
## 什么是滚动穿透？
在开发iOS小程序时，常常会遇到“滚动穿透”这一问题。简单来说，当用户在某个视图（例如模态框或弹出层）中滚动时，如果该视图的滚动被正常处理，底层视图的滚动也会被触发。这种行为就被称为滚动穿透。
滚动穿透通常会导致用户体验不佳，例如，当用户想在弹出层中查看内容时，不小心滚动到了背景内容。为了提升用户体验，避免这种情况发生，我们需要采取一些措
hSwiper-wx小程序swiper组件使用此组件需要依赖小程序基础库 2.2.2 版本，同时依赖开发者工具的 npm 构建。具体详情可查阅官方 npm 文档。新版传送门，新版已经支持npm包安装旧版传送门，新版已经支持npm包安装演示水平垂直不循环功能支持水平，垂直滚动支持循环无缝滚动过渡位移效果支持自定义过渡位移时间支持自定义支持无限元素的滚动，而不会卡顿（未实现，待续...)安装npm i
转载
2023-11-04 06:37:58
84阅读
微信小程序滚动Tab选项卡：左右可滑动切换 最终效果如上。问题： 1、tab标题总共8个，所以一屏无法全部显示。 2、tab内容区左右滑动切换时，tab标题随即做标记（active）。 3、当active的标题不在当前屏显示时，要使其能显示到当前屏中。 一、wxml结构 tab标题因一排八个，所以使用 scroll-view组件，使其可横向滚动。 
转载
2024-10-08 16:33:58
70阅读
# 解决微信小程序 iOS 如何滚动的问题
在开发微信小程序时，我们经常会遇到需要实现滚动功能的情况，特别是在 iOS 设备上。在 iOS 设备上，由于系统的限制，有时候可能会出现滚动不流畅或者无法滚动的情况。下面我们就来介绍一种解决这个问题的方案。
## 方案概述
我们可以通过在小程序中使用一个特定的 CSS 样式来解决 iOS 设备上的滚动问题。这个样式可以让小程序在 iOS 设备上实现
原创
2024-03-15 05:21:16
157阅读
sourceMap是什么在前端开发过程中代码难免会有错误，即便是再小心，也有可能出现 Cannot read property 'xxx' of null 这样的低级失误，debug自然是家常便饭。如何使用chorme的控制台进行debug也有许多技巧，但本文的关注点不在此，不予讨论。在使用构建工具时，sourceMap相相信大多数人都见过，也知道webpack中的devtool参数可以配置打包生
转载
2024-07-19 09:50:31
94阅读
方案说明：方案1：整个页面滚动，滚动至某个位置fixed图中“顶部box2”,分页页面触底加载方案2：页面高度为屏幕高度，商品部分使用scroll-view，scroll-view初始高度为屏幕高度-顶部高度，只滚动scroll-view。 思路说明： 1 将整个页面分为上下两部分，整个页面高度100vh（原因1：scroll-view高度需要固定高度；原因2：出现两个滚动条） 2 页面上半
转载
2024-06-01 02:52:32
321阅读
简介小程序某项目中有个需求：用户进入聊天页，自动到最底部，发送（接收）新消息也到最底部。 由于本身是小程序，且有支持的方法了，所以没有采用计算内容的高度，通过设置 scroll-top 的值，达到效果的方法（代码 冗余没必要）。 小程序API中有scroll-view标签组件，该组件有个方法：scroll-into-view（值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方
转载
2024-01-27 20:21:45
1083阅读
侧边栏滑动是很常见的功能，但是小程序出来不久，很多特效还没有成熟案例，只能原生重写，所以今天为大家带来4个漂亮的侧边栏特效~~侧边栏特效一先看效果： wxml： <!--page/one/index.wxml-->
<view class="page">
<view class="page-bottom">
<vi
转载
2024-01-21 01:06:49
84阅读
先上案例最终效果： 案例实现功能：1.导航栏横向滚动效果2.当前元素有下划线标识3.点击元素，导航栏滚动到相应位置 以下将分步骤逐步完善陈述这些功能，最终会呈现所有代码 1.引用组件scroll-view，达到滚动效果万丈高楼平地起，首先要达到横向滚动的效果wxml<view>
<scroll-view scroll-x="true" enabl
转载
2023-08-29 18:42:11
290阅读
最近开发的一个小程序是用mpvue写的，UI框架用的是Vant。以下是总结：静态文件放在static文件夹下面是不会打包压缩的，所以在这个文件夹下面放的文件不宜太大，代码大小超过2M就必须分包了；mpvue的分包packageA不能建在和pages同级，同级的话vue文件编译不了wxml等文件，所以要建多个分包的时候，packageA等等都应该放在pages文件里面（父子文件夹）；Vant中的复选
前言小程序上线刷爆了朋友圈，但是最近渐渐消沉了，很少有动静！最近公司项目需要，体验了一下微信小程序，制作了几个功能，布局感觉很简单，但是交互和动画等写起来确实很费劲，主要是因为他不能操作DOM，只能修改数据！下面介绍一下我制作小程序完成的几个小的功能，希望能够给开发小程序的朋友带来帮助！ 滚动动画制作小程序制作回到顶部，或者滚动到某个位置，很简单，也有很多实现方法！ 例如： 1、动态改
转载
2023-08-23 23:14:27
241阅读
前言2021年的第一篇技术推文, 来源于昨天codeReview过程中发现的改进点.起源需求: 每次进入首页需判断该用户身份、若满足条件则弹窗、若不满足啥也不干.现状: 封装了用户身份组件, 具备身份判定、弹窗显示等逻辑, 调用方需在onShow时获取组件实例&调用实例方法;弊端: 调用方需在onShow时获取组件实例&调用实例方法、假设我有100个页面都需要引入该组件, 那么10
缘由昨天测试给我的小程序提了一个bug，说：‘我怎么滑动弹出后的这个列表后面的列表也会跟着滑动啊，这很奇快诶’，我：‘我修复一下’。造成问题的场景是一个数据列表页，通过触底上滑加载数据所以我把页面最外层的view加了一个min-height: '100vh'让这个列表可以自动增加高度进行扩容这个列表页有很多筛选条件或者说是筛选项，我做了一个有背景遮罩层的弹出组件，把这些筛选项塞进去，最外层的vie
在许多用户体验效果较好的微信小程序中，用户通过左右滑动界面也能实现页面的切换，方便了用户使用，那它们是如何实现的呢？ 解决方案： 标签页切换在图1中，顶部的 3 个标签页标题用 0 、 1 、 2 来表示，当前显示为标签页 0 。当用户向左滑动页面时，标签页 0 就会被划到左边的不可见区域，而标签页 1 被划入可见区域。如果用户在向右滑动页面，则标签页 1 被滑动到右边的不可见区域，标签页 0 被
转载
2023-09-20 09:19:26
197阅读
使用小程序的scroll-view组件实现列表页 scroll-view组件介绍scroll-view是微信小程序提供的可滚动视图组件,其主要作用是可以用来做手机端经常会看到的上拉加载下拉刷新列表页!下面就以<摇出微笑>为例来讲解一下这个组件的使用吧!为app导入新page页面首先需要为我们的小程序导入新的page页面,项目根目录打开app.json这个项目配置
转载
2024-05-10 12:57:21
319阅读
# 微信小程序 iOS 日期问题解析
在开发微信小程序时，开发者常会遇到日期和时间相关的问题，尤其是在 iOS 平台上。iOS 系统的日期处理逻辑与 Android、Web 等平台有所不同，给开发者带来了一定的困扰。本文将探讨 iOS 日期问题的起因，并给出解决方案和代码示例。
## iOS 日期问题的根源
iOS 平台使用 UTC（协调世界时）作为基础时间，而小程序的 `Date` 对象
# 微信小程序 iOS 拖拽问题的解决方案
微信小程序作为一种轻量级的应用形式，方便用户在移动设备上进行各种操作。在这些操作中，拖拽功能为用户提供了更加直观和灵活的交互体验。不过，在 iOS 设备上，开发者们时常会遇到一些拖拽功能的问题。本文将介绍这些问题的成因，并提供解决方案，以及如何实现拖拽功能的代码示例。同时，我们还将用 mermaid 语法中的 journey 来描述旅行的过程。
##
