2022-07-23 工作记录--JS/React-点击字母滑块里的字母，列表盒子匀速滑动到对应位置

JS-点击字母滑块里的字母，列表盒子匀速滑动到对应位置

一、实现效果

点击字母滑块里的字母，若列表盒子里有公司名称首字母等于该字母，就匀速滑动到对应位置。

举例 🌰 如下图👇🏻：点击字母滑块里的G字母，列表盒子则匀速滑动到公司名称首字母为G字母位置。

二、实现方式

1、获取到当前点击的滑块字母 selectedLetter；
2、获取到 左侧列表盒子中 公司名称首字母数组合集 firstLetterArr；
3、获取到 公司名称首字母数组合集 里 第一个 与 当前点击的滑块字母selectedLetter 相等的索引值 currentIndex；
4、获取到单个公司盒子的高度（包含其margin-bottom值）totalHeight；
5、获取到点击后 列表盒子对应滑动的y值 scrollYValue；
6、列表盒子匀速滑动到对应位置。

三、代码收获点

1、将字母转换成大写

字母.toUpperCase()

2、获取到div的margin-bottom值

比如：获取到类名为companyDetail的margin-bottom值

const marginBottom = getComputedStyle(document.querySelector(".companyDetail")).marginBottom; // 13.1px
const marginBottomValue = getComputedStyle(document.querySelector(".companyDetail")).marginBottom.slice(0, -2); // 13.1

三、实现代码

listFundCompanies.jsx

'use strict';

import React from 'react';
import { observer } from 'mobx-react';
import store from '../../store/index'; // 接口相关的文件
import { _throttle } from '@src/utils/utils'; // 节流（防连点）
import './listFundCompanies.less';

@observer
class ListFundCompanies extends React.Component {
  constructor(props) {
    super(props);
  }

  // 26个英文大写字母数组
  letterArr = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']

  async componentDidMount() {
    await store.checkCompanyList(); // 请求接口-查询公司列表
  }

  // 监听点击事件：点击字母滑块里的字母，列表盒子匀速滑动到对应位置 
  slideCompanyList = (selectedLetter) => {
    /** 1、获取到当前点击的滑块字母 */
    console.log('当前点击的滑块字母：', selectedLetter);

    /** 2、获取到 左侧列表盒子中 公司名称首字母数组合集 */
    const { companyList } = store; // 公司列表数据
    const firstLetterArr = [];
    companyList?.list?.forEach((item) => {
      // .toUpperCase(): 转换成大写字母
      firstLetterArr.push(item.firstLetter.toUpperCase());
    });
    console.log('公司名称首字母数组合集：', firstLetterArr);

    /** 3、获取到 公司名称首字母数组合集 里 第一个 与 当前点击的滑块字母selectedLetter 相等的索引值currentIndex */
    const currentIndex = firstLetterArr.indexOf(selectedLetter);
    console.log('公司名称首字母数组合集 里 第一个 与 当前点击的滑块字母selectedLetter 相等的索引值：', currentIndex);

    /** 4、获取到单个公司盒子的高度（包含其margin-bottom值） */
    const companyHeight = document.querySelector(".companyDetail").offsetHeight; // 公司盒子的高度
    const marginBottomValue = getComputedStyle(document.querySelector(".companyDetail")).marginBottom.slice(0, -2); // 公司盒子的margin-bottom值
    const totalHeight = companyHeight * 1 + marginBottomValue * 1;
    console.log('单个公司盒子的高度（包含其margin-bottom值）：', totalHeight);

    /** 5、获取到点击后 列表盒子对应滑动的y值 scrollYValue */
    const scrollYValue = currentIndex * totalHeight;
    console.log('列表盒子对应滑动的y值：', scrollYValue);

    /** 6、列表盒子匀速滑动到对应位置  */
    document.querySelector(".companyIntroduction")?.scrollTo({
  		left: 0,
  		top: scrollYValue,
  		behavior: 'smooth'
	});
  }

  render() {
    const { companyList } = store; // 公司列表数据
    return (
      <div className="listFundCompanies">
        {/* 列表盒子 */}
        <div className="companyIntroduction">
          {
            companyList?.list?.length > 0 ?
              companyList?.list?.map((item, index) => {
                return (
                  // 单个公司盒子
                  <div className="companyDetail" key={item.companyId}>
                    <span className="number">{index + 1}</span>
                    {/* 文字内容 */}
                    <div className="texts">
                      <span className="nameCompany">{item.companyName}</span>
                      <div className="companyDescription">
                        {item.companySlogan}
                      </div>
                      <span className="votes">票数：{item.baseVoteNum}</span>
                    </div>
                    {/* 「直接投票」按钮 */}
                    <span className="voteButton"></span>
                  </div>
                )
              }) : <div className="noCompanies">暂无匹配的基金公司名称哦~</div>
          }
        </div>
        {/* 字母滑块 */}
        <div className="slider">
          <div className="sliderContent">
            {
              this?.letterArr?.length > 0 &&
              this?.letterArr?.map((item, index) => {
                return (
                  <div className="letter" key={index} onClick={() => { this.slideCompanyList(item) }}>{item}</div>
                )
              })
            }
          </div>
        </div>
      </div>
    );
  }
}

export default ListFundCompanies;