2018-08-27 16:12:24 weixin_42046201 阅读数 12202
  • 2019 react入门至高阶实战,含react hooks

    这是2019 react入门到高级新课程 学习react,不仅能带来技术提升,同时提高开发效率和体验,更能带来好的就业机会。 本课程主要分为以下几个部分:  一,前端工程化基础?  主要学习node和npm、yarn的基本用法  二,es6语法 学习必备的es6常用语法 。 三,react基础知识  学习如何搭建react项目,以及react组件,jsx语法、css处理方案、生命周期等基础知识。 并且根据这些知识开发一个个人网站。 四,react进阶知识?? 学习表单的处理,事件处理,Portals的使用,以及数据请求和API管理等进阶知识。 五,react高阶知识?? 学习react高级特性,react hooks,以及整个react生态体系的构成和应用 。 努力学习哟,带你精通react。

    1980 人正在学习 去看看 梁富城
$npm install swiper

安装成功之后引入swiper

import Swiper from 'swiper/dist/js/swiper.js'
import 'swiper/dist/css/swiper.min.css'

这里引入主要是为了后期打包(build)的时候不报错

componentDidMount(){
    var mySwiper = new Swiper('.swiper-container', {
       slidesPerView : 3,
       spaceBetween : 20,
    })
}

引入之后我们在didmount里实例化swiper

<div className='banner'>
    <div className='swiper-container'>
        <div className='swiper-wrapper'>
            {
                this.state.bag.map((item,index)=>{   // this.state.bag是在state里面定义的数组为了循环数据
                    return(                                    
                        <div key={index} ref="myli" onClick={()=>this.getcommodity(index)} className=                            
                        {this.state.classId == index?this.state.arr.join(' '):"swiper-slide"}>
                        <div className={this.state.classId == index ?style.low:null}></div>
                        <div className="show">
                        <img src={item.img}></img>
                        <p>{item.title}</p>
                        </div>
                        </div>
                    )
                })
            }
    </div>
</div>

之后就可以再render()里面写我们的html代码

 end:

          可能会存在很多bug,但是没有什么bug是用原生解决不了的

javascript   is very good!

 

 

 

2019-07-11 16:15:49 h_doum 阅读数 32
  • 2019 react入门至高阶实战,含react hooks

    这是2019 react入门到高级新课程 学习react,不仅能带来技术提升,同时提高开发效率和体验,更能带来好的就业机会。 本课程主要分为以下几个部分:  一,前端工程化基础?  主要学习node和npm、yarn的基本用法  二,es6语法 学习必备的es6常用语法 。 三,react基础知识  学习如何搭建react项目,以及react组件,jsx语法、css处理方案、生命周期等基础知识。 并且根据这些知识开发一个个人网站。 四,react进阶知识?? 学习表单的处理,事件处理,Portals的使用,以及数据请求和API管理等进阶知识。 五,react高阶知识?? 学习react高级特性,react hooks,以及整个react生态体系的构成和应用 。 努力学习哟,带你精通react。

    1980 人正在学习 去看看 梁富城

在React中使用Swiper做触摸内容滑动

缘由

在实现一个触摸内容滑动的功能的时候,想reactJS该怎么处理呢,然后被提点用Swiper可以,一想确实可以。。。。用了网上的一些用在react里面的Swiper,但是并不怎么靠谱和好用。最后看博客,觉得说得很好,原生可以解决所有问题- 0 -,于是去官网看来一下文档,果然原生克一切。

实现以及心得

心得:官方文档一般是最详细也是最清楚的。
附上Swiper的API地址:https://www.swiper.com.cn/api/index.html
使用方法

  • 使用npm安装Swiper
npm install swiper
  • 导入进js文件
import Swiper from 'swiper/dist/js/swiper.js';
import 'swiper/dist/css/swiper.min.css';
  • 在componentDidMount创建一个Swiper(有一些注意事项和代码注释,写在代码下面了)
componentDidMount() {
    var that = this;
    that.getDate(that.state.pramcurrent);//
    new Swiper('.swiper-container', {
      observer: true,
      on: {
        reachEnd: function () {
          if(that.state.current<that.state.total-2){
            that.setState({pramcurrent:that.state.pramcurrent+1})//
            that.getDate(that.state.pramcurrent);//
            that.setState();//
          }
        },
        slideChangeTransitionEnd: function () {
          that.setState({ current: this.activeIndex + 1 });//
        },
      }
    });
  }

Tip:

1.Swiper中的参数,第一个是不用变的,第二个的话,需要什么功能就去API里面查,并且添加就好了,这个代码里面主要是用了一个监视器observer,改变Swiper状态的时候自动初始化swiper,方便分页请求,滑动到最后一页再加载两页。on里面是写事件的,这里用了两个,一个是检测到滑动到最后一页的事件reachEnd,用来做动态加载,一个是slideChangeTransitionEnd,切换结束后执行的事件,这个主要是用来做下面的页面显示。当前在多少页,因为是动态加载,所以官方提供的分页器不太好用。
2.一定要在开始的时候,var that=this;不然在事件中调用this.state.xxxx会报错。

  • render中的直接使用Swiper
render() {
    const bannerImg = this.state.totalSwiper;
    var bannerImgRender = (
      bannerImg.map((item, index) => (
        <div key={index} className="swiper-slide">
          <div className="sbjs2">
            <img src={item} className='sb2'></img>
            //中间可以写各种代码,都可以滑动。仅仅只能放图片。
          </div>
        </div>
      ))
    );
    return (
          <div className="swiper-container">
            <div className="swiper-wrapper">
              {bannerImgRender}
            </div>
          </div>
          <div className='fy'>{this.state.current} / {this.state.total} </div>
        </div>
    );
  }

tip:
1.这样子写,不仅仅就滑动图片,组件也可以滑动。直接用map遍历数据,就可以每次滑动的时候改变数据,数据写在state里面。然后可以动态读取接口的数据。

总结

大概框架就是这样的,下次要用的话直接复制过去就可以啦。

2019-02-23 10:39:46 qq_41620704 阅读数 520
  • 2019 react入门至高阶实战,含react hooks

    这是2019 react入门到高级新课程 学习react,不仅能带来技术提升,同时提高开发效率和体验,更能带来好的就业机会。 本课程主要分为以下几个部分:  一,前端工程化基础?  主要学习node和npm、yarn的基本用法  二,es6语法 学习必备的es6常用语法 。 三,react基础知识  学习如何搭建react项目,以及react组件,jsx语法、css处理方案、生命周期等基础知识。 并且根据这些知识开发一个个人网站。 四,react进阶知识?? 学习表单的处理,事件处理,Portals的使用,以及数据请求和API管理等进阶知识。 五,react高阶知识?? 学习react高级特性,react hooks,以及整个react生态体系的构成和应用 。 努力学习哟,带你精通react。

    1980 人正在学习 去看看 梁富城

最近再学习react框架,想做想做一个轮播的组件,就先在网上扒拉了一下,开始照葫芦画瓢,先上图,说一下问题

 而且我已经重新设置的css样式

找了好久,最后发现问题,每个swiper-slide元素的宽度是750.4px,而每次轮播图滑动时transform在X轴方向移动的距离是734px,让我联想到了在vue中使用swiper插件使用了

就是在组件挂载完成时,会等css树也挂载完成才去更新swiper,由于在react中不知时如何使用的,于是在创建swiper时增加了个定时器,如下图

这样再来看效果就ok了,大功告成。

2019-04-12 19:16:19 WWW_wwwww 阅读数 720
  • 2019 react入门至高阶实战,含react hooks

    这是2019 react入门到高级新课程 学习react,不仅能带来技术提升,同时提高开发效率和体验,更能带来好的就业机会。 本课程主要分为以下几个部分:  一,前端工程化基础?  主要学习node和npm、yarn的基本用法  二,es6语法 学习必备的es6常用语法 。 三,react基础知识  学习如何搭建react项目,以及react组件,jsx语法、css处理方案、生命周期等基础知识。 并且根据这些知识开发一个个人网站。 四,react进阶知识?? 学习表单的处理,事件处理,Portals的使用,以及数据请求和API管理等进阶知识。 五,react高阶知识?? 学习react高级特性,react hooks,以及整个react生态体系的构成和应用 。 努力学习哟,带你精通react。

    1980 人正在学习 去看看 梁富城

1、安装
npm install swiper

2、引入js和css
// 引入此路径,才不会打包失败
import Swiper from ‘swiper/dist/js/swiper.js’
import ‘swiper/dist/css/swiper.min.css’
3、在组件挂载完毕的时候生成 Swiper 对象

	componentDidMount(){
    new Swiper('.swiper-container', {
        loop: true,     //循环
        autoplay:{      //自动播放,注意:直接给autoplay:true的话,在点击之后不能再自动播放了
            delay: 2500,
            disableOnInteraction: false,    //户操作swiper之后,是否禁止autoplay。默认为true:停止。
        },
        pagination: {
            el: '.swiper-pagination',
            clickable: true,    // 允许点击跳转
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    });
}

4、render周期中渲染DOM元素
render() {
const bannerImg = this.props.bannerImg;
return (



{bannerImg.map((item,index)=>(
<div key={index} className=“swiper-slide” style={{backgroundImage:url(${item})}}>

))}


// swiper-button-warp是自己加的,为了让按钮居中对齐




)
}

2018-10-10 14:59:23 qq_42767631 阅读数 4650
  • 2019 react入门至高阶实战,含react hooks

    这是2019 react入门到高级新课程 学习react,不仅能带来技术提升,同时提高开发效率和体验,更能带来好的就业机会。 本课程主要分为以下几个部分:  一,前端工程化基础?  主要学习node和npm、yarn的基本用法  二,es6语法 学习必备的es6常用语法 。 三,react基础知识  学习如何搭建react项目,以及react组件,jsx语法、css处理方案、生命周期等基础知识。 并且根据这些知识开发一个个人网站。 四,react进阶知识?? 学习表单的处理,事件处理,Portals的使用,以及数据请求和API管理等进阶知识。 五,react高阶知识?? 学习react高级特性,react hooks,以及整个react生态体系的构成和应用 。 努力学习哟,带你精通react。

    1980 人正在学习 去看看 梁富城

1. 安装 Swiper

npm install --save swiper

2. 编写 Swiper 组件

  1. 首先引入 Swiper 以及样式
// 引入此路径,才不会打包失败
import Swiper from 'swiper/dist/js/swiper.js'

import 'swiper/dist/css/swiper.min.css'
  1. 在组件挂载完毕的时候生成 Swiper 对象
componentDidMount () {
    
      var mySwiper = new Swiper('.swiper-container', {
        autoplay: true,
        loop: true,
        pagination : {
            el: '.swiper-pagination',
        }
      });
}

 

2 . 在 React 的 render 方法构造 html 结构

render() {
    return (
      <div className="App">
        <div className="swiper-container">
        <div className="swiper-wrapper">
          <div className="swiper-slide">Slide 1</div>
          <div className="swiper-slide">Slide 2</div>
          <div className="swiper-slide">Slide 3</div>
        </div>
        <div className='swiper-pagination'></div>
      </div>
      </div>
    );
  }
}

这样就可以了

react中使用swiper

阅读数 24

React 项目使用Swiper

阅读数 198

没有更多推荐了,返回首页