低性能3张图片轮播React组件
import React from 'react'; import {getSwipeWay} from '../utils/swipe'; class Carousel extends React.Component { constructor(args){
super(args);
this.state = {
};
//判断滑动手势
this.swipeWay = getSwipeWay(50);//闸值50
//图片显示的限制
this.limit = 3;
//当前展示的图片
this.currIndex = 0;
//展示的数组
this.showImgs = [];
//手势滑动坐标
this.position = {
x1:0,
x2:0,
y1:0,
y2:0,
};
//<ul>
this.Ul = null;
} getHead(arr){
if(Array.isArray(arr)){
return arr[0];
}
console.error('非数组');
} getLast(arr){
if(Array.isArray(arr)){
const len = arr.length;
return arr[len-1];
}
console.error('非数组');
} calcIndex(){
const {imgs} = this.props;
const len = imgs.length;
const limit = this.limit;
const currIndex = this.currIndex; if(currIndex == 0){
this.showImgs = imgs.slice(0,limit - 1);
this.showImgs.unshift(this.getLast(imgs));
return;
} if(currIndex == len - 1){
this.showImgs = imgs.slice(len -2 ,len);
this.showImgs.push(this.getHead(imgs));
return;
} this.showImgs = imgs.slice(currIndex -1 , currIndex + limit -1); } changeCurrIndex(flag){
const {imgs} = this.props;
const last = imgs.length -1;
const currIndex = this.currIndex;
if(flag === '-'){
this.currIndex = currIndex == 0 ? last : currIndex -1 ;
return;
} if(flag === '+'){
this.currIndex = currIndex == last ? 0 : currIndex + 1 ;
return;
}
} ulTranslate(value){
const Ul = this.Ul;
if(Ul && Ul.style.webkitTranslate ){
Ul.style.webkitTranslate = value;
}else{
Ul.style.translate = value;
}
} createUl(){
//要保证<ul>key不同 也就是每次轮播后都要是新的标签,有损性能
const now = Date.now();
return (<ul onTouchEnd={this.touchEnd}
onTouchMove={this.touchMove}
onTouchStart={this.touchStart}
onTransitionEnd={this.transitionEnd} ref={(ele)=>this.Ul=ele} key={now}> {this.createLis()}
</ul>);
} createLis(){
this.calcIndex();
const imgs = this.showImgs; return imgs.map((src,i)=>{
const liStyle = {
// translate:(-i)+'00%',
translate:( (i+'00') - 100 ) + '%',
WebkitTranslate:( (i+'00') - 100 ) + '%',
}; return <li className='item' key={i} style={liStyle} ><img src={src} /></li>
}); } touchStart = (e) => {
const {clientX,clientY} = e.touches[0];
this.position.x1 = clientX;
this.position.y1 = clientY;
} touchMove = (e) => { } touchEnd = (e) => {
const {clientX,clientY} = e.changedTouches[0];
this.position.x2 = clientX;
this.position.y2 = clientY; const {x1,x2,y1,y2} = this.position; const direction = this.swipeWay(x1,x2,y1,y2); if( direction === 'Left'){
this.changeCurrIndex('+');
this.ulTranslate('-100%');
} if(direction === 'Right'){
this.changeCurrIndex('-');
this.ulTranslate('100%');
}
} transitionEnd = (e) => {
this.forceUpdate();
} render(){ return (<div className='mm-carousel' >
{this.createUl()}
</div>);
}
} export default Carousel;
.mm-carousel{
overflow:hidden;
>ul{
height: 150px;
width: 100%;
position : relative;
transition: all 0.2s;
>.item{
position:absolute;
width: 100%;
>img{
width: 100%;
height: 150px;
}
}
} }
export const getSwipeWay =(U) => (x1,x2,y1,y2) => {
const X = x2 - x1 ;
const Y = y2 - y1 ;
const {abs} = Math; if(abs(X) < abs(U) && abs(Y) < abs(U)){
return false;
} if(abs(Y) > abs(X) && Y < 0){
return 'Up';
} if(abs(Y) > abs(X) && Y > 0){
return 'Down';
} if(abs(Y) < abs(X) && X > 0){
return 'Right';
} if(abs(Y) < abs(X) && X < 0){
return 'Left';
} }
低性能3张图片轮播React组件的更多相关文章
- 继上一篇随笔,优化3张以上图片轮播React组件
import React from 'react'; import PropTypes from 'prop-types'; import {getSwipeWay} from '../utils/s ...
- reactjs-swiper react轮播图组件基于swiper
react轮播图组件基于swiper demo地址:http://reactjs-ui.github.io/reactjs-swiper/simple.html 1. 下载安装 npm install ...
- 原生JS面向对象思想封装轮播图组件
原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...
- Vue实现音乐播放器(七):轮播图组件(二)
轮播图组件 <template> <div class="slider" ref="slider"> <div class=&qu ...
- 03 uni-app框架学习:轮播图组件的使用
1.轮播图组件的使用 参照官方文档 2.在页面上加入这个组件 3.在页面中引去css样式 并编写样式 ps:upx单位是什么 简单来说 就相当于小程序中的rpx 是一个自适应的单位 会根据屏幕宽度自动 ...
- Vue2 轮播图组件 slide组件
Vue2原生始轮播图组件,支持宽度自适应.高度设置.轮播时间设置.左右箭头按钮控制,圆点按钮切换,以及箭头.圆点按钮是否显示. <v-carousel :slideData="slid ...
- vue移动音乐app开发学习(三):轮播图组件的开发
本系列文章是为了记录学习中的知识点,便于后期自己观看.如果有需要的同学请登录慕课网,找到Vue 2.0 高级实战-开发移动端音乐WebApp进行观看,传送门. 完成后的页面状态以及项目结构如下: 一: ...
- taro 自定义 轮播图组件
1.代码 components/MySwiper/index.js /** * 轮播图组件 */ import Taro, { Component } from '@tarojs/taro'; imp ...
- 使用原生js将轮播图组件化
代码地址如下:http://www.demodashi.com/demo/11316.html 这是一个轮播图组件,这里是代码地址,需要传入容器的id和图片地址,支持Internet Explor ...
随机推荐
- cmd - 命令行窗口中文乱码
问题 在cmd窗口中输入curl www.baidu.com可以看到有中文乱码的现象,这是因为默认使用的是GBK编码.另外,curl是利用URL语法在命令行方式下工作的开源文件传输工具.它被广泛应用在 ...
- 虚拟机无法分配内存 virtual memory exhausted: Cannot allocate memory
1.内存交换空间(swap)的构建 安装Linux时一定需要的两个分区:根目录和swap(内存交换空间). swap的功能:在应付物理内存不足的情况下所造成的内存扩展记录的功能. 物理内存不足的时候, ...
- AVL树(自平衡二叉查找树)
了解AVL树之前要先了解二叉查找树(BST),BST查找元素的时间复杂度平均是O(logN),最坏的情况是O(N),所有的元素都接在左子树(或者右子树)就相当于一串链表了.而AVL树会对子树过高的情况 ...
- Java中try catch finally语句中含有return语句的执行情况
finally块中的内容会先于try中的return语句执行,如果finall语句块中也有return语句的话,那么直接从finally中返回了,这也是不建议在finally中return的原因.下面 ...
- 自己写的Grid组件,第二版
大体没什么变化,主要是添加了一个方法,getSelectedItems(),返回当前选中的数据项. (function ($) { $.fn.GridView = function (setting) ...
- bio,nio,aio简介
https://mp.weixin.qq.com/s/F9WwcsFdCOwOeeDc0oc98w——<BIO,NIO,AIO 总结>总结和对比这三种的区别 https://www.jia ...
- REST访问(RestTemplate)
https://www.cnblogs.com/softidea/p/6910198.html 经常需要发送一个GET/POST请求到其他系统(REST API),通过JDK自带的HttpURLCon ...
- javaScript中的闭包原理 (译)
这篇文章通过javaScript代码解释了闭包的原理,来让编程人员理解闭包.它不是写给大牛或使用功能性语言进行编程的程序员的.一旦意会了其核心概念,闭包理解起来并不难.然而,你不可能通过阅读任何有关闭 ...
- vue axios post不能本地json
vue 脚本架里axios post是不能本地json,GET可以 解决这个问题需要自己在node里写脚本: 在build里新建立fakedata.js var express = require(' ...
- Emacs Org-mode中英文字体设置
Emacs Org-mode中英文字体设置 Table of Contents 1. 缺省字体存在的问题 2. 解决方法 2.1. 环境说明 2.2. 思路和方法 2.3. emacs设置代码 2.4 ...