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;