taro 自定义 轮播图组件
组件 自定义 轮播 Taro
2023-09-11 14:15:30 时间
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> ) }
3.效果图
相关文章
- SpringCloud微服务(03):Hystrix组件,实现服务熔断
- Android Jetpack组件 DataStore的使用和简单封装
- weex 项目开发(四)项目框架搭建 及 自定义 TabBar 组件
- vue2.0 自定义 折叠列表(Accordion)组件
- 72Vue - 递归组件
- 微信小程序轮子 - 自定义中间凸起底部导航栏(只需渲染一次组件 | 性能高 | 灵活)
- 微信小程序 - 在自定义组件中请求后端 API 数据接口(引入该组件的页面触发)组件在哪个生命周期钩子函数中请求接口数据呢?
- Vue - 超详细 Element 组件库主题颜色进行 “统一全局“ 替换,将默认的蓝色主题色更换为其他自定义颜色(保姆级教程,简易且标准全局替换主题色)
- Vue - 实现用 JS 调用自定义组件 / 类似 ElementUI 弹框组件(在 js 文件中通过 this.xxx 方式调用并显示自定义弹框模态框组件)
- uni-app - 九宫格老虎机抽奖机插件源码(支持服务端API接口控制最终中奖的奖品,自定义组件可随意配置和控制,带组件文档轻松 DIY 自己的营销页抽奖机)幸运抽奖圆形大转盘插件组件
- 《移动安全》(1)Android开发基础:安卓操作系统架构与应用程序组件
- vue 引入组件
- SwiftUI 自定义组件大全之自带动画的 Fast Action Button 菜单
- SwiftUI 绘制刻度时钟表盘(自定义组件教程含源码)
- SwiftUI 环状进度条Dashboard Progress(自定义组件教程含源码)
- Android 组件化架构设计从原理到实战
- 利用vue-cropper做的关于图片裁剪、压缩、上传、预览等做的一个公共组件
- Vue组件进阶知识总结
- 【快应用】实现自定义导航栏组件
- JQuery easyui自定义扩展——批量文件上传组件
- Kindeditor -单独调用组件,可以直接调用上传功能。
- 微信小程序学习第10天——自定义组件(父子组件通信与behavior)、自定义tabBar组件
- 微信小程序学习第8天——自定义组件的数据监听器Observer小案例
- [LeetCode] 817. Linked List Components 链表组件
- 630光伏抢装潮来袭 多晶硅片、电池、组件价格上涨
- React:声明组件的方式,看这篇就够了