标签：index 滚动 number value heightArr item tab scrollTop Taro

import React, { Component } from 'react'
import { View, Text, ScrollView } from '@tarojs/components'
import { createSelectorQuery } from '@tarojs/taro'
import './index.scss'

const tabList = [{name: '头', value: 'header'},{name: '内容',value: 'content'},{name: '底部', value: 'footer'}]
export default class Index extends Component {
  state ={
    activeStatus: 'header',
    heightArr: [],
    activeIndex:0
  }
  handleTab(value, index) {
    this.setState({
      activeStatus: value,
      activeIndex: index
    })
  }
  handleScroll({detail}) {
    let heightArr = []
    let number = 0
    // 获取节点距离容器顶部的高度
    tabList.map(item => {
      createSelectorQuery().select(`#${item.value}`).boundingClientRect(res => {
        number = res.height + number
        heightArr.push(number)
        this.setState({
          heightArr: heightArr
          })
      }).exec()
    })

    // 根据滚动定位节点
    const scrollTop = Math.ceil(detail.scrollTop)
    const { heightArr:scrollArr } = this.state
    this.state.heightArr.map((item, index) => {
      if(scrollTop >= 0 && scrollTop < scrollArr[0]) {
        // 第一个
        this.setState({activeIndex: 0})
      }
      if(scrollTop >= scrollArr[index - 1] && scrollTop <= scrollArr[index]) {
        // 第N个
        this.setState({activeIndex: index})
      }
    })
    
  }
  render () {
    const { activeStatus,activeIndex } = this.state
    return (
      <View className='index'>
        <View className='tabList'>
          {tabList.map((item, index) => (
            <View onClick={this.handleTab.bind(this, item.value, index)} key={item.value} className={`tab-item  ${index===activeIndex && 'active'}`}>{item.name}</View>
          ))}
        </View>
        <ScrollView style={{height: '400px'}} scrollY scrollWithAnimation scrollIntoView={activeStatus} onScroll={this.handleScroll.bind(this)}>
          <View id='header'>
            <View style={{height: '600px'}}>头</View>
          </View>
          <View id='content'>
            <View style={{height: '150px'}}>内容</View>
          </View>
          <View id='footer'>
            <View style={{height: '3000px'}}>底部</View>
          </View>
        </ScrollView>
      </View>
    )
  }
}

标签：index,滚动,number,value,heightArr,item,tab,scrollTop,Taro
来源： https://www.cnblogs.com/cai-yu-candice/p/13977835.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。