Taro中ScrollView实现轮播图

ScrollView 的scrollIntoView 实现轮播效果

1.背景:

1.1 为什么不用taro原生的Swiper轮播组件

  • 需要自定义轮播分页
  • 通过onChange事件来获取当前current再来更新底部分页,后有一定延迟,效果不佳
  • 元素选中与未选中要进行缩放

2. 具体实现

tsx 复制代码
const [targetViewId, setTargetViewId] = useState<string>()



 const testClick = () => {
    setTargetViewId('test_1')
  }

<Button onClick={testClick}>按钮</Button>
<ScrollView 
 scrollX
 scrollY={false}
 scrollWithAnimation
 onScroll={handleTouchMove}
 scrollIntoView={targetItemId}
>
{swiperList.map(()=>{

return (
    <View                   
    key={index}
    id={`test_${index}`}
></View>
)
})}

</ScrollView>

按钮的点击事件可以,让当前视图平滑的滚动到一组图片的第二张图片中,scrollWithAnimation 属性也可以在滚动中添加缓慢的动画效果。我们也可以在handleTouchMove事件中处理当前,展示的图片,以及与相应的css配合展示对应当前展示时样式和未展示时样式。

相关推荐
Boilermaker19928 分钟前
【Java EE】SpringIoC
前端·数据库·spring
中微子19 分钟前
JavaScript 防抖与节流:从原理到实践的完整指南
前端·javascript
天天向上102434 分钟前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js
芬兰y1 小时前
VUE 带有搜索功能的穿梭框(简单demo)
前端·javascript·vue.js
好果不榨汁1 小时前
qiankun 路由选择不同模式如何书写不同的配置
前端·vue.js
小蜜蜂dry1 小时前
Fetch 笔记
前端·javascript
拾光拾趣录1 小时前
列表分页中的快速翻页竞态问题
前端·javascript
小old弟1 小时前
vue3,你看setup设计详解,也是个人才
前端
Lefan1 小时前
一文了解什么是Dart
前端·flutter·dart
Patrick_Wilson1 小时前
青苔漫染待客迟
前端·设计模式·架构