ReactHooks+ts(函数组件)实现原生轮播的示例

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轮播内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

你可能感兴趣的:(ReactHooks+ts(函数组件)实现原生轮播的示例)