首先就是引入swiper

import Swiper from 'react-id-swiper';
一个轮播图首先要考虑到一种情况就是当只有一张图的时候是不是需要按轮播图来处理
一般情况下,一张图是不需要按轮播图来处理的,只需要放一张图片即可。
对传入的图片地址、是否自动播放、高度进行类型规定
其中url是数据中所带的点击图片要跳转的地址
featureImage为图片的url地址
  static propTypes = {
    data: PropTypes.arrayOf(
      PropTypes.shape({
        url: PropTypes.string,
        featuredImage: PropTypes.string,
      })
    ),
    autoplay: PropTypes.bool,
    height: PropTypes.number,
  }
对轮播图进行配置
 rebuildOnUpdate为banner图片发生改变时是否更新盒子
 height为banner高度
 loop为是否循环轮播,也就是重最后一张可以轮播回第一张
 pagination为配置banner底部的轮播导航,其中el写死,type为底部的样式
  type: 'bullets'为小圆点
   bulletClass: 轮播到这一张图是小圆点的样式
   bulletActiveClass: 没有轮播到这一张图小圆点样式
  autoplay 规定是否自动轮播以及轮播时间
 this.params = {
rebuildOnUpdate: true,
height: height,
loop: true,
pagination: {
el: '.swiper-pagination',
type: 'bullets',
bulletClass: styles.bulletClass,
bulletActiveClass: styles.bulletActiveClass,
},
autoplay: autoplay ? {delay: 5000, disableOnInteraction: false} : false,
}

banner所需要的各种数据已经定义好,那么就可以写html骨架了

首先定义单个图片的骨架


对其中的url进行判断,url为点击图片跳转的连接(一般后端返回的数据中会配置
如果有用link将其包裹
window的事件抛发是为了在窗口大小发生改变的时候重新加载图片,使图片立即适应窗口大小
onLoad
class CarouselItem extends Banner {
constructor(props) {
super(props)
}
render() {
return (
<React.Fragment key={this.props.index}>
{this.props.url ? (
<Link href={this.props.url}>
<a style={{display: 'block'}}>
<img
src={`${this.props.featuredImage}`}
onLoad={() => {
window.dispatchEvent(new Event('resize'))
}}
style={{height: this.props.height, width: '100%'}}
/>
</a>
</Link>
) : (
<img
src={`${this.props.featuredImage}`}
onLoad={() => {
window.dispatchEvent(new Event('resize'))
}}
style={{height: this.props.height, width: '100%'}}
/>
)}
</React.Fragment>
)
}
}

接下来就是banner整个组件的骨架结构

当只有一张图的时候就只需要将这个图片渲染出来就ok
当超过一张的时候就需要用到Swiper这个轮子,将规定好的配置params放进去就ok了

render() {
const {data} = this.props
return (
<div className={styles['uni-banner']}>
{data &&
(data.length == 1 ? (
<CarouselItem {...this.props} {...data[0]} />
) : (
<Swiper {...this.params}>
{data.map((info, index) => (
<div key={index}>
<CarouselItem {...this.props} {...info} />
</div>
))}
</Swiper>
))}
</div>
)
}
 
 

在Nuxt中使用react-id-swiper封装公共的轮播图组件(移动端的更多相关文章

  1. reactjs-swiper react轮播图组件基于swiper

    react轮播图组件基于swiper demo地址:http://reactjs-ui.github.io/reactjs-swiper/simple.html 1. 下载安装 npm install ...

  2. 原生JS面向对象思想封装轮播图组件

    原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...

  3. iOS回顾笔记(05) -- 手把手教你封装一个广告轮播图框架

    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...

  4. Ionic4.x 中的 UI 组件(UI Components) Slides 轮播图组件、Searchbar 组件、 Segment 组件

    Slides 轮播图组件 Ionic4.x 中的轮播图组件是基于 swiper 插件,所以配置 slides 的属性需要在 swiper 的 api 中 找 Swiper Api:http://ida ...

  5. vue自定义轮播图组件 swiper

    1.banner 组件 components/Banner.vue <!-- 轮播图 组件 --> <template> <div class="swiper- ...

  6. 用require.js封装原生js轮播图

    index.html页面: <!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...

  7. vue2.0 + vux (五)api接口封装 及 首页 轮播图制作

    1.安装 jquery 和 whatwg-fetch (优雅的异步请求API) npm install jquery --save npm install whatwg-fetch --save 2. ...

  8. js-BOM之offset家族、移动函数的封装升级(轮播图)

    Obj.style.width/obj.style.height与obj.offsetWidth/obj.offsetHeight的区别: <style> #div1{ height: 2 ...

  9. swiper结合ajax的轮播图

    Swiper 是什么:是纯JavaScript打造的滑动特效插件,能够实现触屏焦点图.触屏tab切换.触屏多图切换等常用效果. 开源.免费.稳定.应用广泛. 这就是swiper简单的介绍,由于是结合a ...

随机推荐

  1. Mysql_笔记2018.1.29

    1.主要数据库 Oracle MySQL Sqlsever 微软 MongoDB (非关系型数据库) 2.MySql 专业词语 1.数据库:一些关联表的集合 2.数据表:表示数据的矩阵 3.列:同ex ...

  2. Linux(centos6.8)配置Tomcat环境

    1.下载Linux版的Tomcat包 (1)通过官方下载 tomcat官方:https://tomcat.apache.org/download-80.cgi (2)通过分享下载 如网盘分享等途径 2 ...

  3. MySQL数据库 | MySQL调优|MySQL底层原理|MySQL零基础新手教程

    MySQL数据库安装 一.Windows 环境下安装 A.下载 MySQL Select Operating System: Microsoft Windows 快捷下载:mysql-8.0.22-w ...

  4. impala语句

    0.保留两位小数 round(字段a, 需要保留几位小数) round( data, 4) 1. case wen case when 字段a = '01' and 字段b = '01' and 字段 ...

  5. [原题复现]2019强网杯WEB-随便注(多种方法)

    简介 原题复现:https://gitee.com/xiaohua1998/qwb_2019_supersqli  考察知识点:SQL注入漏洞-堆叠注入  线上平台:https://buuoj.cn( ...

  6. kali 系列学习07-攻击之密码生成

    比较理想的字典是拖库字典,比如CSDN字典,如果要生成字典,可以使用Crunch 和 rtgen 两个工具, 一.密码生成 1.Crunch (1)启动crunch命令.执行命令如下所示. #crun ...

  7. python中正则表达式

    正则表达式是一种通用的字符串匹配技术,是不会因为编程语言不一样而发生变化的如果想查找对应规则的字符串,就可以用正则表达式python中要使用正则表达式需使用re模块,它是正则表达式在python中的封 ...

  8. O - Matching 题解(状压dp)

    题目链接 题目大意 给你一个方形矩阵mp,边长为n(n<=21) 有n个男生和女生,如果\(mp[i][j]=1\) 代表第i个男生可以和第j个女生配对 问有多少种两两配对的方式,使得所有男生和 ...

  9. Codeforces Round #631 (Div. 1) B. Dreamoon Likes Sequences 题解(思维+求贡献)

    题目链接 题目大意 让你构造一个严格单调上升的数组a满足\(1<=a_1<a_2<....a_n<=d\) 而且要使得这个数组的异或前缀和也满足严格单调上升,求有多少个满足条件 ...

  10. zk与eureka区别

    cap永远的神!