vue scrollview 锚点

文章介绍了在Vue.js应用中,如何使用el-selectv-model实现动态下拉选项选择后,通过判断滚动条位置并执行平滑滚动效果,使用户界面更流畅地跳转到对应的列表项。
摘要由CSDN通过智能技术生成
<template>
 	<div> 
 		<el-select v-model="sysID" filterable placeholder="请选择" @change="chooseSys">
 			<el-option v-for="item in sysList" :key="item.id" :label="item.room_name" :value="item.id">
 			</el-option> 
 		</el-select>
 	</div>
     
   <!--  scroll view  -->                  
	<div class="listBox">
    	<div class="listItem" v-for="(item, index) in sysList">
    		<div> {{ item.room_name }}</div>  		
    	</div>
    </div>
</template>

<script>
    chooseSys() {
            this.sysList.map((a, ia) => {
                if (this.sysID == a.id) {                
                    this.jump(ia)
                    return
                }
            })
     },
        
	jump(index) {
            let target = document.querySelector('.listBox')
            let scrollItems = document.querySelectorAll('.listItem')
            // 判断滚动条是否滚动到底部
            if (target.scrollHeight <= target.scrollTop + target.clientHeight) {
                this.activeStep = index
            }
            let total = scrollItems[index].offsetTop - scrollItems[0].offsetTop // 锚点元素距离其offsetParent(这里是body)顶部的距离(待滚动的距离)
            let distance = document.querySelector('.listBox').scrollTop // 滚动条距离滚动区域顶部的距离

            // let distance = document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset // 浏览器兼容 滚动条距离滚动区域顶部的距离(滚动区域为窗口)

            // 滚动动画实现, 使用setTimeout的递归实现平滑滚动,将距离细分为50小段,10ms滚动一次

            // 计算每一小段的距离

            let step = total / 50
            if (total > distance) {
                smoothDown(document.querySelector('.listBox'))
            } else {
                let newTotal = distance - total
                step = newTotal / 50
                smoothUp(document.querySelector('.listBox'))
            }

            // 参数element为滚动区域

            function smoothDown(element) {
                if (distance < total) {
                    distance += step
                    element.scrollTop = distance
                    setTimeout(smoothDown.bind(this, element), 10)
                } else {
                    element.scrollTop = total
                }
            }

            // 参数element为滚动区域
            function smoothUp(element) {
                if (distance > total) {
                    distance -= step
                    element.scrollTop = distance
                    setTimeout(smoothUp.bind(this, element), 10)
                } else {
				element.scrollTop = total
				}
			}
	},
</script>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue 2中,可以使用`v-model`指令实现双向数据绑定。对于锚点(即页面上的锚点链接),可以通过绑定`window.location.hash`属性来实现双向绑定。 首先,在Vue实例中定义一个数据属性来存储当前的锚点值,比如`currentAnchor`。然后,在锚点链接中,使用`v-bind:href`指令将锚点值绑定到`window.location.hash`。同时,在锚点链接上监听`click`事件,当点击时更新`currentAnchor`的值。 下面是一个示例代码: ```html <div id="app"> <ul> <li v-for="anchor in anchors" :key="anchor"> <a :href="'#' + anchor" @click="updateAnchor(anchor)">{{ anchor }}</a> </li> </ul> <div> <input type="text" v-model="currentAnchor"> </div> </div> <script> new Vue({ el: "#app", data: { currentAnchor: '', anchors: ['anchor1', 'anchor2', 'anchor3'] }, mounted() { window.addEventListener('hashchange', this.updateCurrentAnchor); this.updateCurrentAnchor(); }, destroyed() { window.removeEventListener('hashchange', this.updateCurrentAnchor); }, methods: { updateAnchor(newAnchor) { this.currentAnchor = newAnchor; }, updateCurrentAnchor() { this.currentAnchor = window.location.hash.slice(1); } } }); </script> ``` 在上述代码中,`anchors`数组存储了需要添加锚点的值,通过`v-for`指令遍历生成锚点链接。当点击链接时,会调用`updateAnchor`方法更新`currentAnchor`的值。同时,通过监听`window`对象的`hashchange`事件,调用`updateCurrentAnchor`方法来更新`currentAnchor`的值。 这样,输入框中的值与页面上的锚点链接的值就实现了双向绑定。当修改输入框中的值时,锚点链接也会相应地更新;当点击锚点链接时,输入框中的值也会更新。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值