taro-lazy-swiper
使用taro, 基于微信小程序 swiper 开发的 lazy swiper
应用场景
- 大量图片的swiper 滑动预览
- 短视频的无限/有限滑动
- 等等
效果
demo.mp4
使用
测试用例
非 loop 模式
该模式下， 测试用例增加到了200条， 具体看 Scheduler.test.ts
loop 模式
该模式下， 测试用例还没来得及新增
安装
npm i taro-lazy-swiper引入
import LazySwiper, {useLazySwiper} from 'taro-lazy-swiper'
import {View} from "@tarojs/components";
const dataSource = Array(10).fill(0).map((_, i) => {
return {data: i + 1}
})
const App = () => {
const [lazySwiper] = useLazySwiper()
return (
<View>
<LazySwiper
lazySwiper={lazySwiper}
dataSource={dataSource}
keyExtractor={(data) => data.toString()}
renderContent={(data, { isActive }) => {
return `current: ${data}`
}}
/>
<View className='fixed-bar'>
<Button onClick={() => lazySwiper.prevSection()}>上一个</Button>
<Button onClick={() => lazySwiper.nextSection()}>下一个</Button>
<Button onClick={() => lazySwiper.toSection(0)}>回到头</Button>
</View>
</View>
)
}API
| 属性 | 类型 | 描述 |
|---|---|---|
| dataSource | T[] |
数据源 |
| keyExtractor | (data: T, index: number) => string |
key 计算 |
| renderContent | (data: T, info: { isActive: boolean, key: string } ) => React.ReactNode |
每个swiper item 的计算 |
| maxCount | number |
同时渲染的swiper item最大数量 |
| loop | boolean |
是否循环 |
| duration | number |
切换动画时长 |
| lazySwiper | LazySwiperExtra |
对外暴露的连接属性 |
| onBeforeChange | (detail: BeforeChangeEventDetail & { playload: any }) => boolean |
变更前，可以进行拦截（手势滑动的无法拦截） |
| onChange | (detail: ChangeEventDetail) => void |
当 index 变更后 |
| onAnimationFinish | (detail: ChangeEventDetail) => void |
index 变更之后的动画结束后 |
| swiperItemExtractor | (data: T, index: number) => SwiperItemProps |
swiper props 计算 |
共建
fork
拉取自己 fork 的项目
# ssh 方式
git clone git@github.com:[your github user name]/taro-lazy-swiper.git启动
cd taro-lazy-swiper
npm i
npm run dev:rollup业务项目关联组件库
# taro-lazy-swiper
npm link
# 自己项目
npm link taro-lazy-swiper鸣谢
kentcdodds/use-deep-compare-effect
等等...
