页面特效 UI组件库 菜单导航 窗口特效 幻灯片滑动 图像相册 表单 选项卡 表格 评分星级 手风琴 文本链接 布局 日历 颜色选择器 按钮 图表 html5 提示 ExtJS 在线客服 其他特效 地图 树形控件 移动开发 BootStrap 滑动条 文件上传 表单验证 分页 播放器 Angular VUE
官方客服QQ号:3007971137  (一条龙搭建-联系我)
官方客服QQ号:3007947123  (一条龙搭建-联系我)

taro 自定义 轮播图组件

UI组件库 技术02-千编万码 5月前  次浏览

1.代码

components/MySwiper/index.js

/**
 * 轮播图组件
 */
import Taro, { Component } from '@tarojs/taro';
import { Swiper, SwiperItem, Image } from '@tarojs/components';
import PropTypes from 'prop-types';
import './index.scss';
 
export default class MySwiper extends Component {
  static propTypes = {
    banner: PropTypes.array,
  };
 
  static defaultProps = {
    banner: [],
  };
 
  render() {
    const { banner } = this.props;
    return (
      <Swiper
        className="swiper-container"
        circular
        indicatorDots
        indicatorColor='#999'
        indicatorActiveColor='#bf708f'
        autoplay>
        { banner.map((item, index) => (
          <SwiperItem key={index}>
            <Image className="swiper-img" mode="widthFix" src={item.image_src}></Image>
          </SwiperItem>
        ))}
      </Swiper>
    )
  }
}
components/MySwiper/index.less

@import "../../styles/mixin";
 
.swiper-container {
  width: 100vw;
  height: 450px;
  .swiper-img,img {
    height: 450px!important;
  }
}
2.调用

render() {
  const { banner } = this.props;
  return (
    <View className="home-page">
      <MySwiper banner={banner} />
    </View>
  )
}


相关链接

发表评论