taro3.0 Swiper album example
数据结构:
{ "house_id": "1001", "house_name": "襄阳恒大翡翠珑庭", "house_album": [ { "id": "album_01", "name": "视频", "type": "video", "images": [ { "id": "img_00001", "image_path": "http://192.168.2.248/assets/images/1400x933_1.jpg" } ] }, { "id": "album_02", "name": "图片", "type": "image", "images": [ { "id": "img_00002", "image_path": "http://192.168.2.248/assets/images/1400x933_3.jpg" }, { "id": "img_00003", "image_path": "http://192.168.2.248/assets/images/1400x933_5.jpg" } ] } ] }
taro swiper:
<View className="house-album"> <Swiper style={{ height: '225px' }} current={albumSwiper.swiperIndex} onChange={onSwiperChange}> { houseData.house_album && houseData.house_album.map((albumItem: any) => { return albumItem.images.map((imageItem: any, imageIndex: number) => { return ( <SwiperItem key={imageIndex} itemId={`${albumItem.id},${imageIndex}`}> <Image style="width: 100%; height: 240px" src={imageItem.image_path} mode='widthFix'></Image> {albumItem.type == 'video' && <Text className="auto-center icon-vedio"></Text>} </SwiperItem> ) }) }) } </Swiper> <View className="album-count">{albumSwiper.imageIndex + 1}/{albumSwiper.itemLength}</View> <View className="album-text"> { houseData.house_album && houseData.house_album.map((albumItem: any, albumIndex: number) => { return <Text className={classnames('album-text-item', albumItem.id == albumSwiper.albumId && 'album-text-actived')} key={albumIndex} onClick={() => switchAlbum(albumItem.id)} >{albumItem.name}</Text> }) } </View> </View>
const { contentHeight } = useNavData() const [albumSwiper, setAlbumSwiper] = useState<IAlbumSwiper>(INIT_ALBUM_SWIPER) const [houseData, setHouseData] = useState<any>({}) useReady(() => { let currentRouter: any = getCurrentInstance().router let params: any = currentRouter.params if (params.id) { app.request({ url: api.getHouseById, data: { id: params.id } }, { isMock: true }) .then((result: any) => { setHouseData(result) setAlbumSwiper({ ...albumSwiper, itemLength: result.house_album[0].images.length, albumId: result.house_album[0].id, }) }) } }) const onSwiperChange = (event) => { let swiperIndex = event.detail.current; let currentItem = event.detail.currentItemId.split(','); let albumId = currentItem[0]; let imageIndex = parseInt(currentItem[1]); let itemLength = findAlbumById(albumId).length setAlbumSwiper({ albumId, imageIndex, swiperIndex, itemLength }) } const switchAlbum = (albumId: string) => { const currenAlbum = findAlbumById(albumId) setAlbumSwiper({ albumId, imageIndex: 0, swiperIndex: currenAlbum.indexBefore, itemLength: currenAlbum.length }) } const findAlbumById = (albumId: string) => { let indexBefore = 0; let album: any = null; for (const item of houseData.house_album) { if (item.id === albumId) { album = item break; } indexBefore = indexBefore + item.images.length } return { id: albumId, length: album.images.length, images: album.images, indexBefore } }