taro-ui scrollview onScroll 滚动某个位置标题选中样式
实现点击标题跳转到指定位置标题样式改变，滚动到对应位置时标题样式改变
js代码如下：
import Taro, { PureComponent } from '@tarojs/taro'
import { ISLOGIN, ASSETURL } from '@/config/index.config'
import { View, Text, Image, ScrollView } from '@tarojs/components'
import { connect } from '@tarojs/redux'
import { AtActionSheet, AtActionSheetItem } from "taro-ui"
import './itemAnalysis.scss'
import zengxin1 from '../../../../../../src/cloud-images/mainPackage/home/zengxin1.png';
import house from '../../../../../../src/cloud-images/detailsPackage/infomationV2/item_house.png'
import location from '../../../../../../src/cloud-images/detailsPackage/infomationV2/location.png'
import market from '../../../../../../src/cloud-images/detailsPackage/infomationV2/market.png'
import traffic from '../../../../../../src/cloud-images/detailsPackage/infomationV2/traffic.png'
class itemAnalysis extends PureComponent {
config = {
navigationBarTitleText: "项目分析",
};
constructor(props) {
super(props)
this.heightMap = [];
this.state = {
current: '1',
scrollIndex: 'c1'
}
}
componentDidShow() {
}
componentDidMount() {
}
setIndex(index) {
this.setState({
current: index,
scrollIndex: 'c' + index
})
}
calcHeight() {
const cards = ['c1', 'c2', 'c3', 'c4']
this.heightMap = []
cards.map(item => {
Taro.createSelectorQuery().in(this.$scope).select(`#${item}`).boundingClientRect((rect) => {
if (rect != null) {
this.heightMap[rect.id] = rect.height
if (Object.keys(this.heightMap).length === cards.length) {
let sum = 0
cards.map(c => {
this.heightMap[c] += sum
sum = this.heightMap[c]
})
}
}
}).exec()
})
}
onScroll(e) {
if (this.disableScroll) {
return
}
const cards = ['c1', 'c2', 'c3', 'c4']
const { scrollTop, scrollHeight } = e.detail
if (this.scrollHeight !== scrollHeight) {
this.scrollHeight = scrollHeight
return this.calcHeight()
}
const len = Object.keys(this.heightMap).length
if (len === 0) return
for (let i = len - 1; i > 0; i--) {
if (scrollTop + 1 > this.heightMap[cards[i - 1]]) {
this.setState({
current: (i + 1).toString()
})
return
}
}
this.setState({
current: '1'
})
}
render() {
const { current, scrollIndex } = this.state;
return (
<View className="item-page">
<View className="tabs">
<View className={current === '1' ? 'active' : ''} onClick={this.setIndex.bind(this, '1')}>区位</View>
<View className={current === '2' ? 'active' : ''} onClick={this.setIndex.bind(this, '2')}>交通</View>
<View className={current === '3' ? 'active' : ''} onClick={this.setIndex.bind(this, '3')}>配套</View>
<View className={current === '4' ? 'active' : ''} onClick={this.setIndex.bind(this, '4')}>市场</View>
</View>
<ScrollView
className="scroll-index"
scrollY
scrollWithAnimation={true}
scrollIntoView={scrollIndex}
onScroll={this.onScroll.bind(this)}
>
<View id="c1" className="content">
<View className="top">
<Image src={location} className="img" />
<Text className="title"> 区位</Text>
</View>
<View className="center">
<View>
1.黄浦区位居全过工业百强区第二，科学城板块是广深科技创新走廊发展核心，产业基础雄厚，
人口集聚效应明显。
</View>
<View>2.本案位于科学城生活宜居板块，自然环境优越；距珠江新城及白云机场车行30分钟即达。</View>
<Image src={zengxin1} className="center-image" />
</View>
</View>
<View id="c2" className="content">
<View className="top">
<Image src={traffic} className="img" />
<Text className="title"> 交通</Text>
</View>
<View className="center">
<View>
1.黄浦区位居全过工业百强区第二，科学城板块是广深科技创新走廊发展核心，产业基础雄厚，
人口集聚效应明显。
</View>
<View>2.本案位于科学城生活宜居板块，自然环境优越；距珠江新城及白云机场车行30分钟即达。</View>
<Image src={zengxin1} className="center-image" />
</View>
</View>
<View id="c3" className="content">
<View className="top">
<Image src={house} className="img" />
<Text className="title"> 配套</Text>
</View>
<View className="center">
<View>
1.黄浦区位居全过工业百强区第二，科学城板块是广深科技创新走廊发展核心，产业基础雄厚，
人口集聚效应明显。
</View>
<View>2.本案位于科学城生活宜居板块，自然环境优越；距珠江新城及白云机场车行30分钟即达。</View>
<Image src={zengxin1} className="center-image" />
</View>
</View>
<View id="c4" className="content">
<View className="top">
<Image src={market} className="img" />
<Text className="title"> 市场</Text>
</View>
<View className="center">
<View>
1.黄浦区位居全过工业百强区第二，科学城板块是广深科技创新走廊发展核心，产业基础雄厚，
人口集聚效应明显。
</View>
<View>2.本案位于科学城生活宜居板块，自然环境优越；距珠江新城及白云机场车行30分钟即达。</View>
<Image src={zengxin1} className="center-image" />
</View>
</View>
</ScrollView>
<View className='login-module'>
<View className='btn' >保存方案</View>
</View>
</View>
)
}
}
export default itemAnalysis
css 样式：
.item-page {
background: #f4f5f9;
}
.scroll-index {
height: calc(100vh - 200px);
}
.tabs {
background: #fff;
padding: 0 24px;
height: 88px;
display: flex;
flex-direction: row;
view {
display: flex;
flex: 1;
align-items: center;
justify-content: center;
color: #666;
font-size: 28px;
}
.active {
color: #2966F0;
border-bottom: solid 3px #2966F0;
}
}
.content {
background: #fff;
margin-top: 20px;
.top {
height: 75px;
display: flex;
align-items: center;
border-bottom: 1px solid #E5E5E5;
.img {
width: 30px;
height: 34px;
padding: 0px 10px 0 30px;
}
.title {
color: #333;
font-size: 32px;
font-weight: bold;
}
}
.center {
color: #666;
font-size: 28px;
padding: 20px 24px;
}
.center-image {
padding-top: 20px;
width: 100%;
height: 326px;
background-repeat: no-repeat;
}
}
.login-module {
z-index: 50;
position: fixed;
left: 0;
right: 0;
bottom: 0;
width: 100%;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
background: #fff;
.btn {
display: flex;
height: 94px;
align-items: center;
justify-content: center;
background: #2966F0;
font-size: 32px;
color: #fff;
}
}
