1.下载依赖（第一个是js依赖，第二个是ts依赖）
npm install smoothscroll-polyfill --save
npm i --save-dev @types/smoothscroll-polyfill
2.创建tsx文件
import React, { useRef, useState, useEffect } from 'react'
import './index.less'
import smoothscroll from 'smoothscroll-polyfill'
interface List {
id: string,
text: string
}
export default () => {
const [ButtonList] = useState(
[
{
id: 'n1',
text: '推荐'
},
{
id: 'n2',
text: '女装'
},
{
id: 'n3',
text: '运动'
},
{
id: 'n4',
text: '美妆'
},
{
id: 'n5',
text: '男装'
},
{
id: 'n6',
text: '鞋靴'
},
{
id: 'n7',
text: '数码'
},
{
id: 'n8',
text: '母婴'
},
{
id: 'n9',
text: '家电'
},
{
id: 'n10',
text: '国际'
},
]
);
const [ContentList] = useState(
[
{
id: 'c1',
text: '推荐'
},
{
id: 'c2',
text: '女装'
},
{
id: 'c3',
text: '运动'
},
{
id: 'c4',
text: '美妆'
},
{
id: 'c5',
text: '男装'
},
{
id: 'c6',
text: '鞋靴'
},
{
id: 'c7',
text: '数码'
},
{
id: 'c8',
text: '母婴'
},
{
id: 'c9',
text: '家电'
},
{
id: 'c10',
text: '国际'
},
]
);
// ref
const navLine = useRef(null)
const tabRef = useRef(null)
const navListParent = useRef(null)
const contentScrollWrap = useRef(null)
const GetContentScrollWrap = () => {
return contentScrollWrap.current as HTMLDivElement
}
const GetTabRef = () => {
return tabRef.current as HTMLDivElement
}
const GetNavLine = () => {
return navLine.current as HTMLDivElement
}
const GetNavListPart = () => {
return navListParent.current as HTMLDivElement
}
// 变量
let swiperStartX: number = 0
let swiperMoveX: number = 0
let num: number = 0
let date: number = 0
let startX: number = 0
let flag: boolean = false
// 状态
const [Index, setIndex] = useState(0)
const [swiperItemWidth, setContentListWidth] = useState(0)
const [tabItemWidth, setNavListWidth] = useState(0)
const Cut = (key: number) => {
setIndex(key);
}
const FnStart = (e: React.TouchEvent) => {
date = Date.now()
num = 0
GetContentScrollWrap().style.transition = 'none'
swiperStartX = GetContentScrollWrap().offsetLeft - e.changedTouches[0].pageX;
startX = e.changedTouches[0].pageX;
GetContentScrollWrap().ontouchmove = FnMove;
}
const FnMove = (e: TouchEvent) => {
swiperMoveX = e.changedTouches[0].pageX;
if (num === 0) {
flag = true
}
num++
if (GetContentScrollWrap().offsetLeft > 0 || GetContentScrollWrap().offsetLeft < -swiperItemWidth * (ButtonList.length - 1)) return false
if (flag) {
GetContentScrollWrap().style.left = swiperMoveX + swiperStartX + 'px'
GetContentScrollWrap().ontouchend = FnEnd;
}
}
const FnEnd = (e: TouchEvent) => {
flag = false;
// let num = Index
GetContentScrollWrap().style.transition = 'left .3s linear'
if (Math.abs(startX - e.changedTouches[0].pageX) > swiperItemWidth / 2 || Date.now() - date < 300) {
// if (startX - e.changedTouches[0].pageX < 0) {
// if (Index > 0) {
// num = Index - 1
// } else {
// num = 0
// }
// } else if (Index + 1 > ButtonList.length - 1) {
// num = ButtonList.length - 1
// } else {
// num = Index + 1
// }
// setIndex(num)
setIndex(startX - e.changedTouches[0].pageX < 0 ? Index > 0 ? Index - 1 : 0
: Index + 1 > ButtonList.length - 1 ? ButtonList.length - 1 : Index + 1)
}
GetContentScrollWrap().style.left = -Index * swiperItemWidth + 'px'
GetContentScrollWrap().ontouchmove = null;
GetContentScrollWrap().ontouchend = null;
}
// 监听Index
useEffect(() => {
let lineTo = tabItemWidth * Index;
GetNavLine().style.transform = `translate3d(${lineTo}px,0,0)`;
GetNavLine().style.transition = '.1s';
//控制tab滚动
let tabTo = lineTo - tabItemWidth;
GetTabRef().scrollTo({ left: tabTo, behavior: "smooth" });
GetTabRef().style.transition = '.5s';
// 控制swiper滚动
let swiperTo = swiperItemWidth * Index;
GetContentScrollWrap().style.left = -swiperTo + 'px';
GetContentScrollWrap().style.transition = '.5s';
}, [Index]);
// 解决移动端 scrollTo 的 behavior: "smooth" 无效的问题
useEffect(() => {
smoothscroll.polyfill();
// swiper元素宽度
setContentListWidth((GetContentScrollWrap().children[0] as HTMLDivElement).offsetWidth)
// nav列表宽度
setNavListWidth((GetNavListPart().children[0] as HTMLDivElement).offsetWidth)
}, [])
return (
{ButtonList.map((item, index) =>
Cut(index)} className={Index === index ? "nav-list ac" : "nav-list"}>{item.text}
)}
{ContentList.map((item, index) =>
{item.text}
)}
)
}
3.创建less文件
.v-home-wrap {
touch-action: none;
.nav-wrap {
width: 100%;
overflow-x: scroll;
background: #f74077;
.nav {
padding: 0 20px;
display: flex;
align-items: center;
justify-content: space-between;
// min-width: 132vw;
color: #fff;
position: relative;
height: 82px;
.nav-list {
// box-sizing: border-box;
display: inline-block;
font-size: 28px;
padding: 0 18px;
min-width: 75px;
}
.nav-list.ac {
font-size: 34px;
}
.nav-line {
position: absolute;
width: 40px;
height: 6px;
background-color: #f9e2e8;
border-radius: 2px;
left: 45px;
bottom: 0;
// transition: all 1s;
}
}
}
.nav-wrap::-webkit-scrollbar {
display: none;
}
.content-wrap {
// overflow-x: scroll;
overflow: hidden;
height: 70vh;
position: relative;
left: 0;
.content {
min-width: 1000%;
display: flex;
height: 80vh;
// overflow-x: scroll;
position: absolute;
.content-list {
// white-space:nowrap;
// display: inline-block;
height: 80vh;
// overflow-y: scroll;
width: 100vw;
font-size: 50px;
text-align: center;
color: #fff;
}
.content-list:nth-child(2n) {
background: red;
}
.content-list:nth-child(2n-1) {
background: blue;
}
}
}
}
到此这篇关于ReactHooks+ts（函数组件）原生轮播的文章就介绍到这了,更多相关ReactHooks轮播内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！