實現(xiàn)點擊標題跳轉(zhuǎn)到指定位置標題樣式改變，滾動到對應(yīng)位置時標題樣式改變
js代碼如下：
importTaro,{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'

importzengxin1from'../../../../../../src/cloud-images/mainPackage/home/zengxin1.png';
importhousefrom'../../../../../../src/cloud-images/detailsPackage/infomationV2/item_house.png'
importlocationfrom'../../../../../../src/cloud-images/detailsPackage/infomationV2/location.png'
importmarketfrom'../../../../../../src/cloud-images/detailsPackage/infomationV2/market.png'
importtrafficfrom'../../../../../../src/cloud-images/detailsPackage/infomationV2/traffic.png'

classitemAnalysisextendsPureComponent{
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(){
constcards=['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){
letsum=0
cards.map(c=>{
this.heightMap[c]+=sum
sum=this.heightMap[c]
})
}
}
}).exec()
})
}
onScroll(e){
if(this.disableScroll){
return
}
constcards=['c1','c2','c3','c4']
const{scrollTop,scrollHeight}=e.detail
if(this.scrollHeight!==scrollHeight){
this.scrollHeight=scrollHeight
returnthis.calcHeight()
}
constlen=Object.keys(this.heightMap).length
if(len===0)return
for(leti=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(
<ViewclassName="item-page">
<ViewclassName="tabs">
<ViewclassName={current==='1'?'active':''}onClick={this.setIndex.bind(this,'1')}>區(qū)位</View>
<ViewclassName={current==='2'?'active':''}onClick={this.setIndex.bind(this,'2')}>交通</View>
<ViewclassName={current==='3'?'active':''}onClick={this.setIndex.bind(this,'3')}>配套</View>
<ViewclassName={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)}
>
<Viewid="c1"className="content">
<ViewclassName="top">
<Imagesrc={location}className="img"/>
<TextclassName="title">區(qū)位</Text>
</View>
<ViewclassName="center">
<View>
1.黃浦區(qū)位居全過工業(yè)百強區(qū)第二，科學(xué)城板塊是廣深科技創(chuàng)新走廊發(fā)展核心，產(chǎn)業(yè)基礎(chǔ)雄厚，
人口集聚效應(yīng)明顯。
</View>
<View>2.本案位于科學(xué)城生活宜居板塊，自然環(huán)境優(yōu)越；距珠江新城及白云機場車行30分鐘即達。</View>
<Imagesrc={zengxin1}className="center-image"/>
</View>
</View>
<Viewid="c2"className="content">
<ViewclassName="top">
<Imagesrc={traffic}className="img"/>
<TextclassName="title">交通</Text>
</View>
<ViewclassName="center">
<View>
1.黃浦區(qū)位居全過工業(yè)百強區(qū)第二，科學(xué)城板塊是廣深科技創(chuàng)新走廊發(fā)展核心，產(chǎn)業(yè)基礎(chǔ)雄厚，
人口集聚效應(yīng)明顯。
</View>
<View>2.本案位于科學(xué)城生活宜居板塊，自然環(huán)境優(yōu)越；距珠江新城及白云機場車行30分鐘即達。</View>
<Imagesrc={zengxin1}className="center-image"/>
</View>
</View>
<Viewid="c3"className="content">
<ViewclassName="top">
<Imagesrc={house}className="img"/>
<TextclassName="title">配套</Text>
</View>
<ViewclassName="center">
<View>
1.黃浦區(qū)位居全過工業(yè)百強區(qū)第二，科學(xué)城板塊是廣深科技創(chuàng)新走廊發(fā)展核心，產(chǎn)業(yè)基礎(chǔ)雄厚，
人口集聚效應(yīng)明顯。
</View>
<View>2.本案位于科學(xué)城生活宜居板塊，自然環(huán)境優(yōu)越；距珠江新城及白云機場車行30分鐘即達。</View>
<Imagesrc={zengxin1}className="center-image"/>
</View>
</View>
<Viewid="c4"className="content">
<ViewclassName="top">
<Imagesrc={market}className="img"/>
<TextclassName="title">市場</Text>
</View>
<ViewclassName="center">
<View>
1.黃浦區(qū)位居全過工業(yè)百強區(qū)第二，科學(xué)城板塊是廣深科技創(chuàng)新走廊發(fā)展核心，產(chǎn)業(yè)基礎(chǔ)雄厚，
人口集聚效應(yīng)明顯。
</View>
<View>2.本案位于科學(xué)城生活宜居板塊，自然環(huán)境優(yōu)越；距珠江新城及白云機場車行30分鐘即達。</View>
<Imagesrc={zengxin1}className="center-image"/>
</View>
</View>
</ScrollView>
<ViewclassName='login-module'>
<ViewclassName='btn'>保存方案</View>
</View>
</View>
)
}
}

exportdefaultitemAnalysis



css 樣式：

.item-page{
background:#f4f5f9;
}

.scroll-index{
height:calc(100vh-200px);
}

.tabs{
background:#fff;
padding:024px;
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:solid3px#2966F0;
}
}

.content{
background:#fff;
margin-top:20px;
.top{
height:75px;
display:flex;
align-items:center;
border-bottom:1pxsolid#E5E5E5;

.img{
30px;
height:34px;
padding:0px10px030px;
}

.title{
color:#333;
font-size:32px;
font-weight:bold;
}
}

.center{
color:#666;
font-size:28px;
padding:20px24px;
}

.center-image{
padding-top:20px;
100%;
height:326px;
background-repeat:no-repeat;
}
}

.login-module{
z-index:50;
position:fixed;
left:0;
right:0;
bottom:0;
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;
}
}

總結(jié)

以上是生活随笔為你收集整理的taro-ui scrollview onScroll 滚动某个位置标题选中样式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。