vue监听class属性控制分页器下拉框出现时页面自动定位到底

优化实时属性监听与页面滚动交互

最新推荐文章于 2024-08-27 22:17:50 发布

原创最新推荐文章于 2024-08-27 22:17:50 发布 · 490 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

该博客探讨了一个可能造成性能浪费的实时属性监听方案，通过设置定时器获取页面元素class属性，并在属性变化时判断是否触发滚动到底的逻辑。文章详细描述了三个步骤：实时获取标签、监听属性变化以及定义数据属性。虽然实现了功能，但作者指出这种方法可能不是最高效的选择。

这样写有点浪费性能,但是可以实现功能

第一步:实时获取标签

mounted(){

setInterval(()=>{

this.ListeningAttribute= document.getElementsByClassName('el-input--mini')[0].className

},200)

第二步:监听属性(并定位页面滚动条---滚动到最大)

watch:{

'ListeningAttribute': function(newV, oldV) {

if(newV==='el-input el-input--mini el-input--suffix is-focus'){

document.body.scrollTop = document.documentElement.scrollTop = document.body.scrollHeight+ document.body.clientHeight//监听控制下拉框自动到底

}

第三步:data定义属性监听用

data() {

return {

ListeningAttribute:''

}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

xu_duo_i

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

【vue-scroller】vue移动端插件，监听下拉触底，上拉刷新

qq_51055690的博客

05-19

1893

效果如图，报错是我的判断是否已全部请求完没写好github地址提示：以下是本篇文章正文内容，下面案例可供参考作者的github页面参数代码预览。

vue2+el-select实现分页加载更多功能

weixin_52443895的博客

11-28

1907

参与评论您还未登录，请先登录后发表或查看评论

vue如何判断dom的class

12-29

vue点击给dom添加class然后获取含有class的dom <div class=chose-ck v-for=(item,index2) key=index2 ref=chosebox> <p>{{item.name}}</p> <dt v-for=(item2,index) in item.childsCurGoods :key=item2.id :class=index==iac[index2]?'check':'' :id=item2.id :data-c

vue 监听某个div垂直滚动条下拉到底部的方法

12-10

如下所示： this.$nextTick(() => { const el = document.querySelector('.act-not'); const offsetHeight = el.offsetHeight; el.onscroll = () => { const scrollTop = el.scrollTop; const scrollHeight = el.scrollHeight; if ((offsetHeight + scrollTop) - scrollHeight >= -1) { // 需要执行的代码 } }; }); 坑：在做滚动加载分页时候，有时候第三

前端Vue select 下拉框详解以及监听事件

最新发布

09-13

- 通过`size`属性控制下拉框可见行数 ### 注意事项 1. **无障碍访问**：实际项目中应添加适当的ARIA属性 2. **样式自定义**：可以通过CSS变量或插槽提供更多自定义能力 3. **错误处理**：当前示例仅做了简单错误...

在vue中实现点击选择框阻止弹出层消失的方法

10-18

这个弹出层由`<div class="sex" v-show="showed" transition='fade'>`定义，其显示状态由`showed`数据属性控制。当用户点击这个弹出层时，`@click="unshow"`事件监听器会关闭它。为了阻止点击选择框时关闭弹出层，...

vue3 Select单、多选下拉选择器懒加载组件封装

琳小的博客

12-22

1673

当下拉选择器含大量的数据时，影响性能问题，因而以懒加载的方式作为性能优化；该下拉选择器包含功能：物理搜索、触底懒加载、适用单选和多选；

vue 下拉框多字段筛选

05-01

嗯，用户想在Vue里实现一个支持多字段筛选的下拉框组件。首先，我需要回顾一下用户提供的引用内容，看看有没有相关的组件或实现方法可以参考。引用里提到了w-form-select组件，它涉及到prop、value和optionValue这些...

vue添加锚点,实现滚动页面时锚点添加相应的class操作

10-14

主要介绍了vue添加锚点,实现滚动页面时锚点添加相应的class操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

vue 局部监听下拉框滚动(@scroll=)

weixin_47382414的博客

05-17

933

需求：页面局部box列表滚动，数据初始显示十条，触底后显示下个十条。由于后台返回了全部数据，所以数据就需要自己处理了；给父盒子添加@scroll=“scrollEvent” 可获得父盒子的可视高度和滚动条高度(盒子本身要有高度才会被触发) 父盒子固定高度用于滚动条及触发，关系对比中，文档高度要获取子盒子的 <div class="user-right-card" ref="card" @scroll="scrollEvent"> <div ref="cardChild">&l

【Vue.js】之监听实现搜索功能与翻译功能

qq_37086980的博客

01-20

467

监听器（watch） watch监听器的用法相当于是我们监视一个数据的变化，在这个数据变化时执行一些操作，这个操作可以是任何操作声明： watch: { 要监听的属性: function (newValue, oldValue) {}, 要监听的属性: '函数名' // methods中的函数要监听的属性: { handler (newValue, oldValue) { console.log('watch', newUser) } }

在vue中的class增加事件监控

慧香一格的专栏

05-07

564

在收到点击事件时，触发函数onClickFirstNode实现内容自己需要的处理。在mounted中初始化class的click事件监控，

avue vue 监听表格中值，或者下拉框选择的值，动态改变下面

chengchong_cc的博客

04-11

732

【代码】avue vue 监听表格中值，或者下拉框选择的值，动态改变下面。

vue监听页面滚动时隐藏element-ui下拉框/时间弹框

菜鸡进阶之路

04-20

1093

来源：当你点击下拉框，时间框等element组件不选中的时候，滚动页面，组件会随着页面往上走这个时候会有问题，遮住其他容器，位置不对等问题。这个时候就需要监听当你滚动时隐藏这些下拉组件。1：创建hideElement.js文件。3：监听滚动，移除监听事件。2：在需要的地方引入。

关于vue的v-on:input结合:class监听输入框的使用

qq_41859372的博客

04-15

1056

正文之前，先吐槽一下现在网上技术文章的现状，用几个字概括就是：抄来抄去。对学习技术的伙伴和交流技术的伙伴很不友好，看的人甚是不爽和糟心。好了，进入正文。最近博主最近在学习vue准备给公司做一个简单的网站，于是使用了vue+elementui，后端使用的java。其中的留言功能有输入框,就想实现一个正常的判空功能，如果在输入框未输入文字或者输入了文字然后删除了，输入框会变红；如果有文字输入则恢复正常，起到一个实时变化的效果。其中:class用来动态产生class；v-on监听输入框的变化。

vue事件监听

a1241436267的博客

08-27

1311

我们可以使用v-on指令 (简写为) 来监听 DOM 事件，并在事件触发时执行对应的。