• 本次的博客完整的代码不会贴出,主要是讲代码过程中的问题和解决方法废话:同理为了代码更快速,我使用了webpack进行管理,这里的webpack是使用了我上一篇博客自己的,同时加上加载所需要的loader就可以使用了...
    ---
    title: 使用react写的第一个轮播图组件
    keywords: react react-dom 轮播图 webpack使用cdn加速
    description: 使用react写的第一个轮播图组件,运用webpack使用cdn加速
    ---
    本次的博客完整的代码不会贴出,主要是讲写代码过程中的问题和解决方法
    ----
    **废话:**同理为了写代码更快速,我使用了webpack进行管理,这里的webpack是使用了我上一篇博客自己写的,同时加上加载所需要的loader就可以使用了,如react-loader,less-loader
    
    ###开始
      我承认,我参考了别人的代码,链接:http://www.tuicool.com/articles/FZVfAj
      他主要给了我整体的思路,和组建件值和函数的传递关系,还有轮播的主要的“算法”,当然我也是有自己的思考的好吗,接下来就是我思考的方向,你可以参考上面链接的代码,当然我是更希望你先读懂上面那位仁兄的思路,再看我的,毕竟我是觉得我的是有改进的,也更合理,链接:[react-slide](https://github.com/1364137942/react-slide)
    
    (以上为另一段废话,废话就这么多吧)
    
    
    **改进1**:自动引入图片信息
    使用服务端的fs模块进行读取Image文件内的图片信息,并写入一个Image.json文件中,避免修改源代码文件,这里使用了部分的es6规范和特性,如promise和generator,代码:
    ```js
    "use strict";
    
    let Promise = require("bluebird");  //bluebird 的promise模块
    let fs = Promise.promisifyAll(require("fs"));   //把nodejs原生的fs模块进行promise封装
    let readImage = Promise.coroutine(function *(path) {
        let fileHandler = yield fs.readdirAsync(path);
        let list = yield Promise.map(fileHandler, (file) => {
            return {
                src: path.concat("/", file),
                alt: file
            }
        });
        return list;
    });
    readImage('./image').then((list) => {
        fs.writeFileAsync('Image.json', JSON.stringify(list), {flag: "w+"});
    }).catch((err) => {
        console.log(err.stack);
    });
    ```
    ps:(这里需要注意,使用引入json文件和引入less文件同理,都需要加载loader,这里是json-loader)
    
    **改进2**:轮播图循环播放
    和以往写轮播图一般,需要把轮播图的第一张图和最后一张图无缝接入,在使用react写时,这也是需要实现的,实现思路这里也简略说以下,因为有js基础的人基本都会
    
    思路:需要在最后的一张图片后面加上第一张图,如现在有的图片数组时:[img0,1img,img2],改为[img0,1img,img2,img0],让img2过度到下标为3的img0,然后用react的setstate方法,迅速切换到下标为0的img0,这时就好像轮播图在循环播放,当然切换时需要把动画效果取消,具体的可以看下列代码与前面提到的仁兄的做个对比:
    ```js
    //我的
    ...
    this.count = Images.length + 1;
    ...
    if(_n == this.count){
       this.transition = "none";
    }else{
        this.transition = "all 0.8s linear";
    }
    if(_n = this.count){
        _n = _n - this.count;
    }
    this.setState({curIndex: _n});
    
    //别人的
    if(_n = this.props.items.length) {
      _n = _n - this.props.items.length;
    }
    this.setState({nowLocal: _n});
    ```
    
    **改进3**:使用cdn加速加载`react`和`react-dom`
    由于一开始使用本地下载的`react`和`react-dom`依赖后发现发布后的文件太大了,有160KB,这是因为本身`react`和`react-dom`的文件太大了,所以后期使用了cdn加速服务的`react`和`react-dom`,虽然大小并没有多大改变,但可以有效避免以后的重复请求,也可以加快请求速度
    
    以下是做法:
    ```html
    
    
    
    
    ```
    ```js
    //先把cdn上的两个文件导出为模块
    //新建文件loadReact.js
    module.exports = window.React;
    //新建文件loadReactDom.js
    module.exports = window.ReactDOM;
    ```
    ```js
    //webpack配置外部的包,且不需要进行打包操作
    alias: {
        "React": "../src/common/loadReact.js",
        "ReactDom": "../src/common/loadReactDom.js",
    },
    externals: {
            "react2": 'React',
            'react-dom2': 'ReactDOM'
    },
    ```
    ```js
    //index.js
    //使用cdn的react和react-dom
    //后面的使用和本地安装的react和react-dom模块相同
    const ReactDom = require("react-dom2");
    const React = require("react2");
    ```
    
    最后再给出源代码地址:[react-slide](https://github.com/1364137942/react-slide)
    
    
    
    展开全文
  • react实现pc端图片轮播 2019-04-12 15:35:49
    1.开始展示多张图片 效果图:点击左右按钮的时候可以滑动,当向左滑动完成之后,有按钮消失;当像右滑动完成之后左按钮消失。 解决方法:可以直接使用jquery的动画效果。。。(开始想使用原生js,各种报错。。。...
  • 最近用react模拟一个网站的首页,顺便模仿着了个轮播组件。代码如下: const React = require('React'); class Banner extends React.Component { constructor(props){ super(props); this.state = { /* ...
  • 首先,第一步必须升级reactreact-dom的版本到16,安装命令如下: npm install react@^16.2.0 npm install react-dom@^16.2.0 npm install prop-types@^15.6.0 //安装prop-types库 ...
  • React轮播图源码 2020-05-28 23:31:35
    使用React做的一个轮播图示例,适用于初学者进行思维导入,研究。可以直接复制粘贴拿过去适用,记得看好html布局和css样式
  • 欲实现的图片轮播组件的功能:1.图片组件分为中图和小图两个部分;中图和小图图片宽度可定制化;2.中图部分: 点击向左或者向右箭头能切换图片(非循环轮播),同时小图对应的图片高亮显示; 由于是非循环轮播,...
  • react-image-swiper:一个基于react轮播组件
  • React 轮播图插件 2017-12-04 22:45:06
    react 轮播图插件
  • reactnative轮播 2020-05-30 23:31:08
    react-native 轮播
  • 本地图片路径加载 组件的两种形式 方法组件 类组件 prop state createClass 已废弃 create-react-app 脚手架 react 获取DOM 节点 文件结构 App.js 代码import React, { Component } from 'react'; import './App....
  • react无缝滚动轮播 2019-02-28 13:36:13
    首先:父组件Slider,三个子组件:SliderList、...import React,{Component} from 'react'; import ReactDOM,{render} from 'react-dom'; import Slider from "./Slider"; import './index.less...
  • react实现轮播图。 2019-12-18 16:57:34
    import React from 'react'; import PropTypes from 'prop-types'; import '../static/css/banner.css'; export default class Banner extends React.Component { //=>设置属性的默认值和规则 static ...
  • 详情请查看链接:react-native-swiper使用方法:1. 安装第三方react-native-swiper组件:npm i react-native-swiper --save2. 引入第三方swiper组件import Swiper from 'react-native-swiper';3. 我们自己的效果&...
  • react 移动端轮播 2019-10-23 16:50:09
    slider ...常用于一组图片或卡片轮播 demo演示 [ 暂无] 基本使用方法 js: import PuiSlider from './pui-slider' render(){ return <div className="wrap" id="wrap"> <PuiSlider...
  • React.js 轮播react-swipe 2018-12-26 19:59:43
    我下载的版本是5.1.1 因为最新的版本 的时候发现了问题 没有 npm install react-swipe@5.1.1 --save import React from 'react'; import ReactSwipe from 'react-swipe'; import './style.less'; class ...
  • react 手机端touch 图片轮播 2016-11-10 15:53:19
    import React, { Component, PropTypes } from 'react';const styles = require('./DoctorSchedulesCard.scss');let startX; export default class DoctorSchedulesCard extends Component { static propTypes = {
  • react-native简单轮播图组件 2019-03-08 16:53:45
    就不多做解释了,注释的很明白,主要是对scrollview一些属性的了解,定时器的始 import React, {Component} from 'react'; import {Platform, StyleSheet,Image, Text, View,ScrollView} from 'react-native';...
  • 效果图 人狠话不多,先上效果图,看看...import React, { Component } from "react"; import ImageMagnifier from "../components/ImageMagnifier"; class Details extends Component { state = { // 缩略图 ...
  • 难点:因为技术栈的原因,使用Taro的Swiper组件来写轮播,普通的轮播用这个组件可以完成,但是因为需求需要漏出下一项的一部分,Taro的Swiper组件没有这个属性,小程序的next-margin(在Taro里使用为nextMargin)可以...
  • react轮播 2019-03-19 21:30:52
    自己了一个react轮播图,最近在学习react希望大神们能指出错误或不好的地方。 效果:代码: import React, {Component} from 'react'; import './ReactCarousel.css'; class ReactCarousel extends Component{ ...
1 2 3 4 5 ... 20
收藏数 8,339
精华内容 3,335