0.0.2 • Published 2 years ago
crs-test-swiper v0.0.2
taro-lazy-swiper
使用taro, 基于微信小程序 swiper 开发的 lazy swiper
应用场景
- 大量图片的swiper 滑动预览
- 短视频的无限/有限滑动
- 等等
效果
使用
测试用例
非 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
等等...