使用vue-scroller滚动到指定位置(三级联动)

// this.$refs.screenType2.getPosition() — 获取当前scroller的位置;

// this.$refs.screenType2.scrollTo(0, this.screenType2Position.top, true) 滚动到当前位置

** 注意

  1. 必须使用setTimeOut()
//data
            screenInfo: false,
            screenType1Position: {
                left: 0,
                top: 0
            }, // 交收地位置
            screenType2Position: {
                left: 0,
                top: 0
            }, // 交收地位置
            screenType3Position: {
                left: 0,
                top: 0
            }, // 交收地位置
// 通过watch监听
        watch: {
            screenInfo(val) {
                if (val) {
                    this.closeTouch()
                    setTimeout(() => {
                        this.$refs.screenType1.scrollTo(0, this.screenType1Position.top, true)
                        this.$refs.screenType2.scrollTo(0, this.screenType2Position.top, true)
                        this.$refs.screenType3.scrollTo(0, this.screenType3Position.top, true)
                    }, 10);
                } else {
                    this.openTouch()
                    this.screenType1Position = this.$refs.screenType1.getPosition();
                    this.screenType2Position = this.$refs.screenType2.getPosition()
                    this.screenType3Position = this.$refs.screenType3.getPosition()
                }
            }
        },
                        <div v-if="screenType == 1" class="screenType1">
                            <scroller ref="screenType1">
                                <ul>
                                    <li v-for="item in Slots1" :key="item.pid" @click="changeSlots1(item)" class="omit">{{item.pname}} <i v-show="current1.pid == item.pid"></i> </li>
                                </ul>
                            </scroller>
                            <scroller ref="screenType2">
                                <ul>
                                    <li v-for="item in Slots2" :key="item.cid" @click="changeSlots2(item)" class="omit">{{item.cname}} <i v-show="current2.cid == item.cid"></i> </li>
                                </ul>
                            </scroller>
                            <scroller ref="screenType3">
                                <ul>
                                    <li v-for="item in Slots3" :key="item.oid" @click="changeSlots3(item)" class="omit">{{item.oname}} <i v-show="current3.oid == item.oid"></i> </li>
                                </ul>
                            </scroller>
                        </div>

猜你喜欢

转载自blog.csdn.net/qq719756146/article/details/87359260