Taro小程序引用ScrollView组件注意点

原创 已于 2022-02-16 16:33:57 修改 · 2k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#小程序 #javascript #前端

于 2022-02-16 16:30:10 首次发布

不同页面引用的ScrollView组件的scrollIntoView属性设置的值必须不一样，否则ScrollView组件里引用的click方法会被污染。

例如：

  • 前提条件：A页面（Tabbar页）和B页面（非Tabbar页）都引用了ScrollView组件，scrollIntoView属性设置的值都一样。
  • 造成结果：从A页面跳转到B页面，再从B页面返回A页面，此时B页面已被卸载，但是触发A页面ScrollView组件里调用的click方法时，发现实际上触发的是B页面ScrollView组件里调用的click方法。A页面的click方法被污染，好神奇的bug。。。

在这里插入图片描述

小程序锚点 使用ScrollView和pageScrollTo
weixin_55652851的博客
10-31 2561
小程序锚点 使用ScrollView和pageScrollTo
小程序使用scroll-view时无法触发 onPullDownRefresh，自定义下拉刷新
jinxi1112的博客
09-16 3076
心路历程：小程序底栏采用了fixed定位，导致页面滚动时ios手机出现底栏闪动，为了解决这个问题，将page滚动改为scroll-view，从而引发了下拉刷新失效，因为页面需要监控scroll滚动，不得已需要舍弃onPullDownRefresh，自定义了一个比较简单的下拉刷新，效果图如下：下拉松手0.5s后刷新并回弹。 tempalte：将刷新代码放入scroll-view，loading动画我采用了vant组件，这个可以自己随意发挥 <scroll-view scrol
taro 滚动组件ScrollView
热门推荐
weixin_43294560的博客
09-25 1万+
1、使用 import { ScrollView } from '@tarojs/components' <ScrollView className='scrollview' scrollY 指定滑动方向 scrollWithAnimation 开启滑动动画 enableBackToTop 点击顶部标题栏滑动到顶部 scrollTop={n} 设置竖向滚动条位置 scrollLeft={n} 设置横向滚动条位置
taro（小程序一样） ScrollView 滚动到底部或者顶部 再次设置scrollIntoView 无效
zw19940808的博客
11-19 4605
小程序 ScrollView 滚动到底部或者顶部 再次设置scrollIntoView 无效
scrollIntoView()
m0_49471668的博客
09-20 454
scrollIntoView()方法将调用它的元素滚动到浏览器窗口的可见区域。
scrollIntoView()函数
nhy520
09-02 444
通常如果我们在页面的底部，想滚动到页面的顶部，可以在顶部设置一个锚点。 现在有scrollIntoView()这个函数，可以直接跳转过去。 例如： 在页面的顶部设置标签&lt;a id="a1"&gt;&lt;/a&gt; 然后可以在页面底部这样写&lt;a href="javascript:a1.scrollIntoView()"&gt;跳到首页&lt;/a&gt; ...
Taro 中在Tab组件中使用ScrollView滚动组件，滚动时把Tab标题顶走了。（支付宝小程序）
weixin_46662539的博客
11-03 1979
今天在使用Taro框架写小程序的时候，需要咨询页面，如下图展示 整体布局就是在Tab组件中使用ScrollView滚动组件，滚动到底部进行加载下一页。 很简单的一个页面，在微信、字节、百度都没有问题，在编译成支付宝小程序后， （真机）发现在滚动的时候，会把顶部的Tab标题顶上去， 仔细研究发现在在这个页面出现了两个滚动条，一个是ScrollView的。另一个是Tab组件的，在每次滚动的时候可能会触发到Tab页面的滚动条，导致把标题顶上去。 问题出现在给ScrollVeiw设置高度的时候直接设置为100%，
使用taro开发小程序遇到的一些问题
qq_40941760的博客
07-01 1102
需求：小程序ScrollView标签下拉时，在ios用户按住拉动区域不放开的情况下，不会页面抖动并重复请求数据 处理方式：ios端开启ScrollView自定义下拉监听，在页面持续按住不放或者中止下拉的情况下把下拉状态关闭，下拉复位后再请求数据。android端则使用onScrollToUpper的方法直接请求数据。 兼容原因：在小程序ScrollView标签开启refresherEnabled下拉功能时，安卓端无法页面下拉和复位不够流畅。 onUpper() { this.init(.
taro中 scrollview下拉刷新 状态没有复位，一直保持刷新状态（小程序）
业余前端的职业经历
01-17 4883
其实在scrollview中只要我们开启了自定义刷新 refresherEnabled: true 当用户下拉的时候 会出去 加载状态 但是奇怪的是 他是不会自己回去的。 这个需要你自己设置 因为 它不是双向绑定,不会自动帮你实现的 const { refresherTriggered } = this.state <ScrollView className='scrollview' scrollY refresherEnabled refresherTriggered=
精选资源
taro-list:Taro 列表滚动组件
04-16
小程序 demo 配置文件里添加 copy: { patterns: [ { from: 'node_modules/taro-list/dist/weapp/components/List/refresh.wxs', to: 'dist/npm/taro-list/dist/weapp/components/List/refresh.wxs', }, { ...
ScrollView实现上下联动
05-05
使用UIScrollView实现上线联动类似网易新闻的效果
微信小程序使用scroll-view无法触发下拉刷新事件onPullDownRefresh解决方案
ygy211715的博客
10-12 3872
在跟着某网学习的时候发现使用scroll-view无法触发下拉刷新事件onPullDownRefresh，在网上找了找解决方案，其中我觉得最佳的解决方案如下 1：将scroll-view换成view，如此以来就可以触发下拉刷新onPullDownRefresh事件 二： 改成view，那原来scroll-view组件的onScrollLower上拉加载更多事件就不能用了，这时候可以使用onReachBottom ...
taro将页面滚动到指定位置
weixin_43398820的博客
08-28 6726
背景 实现点击一个按钮可以滚动到当前页面的指定位置。 问题 首先想到使用taro自己的api （pageScrollTo）实现滚动，查看文档发现selector 参数刚好是自己需要的。（https://taro-docs.jd.com/taro/docs/2.x/apis/ui/scroll/pageScrollTo） 然后就写了一个简单的函数 function scrollIntoView (id) { Taro.pageScrollTo({ selector: '#id', })
前端：Taro ScrollView事件无法生效
2301_80820432的博客
01-18 1453
无法检测到scrollView事件，handleScroll方法获取不到监听的滚动的e事件。网上看了很多，很多都是高度的问题。也都试过了父元素设置高度，ScrollView都设置到了10000px，虽然页面可以滑动但是监测不到滑动事件。style的height用了100%也没用，最后尝试使用了style={{height:'100vh'}}成功，可以监听到滑动事件了。
Taro小程序使用ScrollView组件，黏性布局间歇性失效的问题
adore_ly的博客
06-28 710
2. 在解决第一点后发现，黏性布局未失效，但是有新问题，那就是，展开的容器有点大，加上内边距，这个容器的大小都大于屏幕宽度，这个展开页还是会动。）），100px换成rpx，即750/屏幕宽度*100，如果是390宽度的屏幕，大概是192rpx。3. 基于第二点可得，需要将缩小展开页的宽度，我刚开始给的是 屏幕宽度（px）- 所有边距（px）2. 在css文件中，写的是px，编译后会变成rpx，最后再通过计算，变成px。因为我写的是行内式，Taro不会转换我的单位，所以我要算出px，最后公式是。
HTML5用scrollIntoView()方法来规范滚动页面
赵泽清的博客
08-06 4598
HTML5用scrollIntoView()方法来规范滚动页面 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&am
taro小程的ScrollView，完美解决动态高度问题
weixin_44953151的博客
07-11 683
【代码】taro小程的ScrollView，完美解决动态高度问题。
scrollIntoView()的使用？
dy799的博客
03-02 343
Element.scrollIntoView() 让当前的元素滚动到浏览器窗口的可视区域内。 调用方法为 elelment.scrollIntoView()参数默认为true。 参数为true是调用改函数，页面或容器发生滚动，使element的顶部与视图（容器）顶部对齐； 参数为false时，使element的底部与视图（容器）底部对齐。 注：只有页面（容器）可以滚动的时候才有用！！！ 示例： html部分 <div id="box"> <ul></u
Taro中使用ScrollView的那些事
K563161969的博客
11-30 3019
记录一下Taro开发H5项目 部份页面嵌入到app
taro小程序如何拦截手势返回
最新发布
09-05
<think> 我们正在查找Taro小程序中拦截手势返回的解决方案。根据引用[4]中提到的问题，当滑动手势落在特定组件（如textarea）上时，会被该组件拦截，导致scroll-view的滚动失效。虽然这不是直接关于返回手势的拦截，但原理类似——我们需要处理不同组件或页面层级的事件拦截。 在Taro中，拦截手势返回通常涉及页面生命周期事件。在小程序中，可以通过监听页面事件来实现。具体到Taro框架，我们可以使用`Taro.useDidShow`、`Taro.useDidHide`等生命周期钩子，但返回手势的拦截需要用到小程序原生的页面事件。 参考小程序原生开发，拦截返回手势通常有两种方式： 1. 在页面配置中禁用返回按钮（但无法禁止手势返回） 2. 使用页面事件`onBackPress`（在微信小程序中，该事件可以监听左上角返回按钮和安卓物理返回键，但手势返回在微信小程序中通常无法拦截？） 然而，在微信小程序中，手势返回（即从屏幕左侧边缘向右滑动）是全局的，无法在单个页面内通过事件监听来阻止。但我们可以通过以下方式尝试： - 使用`wx.enableAlertBeforeUnload`方法（微信小程序基础库2.8.2开始支持）可以阻止页面返回（包括返回按钮和手势返回）时弹出确认框，但并不直接阻止返回动作。 - 在Taro中，我们可以使用`Taro.useReady`来执行小程序API。 但根据微信小程序文档，目前并没有直接提供拦截手势返回的API。手势返回行为是由微信客户端控制的，开发者无法拦截或取消。 然而，我们可以考虑另一种思路：在用户尝试返回时，显示一个确认弹窗，如果用户确认则离开，否则留在当前页面。这虽然不能直接阻止手势返回，但可以在手势返回后触发一个确认框，如果用户取消则通过编程方式重新进入该页面（但这样体验不好）。 另一种思路是利用页面栈，我们可以通过判断页面栈深度来决定是否允许返回。但同样，这不能直接阻止手势返回。 根据引用[5]提到，Taro借鉴了Kbone的思路，通过轻量级DOM实现跨端渲染。因此，我们可以尝试在Taro中模拟类似Web中的`beforeunload`事件，但小程序环境不同。 经过查阅资料，在Taro中并没有直接提供拦截手势返回的方法。但我们可以尝试以下方案： 1. 在页面配置中，设置`disableScroll: true`，但这只是禁止页面滚动，并不影响手势返回。 2. 使用`Taro.eventCenter`来全局监听返回事件（但需要依赖小程序底层支持）。 实际上，微信小程序在页面中提供了`onBackPress`事件，但这个事件只针对左上角返回按钮和安卓物理返回键，并不包括手势返回（即从屏幕左侧边缘向右滑动的返回）。因此，目前微信小程序不支持直接拦截手势返回。 所以，结论是：在Taro小程序中，无法直接拦截手势返回。但是，我们可以通过其他方式间接达到类似的效果，比如： - 在用户进行手势返回时，通过监听页面卸载事件（`onUnload`）来阻止页面卸载，但微信小程序中无法阻止页面卸载。 - 在页面卸载前进行一些操作，比如弹出模态框，然后根据用户选择决定是否留在当前页面。但微信小程序中，页面卸载是不可阻止的，即使弹出模态框，页面也已经卸载了。 参考引用[4]中的解决方案，他们遇到的是组件间事件冲突，而返回手势是系统级别的。因此，我们可能需要接受无法拦截手势返回的事实，或者寻找平台特定的解决方案。 但是，在支付宝小程序中，可能提供了拦截返回事件的API（例如：`my.preventGestureBack`）。如果我们的应用只需要适配支付宝小程序，那么可以使用这个API。但如果是微信小程序，目前没有类似API。 综上所述，针对微信小程序，Taro框架目前没有直接的方法来拦截手势返回。我们可以考虑以下替代方案： 1. 在用户可能会丢失数据的场景（如表单页面），使用`wx.enableAlertBeforeUnload`来弹出确认框，避免用户误操作导致数据丢失。但注意，这个API只会触发确认框，并不能阻止返回操作（用户确认后仍然会返回）。 2. 通过自定义导航栏，隐藏默认的返回按钮，然后自己实现导航控制（但无法隐藏手势返回）。 因此，对于Taro开发的微信小程序，拦截手势返回是不可行的。我们只能通过其他方式（如确认弹窗）来减少用户误操作带来的影响。 如果必须实现类似功能，可以考虑使用自定义容器（如全屏的scroll-view）来捕获滑动手势，但这样会覆盖整个页面，并且需要处理与页面内其他手势的冲突，实现复杂且效果不一定好。 因此，建议： 1. 对于重要表单，在用户返回时弹出确认框（使用`wx.enableAlertBeforeUnload`）。 2. 如果业务允许，可以改为自定义导航栏，并提供自定义的返回按钮，在按钮点击时进行拦截（但无法拦截手势）。 下面给出在Taro中使用`wx.enableAlertBeforeUnload`的代码示例： ```javascript import Taro from '@tarojs/taro'; // 在函数组件中 const MyPage = () => { Taro.useReady(() => { // 启用返回拦截，当用户返回时弹出确认框 Taro.enableAlertBeforeUnload({ message: '确定要离开吗？未保存的数据将会丢失' }); }); // ...页面内容 }; ``` 或者在类组件中： ```javascript import Taro from '@tarojs/taro'; class MyPage extends Taro.Component { componentDidMount() { Taro.enableAlertBeforeUnload({ message: '确定要离开吗？未保存的数据将会丢失' }); } componentWillUnmount() { // 在页面卸载时，建议禁用（因为可能在其他页面不需要） Taro.disableAlertBeforeUnload(); } // ...其他代码 } ``` 注意：`enableAlertBeforeUnload`只在当前页面有效，离开页面后会自动失效，所以也可以不在`componentWillUnmount`中调用`disableAlertBeforeUnload`。同时，该API只在微信小程序基础库2.8.2及以上支持。 如果我们的Taro版本较低或者需要兼容其他小程序，可以使用条件编译： ```javascript if (process.env.TARO_ENV === 'weapp') { Taro.enableAlertBeforeUnload({ ... }); } ``` 因此，对于Taro小程序拦截手势返回，我们只能采用这种折中的方式。 总结：Taro微信小程序无法拦截手势返回，但可以通过启用返回前确认来提示用户，避免数据丢失。 §§相关问题§§ 1. Taro中如何实现页面返回拦截（包括物理返回键和左上角返回按钮）？ 2. 在支付宝小程序中，如何拦截手势返回？ 3. Taro中如何自定义导航栏并隐藏默认返回按钮？ 4. 微信小程序的`enableAlertBeforeUnload`API在Taro中的使用注意事项有哪些？ </think> 在Taro小程序中拦截手势返回行为，需要结合小程序平台特性和Taro框架能力来实现解决方案。以下是具体方法和步骤： ### 解决方案 1. **监听页面生命周期事件** 在小程序页面中，通过`onBackPress`生命周期函数拦截返回操作： ```javascript // 页面配置文件 page.config.js export default { navigationBarTitleText: '详情页', enablePullDownRefresh: false, disableScroll: true // 禁用页面滚动 } // 页面逻辑文件 page.jsx import Taro, { useDidShow } from '@tarojs/taro' export default function DetailPage() { useDidShow(() => { // 自定义返回拦截逻辑 Taro.eventCenter.on('__taroRouterBack', (options) => { if (needIntercept()) { // 自定义拦截条件 showConfirmDialog() // 弹窗确认 return true // 阻塞默认返回行为 } return false // 放行返回 }) }) // 自定义弹窗组件 const showConfirmDialog = () => { Taro.showModal({ title: '确认离开?', content: '当前编辑内容将丢失', success: (res) => { if (res.confirm) Taro.navigateBack() } }) } } ``` 2. **手势事件冲突处理**（参考引用[4]） 当手势操作区域与滚动容器重叠时： ```jsx <ScrollView scrollY onTouchMove={e => { if (isTextAreaActive) { e.stopPropagation() // 阻止事件冒泡 return false // 阻断滚动响应 } }} > <Textarea onFocus={() => setIsTextAreaActive(true)} onBlur={() => setIsTextAreaActive(false)} /> </ScrollView> ``` 3. **平台适配方案**（参考引用[2][5]） ```javascript // 环境判断 const env = process.env.TARO_ENV // 微信小程序专用逻辑 if (env === 'weapp') { wx.enableAlertBeforeUnload({ message: '内容未保存，确定离开?' }) } // 支付宝小程序专用API if (env === 'alipay') { my.preventGestureBack({ prevent: true }) } ``` ### 关键注意事项 1. **层级优先级** 手势事件遵循`capture-bubble`模型，需通过`e.stopPropagation()`阻断向父组件传递（引用[4]） 2. **性能优化** 避免在`onBackPress`中同步执行耗时操作，可能导致页面卡顿 3. **多端兼容** 不同小程序平台API差异： - 微信：`wx.enableAlertBeforeUnload` - 支付宝：`my.preventGestureBack` - 百度：`swan.preventBack` 4. **Taro路由控制** 通过`Taro.useRouter`获取路由对象，可调用`router.preload()`预加载页面提升体验 > 完整实现参考[Taro官方路由文档](https://taro-docs.jd.com/docs/apis/router)及[微信小程序页面事件文档](https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#%E9%A1%B5%E9%9D%A2%E4%BA%8B%E4%BB%B6%E5%A4%84%E7%90%86%E7%A8%8B%E5%BA%8F)[^2][^5]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值