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 (

{tabList.map((item, index) => (

{item.name}

))}

头

内容

底部

)

}

}

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

来源： https://www.cnblogs.com/cai-yu-candice/p/13977835.html