工作笔记-滚动列表中指定项到可是区域范围内

功能背景：

比如给你区域区划的列表，但是固定容器高度，会出现滚动条，如果此时存在一个默认选中项，恰巧他不在可视区域内，但是想要一点进来就要在可视区域内看到这个选中项。那么就要想办法去把他滚动出来了

效果图：

第一种：

自己做的列表，注意看这个选中项在最后一行，那么就把他默认滚动到视口范围内

原理就是，获取dom，然后调用scrollIntoView()这个方法
对应代码：

<div class="city-list" id="cityList">
                    <div 
                        :class="['area-item',cityCode==item.qhdm?'active':'']" 
                        :ref="'cityQhdm'+item.qhdm"
                        v-for="(item,index) in cityList" :key="index"
                        >
                        {{item.qhmc}}
                    </div>
                </div>
setTimeout(()=>{
                this.$refs['cityQhdm'+this.cityCode][0].scrollIntoView({alignToTop: true})
            },100)
1
2
3
4
5
6
7
8
9
10
11
12

第二种：

使用了vant的picker组件，选中项目默认也并不在选中位置。也是操作dom进行操作

查看dom可知，是通过transform实现的

那么就可以手动计算选中项的位置。然后手动滚动过去。没看第三种之前，甚至觉得自己做的挺细节的了。。。。

<van-picker
                        id="scrollSelectCity"
                        @change="changeCity"
                        :title="cityName"
                        :visible-item-count="6"
                        :columns="cityList"
                    >
                        <template #option="item">
                            <van-row>
                                <van-col class="van-hairline--left" @click="chooseCity(item)">
                                    <p :class="['label-content',item.qhmc==cityName?'active':'']">
                                        {{ item.qhmc }}
                                    </p>
                                </van-col>
                            </van-row>
                        </template>
                    </van-picker>
scrollCity(){
            let top = 110
            if(this.cityCode){
                let index = this.cityList.findIndex((item)=>{return item.qhdm==this.cityCode})
                if(index!=-1){
                    top = 110-(index*44)
                }
            }else{
                top = 110
            }
            this.$nextTick(()=>{
                if(!this._dialogVisible)return
                let elParent = document.getElementById("scrollSelectCity")
                let el = elParent.getElementsByClassName('van-picker-column__wrapper')[0]
                el.style.transform = `translate3d(0px, ${top||0}px, 0px)`
            })
        },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

第三种：

还是关于这个vant的picker组件，当时没有仔细看文档，淦！实际上是有这个属性的:default-index="2"，自己操作dom的简直是多此一举。。。。人傻了，计算索引值，赋值即可。

<van-picker
                        id="scrollSelectCity"
                        @change="changeCity"
                        :title="cityName"
                        :visible-item-count="6"
                        :default-index="testIndex"
                        :columns="cityList"
                    >
                        <template #option="item">
                            <van-row>
                                <van-col class="van-hairline--left" @click="chooseCity(item)">
                                    <p :class="['label-content',item.qhmc==cityName?'active':'']">
                                        {{ item.qhmc }}
                                    </p>
                                </van-col>
                            </van-row>
                        </template>
                    </van-picker>
scrollCity(){
                let index = this.cityList.findIndex((item)=>{return item.qhdm==this.cityCode})
                this.testIndex = index
            
        },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23