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配合展示对应当前展示时样式和未展示时样式。

相关推荐
qiyue773 分钟前
AI编程专栏(三)- 实战无手写代码,Monorepo结构框架开发
前端·ai编程
断竿散人7 分钟前
JavaScript 异常捕获完全指南(下):前端框架与生产监控实战
前端·javascript·前端框架
Danny_FD9 分钟前
Vue2 + Vuex 实现页面跳转时的状态监听与处理
前端
小飞悟9 分钟前
别再只会用 px 了!移动端适配必须掌握的 CSS 单位
前端·css·设计
安思派Anspire10 分钟前
LangGraph + MCP + Ollama:构建强大代理 AI 的关键(一)
前端·深度学习·架构
LRH11 分钟前
JS基础 - 基于 Generator + Promise 实现 async/await 原理
前端·javascript
Jolyne_11 分钟前
可配置永久生效的Table组件的封装过程
前端·react.js
断竿散人11 分钟前
JavaScript 异常捕获完全指南(上):从同步异步到 Promise 错误处理
前端·javascript·promise
肖魏眸13 分钟前
vue3 格式化 : antfu 组合 prettier & eslint & 提交格式化校验
前端·代码规范
婉婉耶14 分钟前
VUE带你乘风破浪~
前端·vue.js