swiper (滑动图片加文字)

滑块视图容器，常用于走马灯、轮播图
注意：由于铺满整行使用的是 widthFix(宽度不变高度裁剪)，在进行圆角设置的时候左下角和右下角可能会失败。
在 Taro 文件中引入组件

  1. import { Swiper, SwiperItem } from '@tarojs/components'
  1. import Taro, { Component } from '@tarojs/taro'
  2. // 引入 Swiper, SwiperItem 组件
  3. import { Swiper, SwiperItem } from '@tarojs/components'
  4. class App extends Components {
  5.   render () {
  6.     return (
  7.       <View className='at-row '>
  8.           <View className='at-col border'>
  9.         <Swiper className='test-h' indicatorColor='#999' indicatorActiveColor='#333' circular indicatorDots >
  10.           <SwiperItem><View className='demo-text-1'><Image className='lm' src='http://placekitten.com/900/900' mode='widthFix'></Image><Text className='child'>child </Text></View></SwiperItem>
  11.           <SwiperItem><View className='demo-text-2'><Image className='lm' src='http://placekitten.com/700/700' mode='widthFix'></Image><Text className='child'>child </Text></View></SwiperItem>
  12.           <SwiperItem><View className='demo-text-3'><Image className='lm' src='http://placekitten.com/900/900' mode='widthFix'></Image><Text className='child'>child </Text></View></SwiperItem>
  13.         </Swiper></View></View>)}}

CSS

  1. .border {
  2.     box-shadow:0 6rpx 6rpx 6rpx lightgray;
  3.   border-radius:5%;
  4.   margin-left: 15rpx;
  5.   margin-right: 15rpx;
  6.   margin-bottom: 25rpx;}
  7. .lm {
  8.   box-shadow:0 3rpx 5rpx 1rpx lightgray;
  9.   border-radius:5%;
  10.   padding-right: 10rpx;
  11.   margin-left: 20rpx;
  12.   width: 95%;}

参数

微信 H5 参数 说明 类型 可选值 默认值
√ √ indicatorDots 是否显示面板指示点 Boolean - false
√ √ indicatorColor 指示点颜色 String - rgba(0, 0, 0, .3)
√ √ indicatorActiveColor 当前选中的指示点颜色 String - 000
√ √ autoplay 是否自动切换 Boolean - false
√ √ interval 自动切换时间间隔 Number - 5000
√ √ duration 滑动动画时长 Number - 500
√ √ current 当前所在滑块的 index Number - 0
√ √ circular 是否采用衔接滑动 Boolean - false
√ skipHiddenItemLayout 是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息 Boolean - false
√ displayMultipleItems 同时显示的滑块数量 Number - 1
√ vertical 滑动方向是否为纵向 Boolean - false
√ √ onChange current 改变时会触发 change 事件 EventHandle - -
√ onAnimationfinish 动画结束时会触发 animationfinish 事件 EventHandle - -

Scrollview(滑动图片,文字否)

  1. <View className='at-row'>
  2.     <View className='at-col border'>
  3.       <ScrollView className='scrollview1' scrollX='true'>
  4.         <Image className='large' src='https://img.zcool.cn/community/01005e579e24f10000012e7e903adf.jpg@1280w_1l_0o_100sh.jpg'  mode='aspectFit'></Image>
  5.       <Image className='large' src='https://img.zcool.cn/community/0180b1579e251b0000018c1bd2b35f.jpg@1280w_1l_2o_100sh.jpg'  mode='aspectFit'></Image>
  6.       <Image className='large' src='https://img.zcool.cn/community/012886579e25000000012e7e270ca6.jpg@1280w_1l_0o_100sh.jpg'  mode='aspectFit'></Image>
  7.           </ScrollView></View>

CSS

  1. .border {
  2.     box-shadow:0 6rpx 6rpx 6rpx lightgray;
  3.   border-radius:5%;
  4.   margin-left: 15rpx;
  5.   margin-right: 15rpx;
  6.   margin-bottom: 25rpx;}
  7. .large {
  8.   box-shadow:0 3rpx 5rpx 1rpx lightgray;
  9.   border-radius:5%;
  10.   width: 60%;
  11.   height: 240rpx;}

swiper、scrollview结合版：详解

案例1：详解
案例2：详解