小程序锚点 使用ScrollView和pageScrollTo

锚点定位，这次用到的方法有【pageScrollTo，createSelectorQuery】这边总结两个方法：

一.使用wx.pageScrollTo方法 

 wx.pageScrollTo(Object object) | 微信开放文档 (qq.com)

Taro.pageScrollTo(option) | Taro 文档 (jd.com)

方法一

例子：

 Taro.pageScrollTo({

          scrollTop: 800,//需要定位的高度

         duration: 300,//过渡时间

        selector："#id"//选择器，css...

        fail:(res)=>{

          console.log(res,'失败');

       },

       success:(res)=>{

         console.log(res,'成功')  

        }

         })

方法二：

例子：

左右两边互动，相互控制当前定位

<scroll-view scrollWithAnimation={true} scrollIntoView={leftId} scrollY>

<View id='_0' style={{border:'1px solid #ccc',textAlign:'center',height:200}} onClick={()=>handeleScroll('red')}>红</View>

            <View id='_1' style={{border:'1px solid #ccc',textAlign:'center',height:200}} onClick={()=>handeleScroll('yellow')}>黄</View>

            <View id='_2' style={{border:'1px solid #ccc',textAlign:'center',height:200}} onClick={()=>handeleScroll('blue')}>蓝</View>

            <View id='_3' style={{border:'1px solid #ccc',textAlign:'center',height:200}} onClick={()=>handeleScroll('purple')}>紫</View>

            <View id='_4' style={{border:'1px solid #ccc',textAlign:'center',height:200}} onClick={()=>handeleScroll('black')}>黑</View>

            <View id='_5' style={{border:'1px solid #ccc',textAlign:'center',height:200}} onClick={()=>handeleScroll('green')}>绿</View>

            <View id='_6' style={{border:'1px solid #ccc',textAlign:'center',height:200}} onClick={()=>handeleScroll('grey')}>灰</View>

</scroll-view>

//左边的方法很简单，创建一个函数传入id，保存并放到scrollIntoView里面，id要和右边区域块保持一致

针对于左边控制右边滑动，最简单直观的方法是给左边的list绑定点击事件 通过scrollIntoView【id】属性进行定位

针对右边内容控制对应的颜色

<scroll-view

              className='scrollview'

              scrollY

              scrollTop={scrollTop}

              style={scrollStyle}

              scrollWithAnimation

              onScroll={onScrollToLower}

              scrollIntoView={idRight}

              enhanced

            >

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

return <View className="scrollRight" id={item.color}>{item.name}</View>

})}

</scroll-view>

可以通过onScrollToLower滚动触发 获取当前滚动的高度 ，通过createSelectorQuery获取当前颜色区的高度，

const query = Taro.createSelectorQuery()

    query.selectAll('.scrollRight').boundingClientRect()

//selectAll获取全部类名为.scrollRight的高度，select获取类名为.scrollRight的高度

    query.selectViewport().scrollOffset()

    query.exec((res) => {

res[0].map((item,index)=>{

if(index<companies.length){

if(item.height<=onScrollToLower（每一块高度）&&item.height>=onScrollToLower（每一块高度）{

idRight='_{index}'

}

}else{

//如果高度有空白区域，左边滑动到最后一块，右边的最后一个保持高亮

idRight='_${onScrollToLower.length}'

}

})

}）

不满足需求可以去官网查看方法，链接在最上面，如有雷同，纯属巧合