1. TreeDPicker.tsx文件
原理就不想赘述了, 想了解的话, 网址在:
使用vue写一个picker插件,使用3d滚轮的原理_vue3中支持3d picker选择器插件-CSDN博客
import React, { useEffect, useRef, Ref, useState } from "react";
import Animate from "../utils/animate";
import _ from "lodash";
import "./Picker.scss";
import * as ReactDOM from "react-dom";
import MyTransition from "./MyTransition";
interface IProps {
selected?: number | string;
cuIdx: number;
pickerArr: string[]|number[];
isShow: boolean;
setIsShow: (arg1: boolean) => void;
setSelectedValue: (arg1: number|string) => void;
}
interface IFinger {
startY: number;
startTime: number;
currentMove: number;
prevMove: number;
}
type ICurrentIndex = number;
const a = -0.003; // 加速度
let radius = 2000; // 半径--console.log(Math.PI*2*radius/LINE_HEIGHT)=>估算最多可能多少条,有较大误差,半径2000应该够用了,不够就4000
const LINE_HEIGHT = 36; // 文字行高
const FRESH_TIME = 1000 / 60; // 动画帧刷新的频率大概是1000 / 60
// 反正切=>得到弧度再转换为度数,这个度数是单行文字所占有的。
let singleDeg = 2 * ((Math.atan(LINE_HEIGHT / 2 / radius) * 180) / Math.PI);
const REM_UNIT = 37.5; // px转化为rem需要的除数
const SCROLL_CONTENT_HEIGHT = 300; // 有效滑动内容高度
const TreeDPicker = (props: IProps) => {
const pxToRem = (pxNumber) => {
return Number(pxNumber / REM_UNIT) + "rem";
};
const heightRem = pxToRem(LINE_HEIGHT); // picker的每一行的高度--单位rem
const lineHeightRem = pxToRem(LINE_HEIGHT); // picker的每一行的文字行高--单位rem
const radiusRem = pxToRem(radius); // 半径--单位rem
const { cuIdx, pickerArr, isShow, setIsShow, setSelectedValue } = props; // 解构props, 得到需要使用来自父页面传入的数据
const[pickerIsShow, setPickerIsShow] = useState(props.isShow)
useEffect(() => {
setPickerIsShow(isShow)
}, [isShow])
// 存储手指滑动的数据
const finger0 = useRef<IFinger>({
startY: 0,
startTime: 0, // 开始滑动时间(单位:毫秒)
currentMove: 0,
prevMove: 0,
});
const finger = _.get(finger0, "current") || {};
const currentIndex = useRef<ICurrentIndex>(0);
const pickerContainer = useRef() as Ref<any>;
const wheel = useRef() as Ref<any>;
let isInertial = useRef<boolean>(false); // 是否正在惯性滑动
// col-wrapper的父元素, 限制滚动区域的高度,内容正常显示(col-wrapper多余的部分截掉不显示)
const getWrapperFatherStyle = () => {
return {
height: pxToRem(SCROLL_CONTENT_HEIGHT),
};
};
// class为col-wrapper的style样式: 滚轮的外包装理想样式--展示半径的内容可见,另外的半径隐藏
const getWrapperStyle = () => ({
height: pxToRem(2 * radius),
// 居中: 1/2直径 - 1/2父页面高度
transform: `translateY(-${pxToRem(radius - SCROLL_CONTENT_HEIGHT / 2)})`,
});
// 当父元素(class为col-wrapper), 定位是relative, 高度是直径: 2 * radius, 子页面想要居中, top: (1/2直径)-(1/2*一行文字高度)
const circleTop = pxToRem(radius - LINE_HEIGHT / 2); // 很重要!!!
// col-wrapper的子元素 => 3d滚轮的内容区域样式--useRef=wheel的元素样式
const getListTop = () => ({
top: circleTop,
height: pxToRem(LINE_HEIGHT),
});
// col-wrapper的子元素 => 参照一般居中的做法,[50%*父页面的高度(整个圆的最大高度是直径)]-居中内容块(文本的行高)的一半高度
const getCoverStyle = () => {
return {
backgroundSize: `100% ${circleTop}`,
};
};
// col-wrapper的子元素 => 应该也是参照居中的做法(注意减去两条边框线)
const getDividerStyle = () => ({
top: `calc(${circleTop} - ${pxToRem(0)})`,
height: pxToRem(LINE_HEIGHT),
});
const animate = new Animate();
function initWheelItemDeg(index) {
// 初始化时转到父页面传递的下标所对应的选中的值
// 滑到父页面传的当前选中的下标cuIdx处
const num = -1 * index + Number(cuIdx);
const transform = getInitWheelItemTransform(num);
// 当前的下标
return {
transform: transform,
height: heightRem,
lineHeight: lineHeightRem,
};
}
/**
* 1、translate3d
在浏览器中,y轴正方向垂直向下,x轴正方向水平向右,z轴正方向指向外面。
z轴越大离我们越近,即看到的物体越大。z轴说物体到屏幕的距离。
*
*/
function getInitWheelItemTransform(indexNum) {
// 初始化时转到父页面传递的下标所对应的选中的值
// 滑动的角度: 该行文字下标 * 一行文字对应的角度
const rotate3dValue = getMoveWheelItemTransform(indexNum * LINE_HEIGHT);
return `${rotate3dValue} translateZ(calc(${radiusRem} / 1))`;
}
function getMoveWheelItemTransform(move) {
// 初始化时转到父页面传递的下标所对应的选中的值
const indexNum = Math.round(move / LINE_HEIGHT);
// 滑动的角度: 该行文字下标 * 一行文字对应的角度
const wheelItemDeg = indexNum * singleDeg;
return `rotateX(${wheelItemDeg}deg)`;
}
function listenerTouchStart(ev) {
ev.stopPropagation();
isInertial.current = false; // 初始状态没有惯性滚动
finger.startY = ev.targetTouches[0].pageY; // 获取手指开始点击的位置
finger.prevMove = finger.currentMove; // 保存手指上一次的滑动距离
finger.startTime = Date.now(); // 保存手指开始滑动的时间
}
function listenerTouchMove(ev) {
ev.stopPropagation();
// startY: 开始滑动的touch目标的pageY: ev.targetTouches[0].pageY减去
const nowStartY = ev.targetTouches[0].pageY; // 获取当前手指的位置
// finger.startY - nowStart为此次滑动的距离, 再加上上一次滑动的距离finger.prevMove, 路程总长: (finger.startY - nowStartY) + finger.prevMove
finger.currentMove = finger.startY - nowStartY + finger.prevMove;
let wheelDom =
_.get(wheel, "current") ||
document.getElementsByClassName("wheel-list")[0];
if (wheelDom) {
wheelDom.style.transform = getMoveWheelItemTransform(finger.currentMove);
}
}
function listenerTouchEnd(ev) {
ev.stopPropagation();
const _endY = ev.changedTouches[0].pageY; // 获取结束时手指的位置
const _entTime = Date.now(); // 获取结束时间
const v = (finger.startY - _endY) / (_entTime - finger.startTime); // 滚动完毕求移动速度 v = (s初始-s结束) / t
const absV = Math.abs(v);
isInertial.current = true; // 最好惯性滚动,才不会死板
animate.start(() => inertia({ start: absV, position: Math.round(absV / v), target: 0 })); // Math.round(absV / v)=>+/-1
}
/**用户结束滑动,应该慢慢放慢,最终停止。从而需要 a(加速度)
* @param start 开始速度(注意是正数) @param position 速度方向,值: 正负1--向上是+1,向下是-1 @param target 结束速度
*/
function inertia({ start, position, target }) {
if (start <= target || !isInertial.current) {
animate.stop();
finger.prevMove = finger.currentMove;
getSelectValue(finger.currentMove); // 得到选中的当前下标
return;
}
// 这段时间走的位移 S = (+/-)vt + 1/2at^2 + s1;
const move =
position * start * FRESH_TIME +
0.5 * a * Math.pow(FRESH_TIME, 2) +
finger.currentMove;
const newStart = position * start + a * FRESH_TIME; // 根据求末速度公式: v末 = (+/-)v初 + at
let actualMove = move; // 最后的滚动距离
let wheelDom =
_.get(wheel, "current") ||
document.getElementsByClassName("wheel-list")[0];
// 已经到达目标
// 当滑到第一个或者最后一个picker数据的时候, 不要滑出边界
// 因为在开始的时候加了父页面传递的下标,这里需要减去才能够正常使用
const minIdx = 0 - cuIdx;
const maxIdx = pickerArr.length - 1 - cuIdx;
if (Math.abs(newStart) >= Math.abs(target)) {
if (Math.round(move / LINE_HEIGHT) < minIdx) {
// 让滚动在文字区域内,超出区域的滚回到边缘的第一个文本处
actualMove = minIdx * LINE_HEIGHT;
} else if (Math.round(move / LINE_HEIGHT) >= maxIdx) {
// 让滚动在文字区域内,超出区域的滚回到边缘的最后一个文本处
actualMove = maxIdx * LINE_HEIGHT;
}
if (wheelDom)
wheelDom.style.transition =
"transform 700ms cubic-bezier(0.19, 1, 0.22, 1)";
}
// finger.currentMove赋值是为了点击确认的时候可以使用=>获取选中的值
finger.currentMove = actualMove;
if (wheelDom)
wheelDom.style.transform = getMoveWheelItemTransform(actualMove);
animate.stop();
// animate.start(() => inertia.bind({ start: newStart, position, target }));
}
// 滚动时及时获取最新的当前下标--因为在初始化的时候减去了,所以要加上cuIdx,否则下标会不准确
function getSelectValue(move) {
const idx = Math.round(move / LINE_HEIGHT) + Number(cuIdx);
currentIndex.current = idx;
return idx;
}
function sure() {
// 点击确认按钮
getSelectValue(finger.currentMove);
setSelectedValue(pickerArr[currentIndex.current]);
setTimeout(() => {
close();
}, 0);
}
function close() {
setTimeout(() => {
setPickerIsShow(false);
// 延迟关闭, 因为MyTransition需要这段事件差执行动画效果
setTimeout(() => {
setIsShow(false)
}, 500);
}, 0);
} // 点击取消按钮
useEffect(() => {
const dom =
_.get(pickerContainer, "current") ||
document.getElementsByClassName("picker-container")[0];
try {
dom.addEventListener("touchstart", listenerTouchStart, false);
dom.addEventListener("touchmove", listenerTouchMove, false);
dom.addEventListener("touchend", listenerTouchEnd, false);
} catch (error) {
console.log(error);
}
return () => {
const dom =
_.get(pickerContainer, "current") ||
document.getElementsByClassName("picker-container")[0];
dom.removeEventListener("touchstart", listenerTouchStart, false);
dom.removeEventListener("touchmove", listenerTouchMove, false);
dom.removeEventListener("touchend", listenerTouchEnd, false);
};
}, [_.get(pickerContainer, "current")]);
return ReactDOM.createPortal(
<div className="picker-container">
<div ref={pickerContainer}>
{isShow+''}
<MyTransition name="myPopup" transitionShow={pickerIsShow}>
{isShow && (
<section className="pop-cover" onClick={close}></section>
)}
</MyTransition>
<MyTransition name="myOpacity" transitionShow={pickerIsShow}>
{isShow && (
<section>
<div className="btn-box">
<button onClick={close}>取消</button>
<button onClick={sure}>确认</button>
</div>
<div
className="col-wrapper-father"
style={getWrapperFatherStyle()}
>
<div className="col-wrapper" style={getWrapperStyle()}>
<ul className="wheel-list" style={getListTop()} ref={wheel}>
{_.map(pickerArr, (item, index) => {
return (
<li
className="wheel-item"
style={initWheelItemDeg(index)}
key={"wheel-list-"+index}
>
{item+''}
</li>
);
})}
</ul>
<div className="cover" style={getCoverStyle()}></div>
<div className="divider" style={getDividerStyle()}></div>
</div>
</div>
</section>
)}
</MyTransition>
</div>
</div>,
document.body
);
};
export default TreeDPicker;
2. scss文件:
@import "./common.scss";
.picker-container {
position: fixed;
bottom: 0;
left: 0;
right: 0;
// transition动画部分
.myOpacity-enter,
.myOpacity-leave-to {
opacity: 0;
// 因为picker滚动区域有过transform, 这里也写transform的话会导致本不该滚动的地方滚动了
}
.myOpacity-enter-active,
.myOpacity-leave-active {
opacity: 1;
transition: all 0.5s ease;
}
.myPopup-enter,
.myPopup-leave-to {
transform: translateY(100px);
}
.myPopup-enter-active,
.myPopup-leave-active {
transition: all 0.5s ease;
}
// 透明遮罩
.pop-cover {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 100vh;
background: rgba(0, 0, 0, 0.5);
z-index: -1;
}
// 确认 取消按钮box
.btn-box {
height: pxToRem(40px);
background: rgb(112, 167, 99);
display: flex;
justify-content: space-between;
font-size: pxToRem(16px);
& button {
background-color: rgba(0, 0, 0, 0);
border: none;
color: #fff;
}
}
.col-wrapper-father {
overflow: hidden;
}
//overflow: hidden=>截掉多余的部分,显示弹窗内容部分
ul,
li {
list-style: none;
padding: 0;
margin: 0;
}
// 为了方便掌握重点样式,简单的就直接一行展示,其他的换行展示,方便理解
.col-wrapper {
position: relative;
border: 1px solid #ccc;
text-align: center;
background: #fff;
&>.wheel-list {
position: absolute;
width: 100%;
transform-style: preserve-3d;
transform: rotate3d(1, 0, 0, 0deg);
.wheel-item {
backface-visibility: hidden;
position: absolute;
left: 0;
top: 0;
width: 100%;
border: 1px solid #eee;
font-size: pxToRem(16px);
}
}
&>.cover {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: linear-gradient(0deg, rgba(white, 0.6), rgba(white, 0.6)), linear-gradient(0deg,
rgba(white, 0.6),
rgba(white, 0.6));
background-position: top, bottom;
background-repeat: no-repeat;
}
&>.divider {
position: absolute;
width: 100%;
left: 0;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
}
}
3. transition组件(之前写了一篇文章有提到):文章来源:https://www.toymoban.com/news/detail-720707.html
react简单写一个transition动画组件然后在modal组件中应用-CSDN博客文章来源地址https://www.toymoban.com/news/detail-720707.html
到了这里,关于react写一个简单的3d滚轮picker组件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!