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

已于 2022-02-16 16:33:57 修改
阅读量1.8k 收藏
点赞数
分类专栏： 小程序 文章标签： 小程序 javascript 前端
于 2022-02-16 16:30:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jstljspservlet/article/details/122966185
版权

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

例如：

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

在这里插入图片描述

一枕黄粱-web
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Taro组件 微信小程序仿钉钉@评论功能
02-18
总的来说，这个微信小程序项目展示了如何利用 Taro 框架来实现一个高度定制的交互组件，它结合了微信小程序的 API 和 Taro 的优势，为用户提供了一个类似钉钉的@评论体验。在实际开发中，这样的组件可以作为基础，...
微信小程序城市列表选择自定义组件
03-11
在微信小程序开发中，自定义组件是提升用户体验和代码复用性的重要手段。"微信小程序城市列表选择自定义组件"就是一个专门针对城市选择场景设计的组件。它允许开发者根据特定需求定制城市选择功能，提供了丰富的交互...
taro（小程序一样） ScrollView 滚动到底部或者顶部 再次设置scrollIntoView 无效
zw19940808的博客
11-19 3622
小程序 ScrollView 滚动到底部或者顶部 再次设置scrollIntoView 无效
scrollIntoView()
m0_49471668的博客
09-20 322
scrollIntoView()方法将调用它的元素滚动到浏览器窗口的可见区域。
Taro小程序使用ScrollView组件，黏性布局间歇性失效的问题
最新发布
adore_ly的博客
06-28 350
2. 在解决第一点后发现，黏性布局未失效，但是有新问题，那就是，展开的容器有点大，加上内边距，这个容器的大小都大于屏幕宽度，这个展开页还是会动。）），100px换成rpx，即750/屏幕宽度*100，如果是390宽度的屏幕，大概是192rpx。3. 基于第二点可得，需要将缩小展开页的宽度，我刚开始给的是 屏幕宽度（px）- 所有边距（px）2. 在css文件中，写的是px，编译后会变成rpx，最后再通过计算，变成px。因为我写的是行内式，Taro不会转换我的单位，所以我要算出px，最后公式是。
taro 滚动组件ScrollView
热门推荐
weixin_43294560的博客
09-25 1万+
1、使用 import { ScrollView } from '@tarojs/components' <ScrollView className='scrollview' scrollY 指定滑动方向 scrollWithAnimation 开启滑动动画 enableBackToTop 点击顶部标题栏滑动到顶部 scrollTop={n} 设置竖向滚动条位置 scrollLeft={n} 设置横向滚动条位置
taro将页面滚动到指定位置
weixin_43398820的博客
08-28 5635
背景 实现点击一个按钮可以滚动到当前页面的指定位置。 问题 首先想到使用taro自己的api （pageScrollTo）实现滚动，查看文档发现selector 参数刚好是自己需要的。（https://taro-docs.jd.com/taro/docs/2.x/apis/ui/scroll/pageScrollTo） 然后就写了一个简单的函数 function scrollIntoView (id) { Taro.pageScrollTo({ selector: '#id', })
ScrollView常见用法
weixin_50236973的博客
04-24 261
【代码】ScrollView常见用法。
基于taro微信小程序环形进度条
04-15
总的来说，基于Taro的微信小程序环形进度条实现是一个结合了前端技术、微信小程序特性和Taro框架优势的过程，通过巧妙的代码设计和优化，可以构建出既美观又实用的环形进度条组件，为用户带来更好的交互体验。
微信小程序 select 下拉框组件功能
10-16
主要介绍了微信小程序 select 下拉框组件功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
基于Taro框架的微信小程序canvas绘图组件
08-10
在微信小程序的开发中，Taro 框架是一个非常重要的工具，它允许开发者使用 React 语法编写代码，然后编译成适用于不同平台（包括微信小程序、H5、支付宝小程序等）的应用。本主题聚焦于如何利用 Taro 构建一个基于 ...
ScrollView实现上下联动
05-05
使用UIScrollView实现上线联动类似网易新闻的效果
ios下，微信小程序scrollview组件中的fixed元素抖得和帕金森病人一样
hahahhahahahha123456的博客
02-28 1093
问题现象 这个问题是最近在优化小程序代码时发现的。 在ios环境下，微信小程序的scrollview组件包裹着一个position：fixed的view。 当在scrollview组件上滑动时，这个view会疯狂抖动。 直接上图吧： 下面是简化后的代码： <view class="main"> <scroll-view scroll-y="{{true...
Taro中使用ScrollView的那些事
K563161969的博客
11-30 2318
记录一下Taro开发H5项目 部份页面嵌入到app
taro项目小程序场景下scrollview引发的问题汇总
LittleMoon_lyy的博客
07-16 2690
小程序scroll-view的踩坑记录
ScrollView嵌套问题
gengbaolong的博客
03-10 424
最近在项目中遇到一个问题，记录一下。 一个页面因为需要显示比较多的数据，而在小屏幕手机上，一屏幕显示不下，所以需要使页面可以上下滑动，这就用到了ScrollView。这次涉及到的嵌套问题是ScrollView嵌套了一个RelativeLayout布局，这个RelativeLayout布局下面又嵌套了其他一些控件、子布局，页面最底部显示了一行文字。而恰恰就是这一行文字，在加上ScrollView之...
Taro 小程序 性能优化
caperxi的博客
04-10 3404
手上有个小程序项目，遇到了挺多坑，有关性能方面的，时间间隔一段时间了，突然发现都快忘完了，赶紧在此记录一下， 一 页面加载耗时 这是首次性能检测时页面加载情况： 页面最长渲染居然达到了900多毫秒！！！，看到问题出在setData,去了解了一下原生小程序的setData渲染工作原理，原来setData里面的所有数据都会被转成字符串，然后字符串又转换成JS脚本，然后页面根据JS脚本去渲染页面，...
微信小程序 scroll 动态高度 手机适配
wlm_0214的博客
08-29 499
在开发过程中 scroll的高度是很让人头疼的,即使我说的这个方法也不能全部概括,不过也可以将就了. computeScrollViewHeight() { let that = this let query = wx.createSelectorQuery().in(this) query.select('.date_tab_box').bou...
vue3 +Taro 页面实现scroll-view 分页功能
阿乐的博客
04-09 511
根据你当前设定的每页的数据数量和后端返回给你的数据列表数量 当某一次分页 两个数量不相等了以后 就不用去分页了。现在分页列表 后端只给你一个分页的数据列表 没有总页数 没有当前的分页 页数。我这使用的是scroll-view 组件。这样就巧妙的解决了当前的分页问题。只有这么一个list 、、、
taro 小程序获取微信头像组件
10-06
Taro 小程序是一个基于 React 语法的多端开发框架，允许我们使用 React 的组件开发方式来开发微信小程序。要获取微信头像组件，我们可以使用 Taro 提供的一些方法。 首先，我们需要在 Taro 小程序项目中安装并引入 Taro UI 组件库，因为 Taro UI 提供了一些常用的 UI 组件和样式。可以通过在项目根目录下执行以下命令来安装 Taro UI： ``` npm install taro-ui ``` 然后，在需要使用微信头像组件的页面中引入组件： ```jsx import { AtAvatar } from 'taro-ui' ``` 接下来，我们可以在组件的 JSX 中使用 `AtAvatar` 组件，并设置 `image` 属性为微信头像的 URL： ```jsx <AtAvatar image='微信头像的URL'/> ``` 需要注意的是，微信头像的 URL 可以通过调用微信小程序 API 的 `wx.getUserInfo` 获取用户信息，然后从用户信息中获取头像 URL。 最后，我们可以在页面中渲染此组件，并将其显示在小程序中： ```jsx import Taro, { Component } from '@tarojs/taro' import { View } from '@tarojs/components' import { AtAvatar } from 'taro-ui' class AvatarComponent extends Component { render() { return ( <View> <AtAvatar image='微信头像的URL'/> </View> ) } } export default AvatarComponent ``` 这样，我们就可以通过 Taro 小程序获取微信头像组件，并在小程序中显示用户的微信头像了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值