使用vue-scroller滚动到指定位置(三级联动)
// this.$refs.screenType2.getPosition()— 获取当前scroller的位置;// this.$refs.screenType2.scrollTo(0, this.screenType2Position.top, true) 滚动到当前位置** 注意必须使用setTimeOut()//datascreenInfo: fa...
·
// this.$refs.screenType2.getPosition() — 获取当前scroller的位置;
// this.$refs.screenType2.scrollTo(0, this.screenType2Position.top, true) 滚动到当前位置
** 注意
- 必须使用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>
更多推荐
已为社区贡献16条内容
所有评论(0)