react IndexBar 选择器

index.tsx:

const CountrySelect: FC<CountryProps> = (props) => {

    useEffect(() => {
      initLetterList();
    }, []);

    const country = [
      { title: 'hot', val: ['1澳洲', '澳洲', '澳洲', '澳洲', '澳洲', '澳洲'] },
      { title: 'A', val: ['2澳洲', '澳洲', '澳洲', '澳洲', '澳洲', '澳洲'] },
      { title: 'B', val: ['3澳洲', '澳洲', '澳洲', '澳洲', '澳洲', '澳洲'] },
      { title: 'C', val: ['4澳洲', '澳洲', '澳洲', '澳洲', '澳洲', '澳洲'] },
      { title: 'D', val: ['5澳洲', '澳洲', '澳洲', '澳洲', '澳洲', '澳洲'] },
      { title: 'E', val: ['6澳洲', '澳洲', '澳洲', '澳洲', '澳洲', '澳洲'] },
      { title: 'F', val: ['7澳洲', '澳洲', '澳洲', '澳洲', '澳洲', '澳洲'] },
      { title: 'G', val: ['8澳洲', '澳洲', '澳洲', '澳洲', '澳洲', '澳洲'] },
      { title: 'H', val: ['9澳洲', '澳洲', '澳洲', '澳洲', '澳洲', '澳洲'] },
      { title: 'I', val: ['10澳洲', '澳洲', '澳洲', '澳洲', '澳洲', '澳洲'] },
      { title: 'J', val: ['11澳洲', '澳洲', '澳洲', '澳洲', '澳洲', '澳洲'] },
      { title: 'K', val: ['12澳洲', '澳洲', '澳洲', '澳洲', '澳洲', '澳洲'] },
      { title: 'L', val: ['13澳洲', '澳洲', '澳洲', '澳洲', '澳洲', '澳洲'] },
      { title: 'M', val: ['14澳洲', '澳洲', '澳洲', '澳洲', '澳洲', '澳洲'] },
      { title: 'N', val: ['15澳洲', '澳洲', '澳洲', '澳洲', '澳洲', '澳洲'] },
      { title: 'O', val: ['16澳洲', '澳洲', '澳洲', '澳洲', '澳洲', '澳洲'] },
      { title: 'P', val: ['17澳洲', '澳洲', '澳洲', '澳洲', '澳洲', '澳洲'] },
      { title: 'Q', val: ['18澳洲', '澳洲', '澳洲', '澳洲', '澳洲', '澳洲'] },
      { title: 'R', val: ['19澳洲', '澳洲', '澳洲', '澳洲', '澳洲', '澳洲'] },
      { title: 'S', val: ['20澳洲', '澳洲', '澳洲', '澳洲', '澳洲', '澳洲'] },
      { title: 'T', val: ['21澳洲', '澳洲', '澳洲', '澳洲', '澳洲', '澳洲'] },
      { title: 'U', val: ['22澳洲', '澳洲', '澳洲', '澳洲', '澳洲', '澳洲'] },
      { title: 'V', val: ['23澳洲', '澳洲', '澳洲', '澳洲', '澳洲', '澳洲'] },
      { title: 'W', val: ['24澳洲', '澳洲', '澳洲', '澳洲', '澳洲', '澳洲'] },
      { title: 'X', val: ['25澳洲', '澳洲', '澳洲', '澳洲', '澳洲', '澳洲'] },
      { title: 'Y', val: ['26澳洲', '澳洲', '澳洲', '澳洲', '澳洲', '澳洲'] },
      { title: 'Z', val: ['27澳洲', '澳洲', '澳洲', '澳洲', '澳洲', '澳洲'] }
    ];


    const initLetterList = () => {
      let letterListWrap = document.getElementById('letter-list-wrap');
      let ele: any = null;
      letterListWrap?.addEventListener('touchmove', function (e) {
        e.preventDefault();
        let X = e.touches[0].clientX;
        let Y = e.touches[0].clientY;

        ele = document.elementFromPoint(X, Y);
        let letterSpanList = letterListWrap?.children;
        if (letterSpanList) {
          for (let i = 0; i < letterSpanList?.length; i++) {
            letterSpanList[i].classList.remove(styles.letterSpan);
          }
        }
        ele?.setAttribute('letterMyChart', ele.innerHTML);
        ele?.classList.add(styles.letterSpan);

        let eleContent = ele?.innerHTML;

        checkRightLetter(eleContent);

        console.log('ele', ele);
      });
      letterListWrap?.addEventListener('touchend', function (e) {
        ele?.classList.remove(styles.letterSpan);
        letterListWrap?.removeEventListener('touchmove', initLetterList, false);
      });
    };
    const checkRightLetter = (item: string | undefined) => {
      const id = document.getElementById('country-' + item);
      if (id) {
        console.log('--', id);
        id.scrollIntoView({ block: 'start', behavior: 'auto' });
      }
    };
    
    return (
      <>
        <div className={styles.outBox}>
          <div className={styles.title}>国家选择器</div>
          <div className={styles.leftBox}>
            {country.map((item, index) => {
              return (
                <div key={'' + index} className={styles.wrap} id={`country-${item.title}`}>
                  <div className={styles.wrapTitle}>{item.title}</div>
                  {item.val.map((v, i) => {
                    return (
                      <div key={'v' + i} className={styles.wrapContent}>
                        {v}
                      </div>
                    );
                  })}
                </div>
              );
            })}
          </div>
          <div className={styles.rightBox} id="letter-list-wrap">
            {country.map((item, index) => {
              return (
                <span
                  onClick={() => {
                    checkRightLetter(item.title);
                  }}
                  key={'l' + index}
                >
                  {item.title}
                </span>
              );
            })}
          </div>
        </div>
      </>
    );


}

index.less:

.outBox {
  position: relative;
  height: 100%;
  overflow-y: auto;
  padding: 51px 32px 32px;
  background-color: #ffffff;
  .title {
    position: fixed;
    width: 100%;
    background-color: #ffffff;
    top: 0;
    left: 0;
    padding: 10px 32px;
    font-size: 20px;
    font-weight: 600;
    z-index: 9999;
  }
  .leftBox {
    width: 100%;
    .wrap {
      .wrapTitle,
      .wrapContent {
        height: 44 * @vw;
        border-bottom: 1px solid #f5f5f5;
        line-height: 44 * @vw;
        font-weight: 500;
        color: #000000;
        font-size: 15px;
        width: 100%;
        background-color: #ffffff;
      }
      .wrapTitle {
        position: sticky;
        top: 0;
      }
    }
  }
  .rightBox {
    position: fixed;
    right: 0;
    top: 180 * @vw;
    height: 380px;
    span {
      font-size: 10 * @vw;
      color: #000000;
      line-height: 14 * @vw;
      width: 20px;
      height: 14px;
      text-align: center;
      display: block;
    }
    .letterSpan {
      position: relative;
    }
    .letterSpan::before {
      content: attr(letterMyChart);
      width: 40px;
      height: 40px;
      color: #ffffff;
      font-size: 22px;
      display: block;
      border-radius: 50%;
      background: #999;
      position: absolute;
      top: -10px;
      left: -60px;
      line-height: 40px;
      text-align: center;
    }
    .letterSpan::after {
      content: '';
      display: block;
      position: absolute;
      top: -10px;
      left: -60px;
      width: 40px;
      height: 40px;
      transform: rotate(45deg);
      background: conic-gradient(from 90deg at 50% 0, #999999 0, #999999 45deg, transparent 45.1deg);
    }
  }
}

结果图：

 

一个简易的国家选择器就做好了，大家可以根据自己的数据去处理，样式也可以写成自己想要的样子