vue 直接滚动到输入框

2024-08-25

【Vue】input textarea自动滚动到输入处

由于我这里要把接口返回的日志不断地新增到textarea里,想实现自动滚动日志的效果. 1.首先定一个textarea类型的input组件 <el-input id="textarea_id" type="textarea" :rows="20" placeholder="请输入内容" v-model="textarea" readonly=""> </el-input

Android点击列表后弹出输入框，所点击项自动滚动到输入框上方

使用微信的朋友圈会发现,点击某一条评论后输入框会弹出来,然后所点击的那一项会自动地滚动到输入框上方的位置,这样如果开始所点击的评论在屏幕很下方的话,就不会被输入框遮住,虽然微信这一点在我的MX2频繁点几次后滚动的位置就完全错误了,但据说在有些机型上效果还不错,还有其他地方可能会有类似的需求,比如登录时软键盘可能会把登录按钮遮住. 要实现这个功能需要注意的地方主要有两点: 什么时候进行滚动操作,以及有可能还需要在输入框消失时回滚回去. 输入框弹出后所点击的项要滚动到输入框上方,这就需要我们计算要滚

vue中滚动页面，改变样式&&导航栏滚动时，样式透明度修改

vue中滚动页面,改变样式&&导航栏滚动时,样式透明度修改.vue <div class="commonHeader" v-bind:class="{ 'navActive': scrollFlag }"> <img src="@/images/home/icon_jdjr.png" v-bind:class="{ 'scrollFlag': scrollFlag }"> datascr

一个事件一定时间内只允许点击执行一次与 vue阻止滚动穿透

可能我的方法很笨,简单实现来的就是给两个状态,一个状态点击时就发生改变,另外一个给一个定时器延迟改变篮圈部分,给了两种状态,一个isDisable,一个comeTime 点击事件以后comeTime跟随事件直接改变状态,而isDisable则用setTimeout延迟两秒改变,这样就可以阻止连续点击事件触发器以后事件冒泡产生bug 关于vue阻止滚动穿透,相当简单,就在标签内加一串: @touchmove.prevent 精彩

Vue Elementui 如何让输入框每次自动聚焦

在项目优化中碰到一个小问题,在每次提示框显示的时候让提示框中的输入框聚焦.如下图.一般情况下提示框是隐藏的.点击了编辑才会弹出. 那么原生属性autofocus 只在模板加载完成时起作用,也就是说只有第一次有用. 然后尝试了ref,再this.$refs.el 也不能成功拿到该元素,因为饿了么组件封装的<el-input>对应的是外面一个div,里面包了个input,在获取元素的时候有问题的. 第二种尝试,利用class 或者id 获取元素,然后再手动聚焦 el.focus(),好像也不起作用

Vue 无限滚动加载指令

也不存在什么加载咯, 就是一个判断滚动条是否到达浏览器底部了. 如果到了就触发事件,米到就不处理. 计算公式提简单的底部等于(0) = 滚动条高度 - 滚动条顶部距离 - 可视高度. 反正结果就是0. 一.获取滚动条位置 class Scroll { static get top() { return Math.max(document.documentElement.scrollTop || document.body.scrollTop); } static get clientH

vue 浏览器滚动行为

import Vue from 'vue' import App from './App.vue' import VueRouter from 'vue-router' import {routes} from './routes' Vue.use(VueRouter) const router =new VueRouter({ routes , mode:'history', scrollBehavior(to,from,savedPosition){ //浏览器滚动行为 //return {

vue无缝滚动的插件开发填坑分享

写插件的初衷 1.项目经常需要无缝滚动效果,当时写jq的时候用用msClass这个老插件,相对不上很好用. 2.后来转向vue在vue-awesome没有找到好的无缝滚动插件,除了配置swiper可以实现但是相对来说太重了,于是自己造了个轮子. 3.在这分享下,当时写这个插件的坑,自己也复习下,如果代码上有瑕疵欢迎指出. 源码参考 vue-seamless-scroll 1.简单的实现上下滚动基本版(最初版) html 1.solt提供默认插槽位来放置父组件传入的html <div @mouse

结合Vue 的滚动底部加载

项目手机端分页跳转不理想,自己做了一个滚动加载的一个Demo 核心Dom结构 <body> <div id="Content"> <div> <ul> <li v-for="l in list">{{l.title}}</li> <li class="loading" v-if="loading">加载中</li> </ul&

vue指令应用--实现输入框常见过滤功能

前端开发最常碰到的就是输入框,经常要做各种验证,本公司惯用的需求是直接屏蔽特定字符的输入,如禁止非数字输入,特殊符号输入,空格输入等,这些功能反复使用,做成指令的形式,直接调用,非常方便,上代码: 目录结构很简单: 1.项目文件夹里新建directives文件夹,所有指令都放在这个文件夹里 2.input-filter文件夹放具体指令,在其下建两个文件: a.inputFilter.js实现主体功能 b.index.js负责封装,职责分明 inputFilter.js代码: /** * 实现功能

vue 无限滚动问题

如今web开发中,无限加载是必需的一项功能,尤其是在移动端开发中,一个列表往往默认只加载10条,想看更多只能逐渐往下翻页.那么今天就看看如何在Vue-Cli中实现这个功能. 当前找到两个插件 1 element-ui的infiniteScroll无限滚动(适合vue2,vue3) infiniteScroll是2.9.0版本新增的特性,旧的项目需要升级element版本(注意升级可能导致其他页面的无措,谨慎升级) 链接 https://element.eleme.cn/2.12/#/zh-CN

vue 解决ios编辑器输入框不能拉起

一.问题描述:Android .pc.下可以正常使用,在ios下可以拉起输入框但是无法输入 <div contenteditable="true" ></div> 二.解决方法:给div新增以下全局样式 div{ -webkit-user-select:text; height:auto; } div *{ -webkit-user-select:text } 三.语法: user-select (1) 语法 user-select:none | text |

vue插件——滚动监听 vue-scrollwatch

造轮子的目的: 做项目的时候需要一个滚动监听的功能,html结构已经都写好了,不想使用vue组件的方式来写,因为不想改造html结构,于是花了几个小时做了一个简单的,使用vue指令方式来做的,项目上够用就结束了. 后来想想反正还差没多少还不如完善完善做成插件吧. 结果花了两天多.. 先看效果主要的坑: 滚动的动画效果,抄袭了 vue-scrollactive的做法,用到库bezier-easing .当然,这个插件相对于vue-scrollactive的优势在于,我可以指定滚动容器,并不仅限于

vue 无缝滚动文字

前言用vue做无缝滚动,字体弹幕就上代码吧 <head> <meta charset="UTF-8"> <style> div, ul, li, span, img { margin: 0; padding: 0; display: flex; box-sizing: border-box; } .marquee { width: 100%; height: 50px; align-items: center; color: #3A3A3A; b

一个超详细vue无限滚动vue-infinite-scroll插件的配置及使用详解

开发中总会遇到这种下拉加载的设计方案,Vue实现下拉加载最佳方案自然是使用vue-infinite-scroll来实现.接下来我们一起看下它的配置及使用方式. 首先我们先了解下他的配置参数: v-infinite-scroll="loadMore"表示回调函数是loadMore infinite-scroll-disabled="busy"表示由变量busy决定是否执行loadMore,false则执行loadMore,true则不执行,注意,busy表示繁忙,繁忙

vue制作滚动条幅-跑马灯效果实例代码

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body>

vue 如何实现 Input 输入框模糊查询方法

原理:原生js的indexOf() 方法,该方法将从头到尾地检索数组,看它是否含有对应的元素.开始检索的位置在数组 start 处或数组的开头(没有指定 start 参数时).如果找到一个 item,则返回 item 的第一次出现的位置.开始位置的索引为 0. 如果在数组中没找到指定元素则返回 -1. 下面先看示例: 搜索前: 搜索后: 实现方法: methods:{ // 点击搜索工程 search(){ // 支持模糊查询 // this.xmgcqkJsonsData:用于搜索的总数据 /

vue文本滚动组件

看了好多网上的文本组件,发现好多都有这样那样的问题:特别是滚动的时候失真的感觉,今天整合了文本滚动的方式用CSS的 animation写出一套组件:VUE项目直接用.感觉有用的朋友关注下效果图,gif制作有卡顿,实际效果我是没发现卡顿 1. 横向文本滚动 /* 横向文本滚动 */ <template> <div class="scroll-inner" ref="scrollInner"> <div class="s

vue引入fastclick设置输入框type="number"报错Failed to execute 'setSelectionRange' on 'HTMLInputElement': The input element's type ('number') does not support selection.的解决办法

将输入框type设为text,通过正则验证输入的值

Vue Router滚动行为 scrollBehavior

滚动行为使用前端路由,当切换到新路由时,想要页面滚动到顶部或者是保持原先的滚动位置,就像重新加载页面那样. vue-router能做到,而且更好,它让你可以自定义路由切换时页面如何滚动. 注意:这个功能只在支持 history.pushState 的浏览器中可用. 当创建一个Router实例,你可以提供一个scrollBehavior方法 const router = new VueRouter({ routes: [...], scrollBehavior (to, from, savedP

vue中滚动事件绑定的函数无法调用问题

问题描述: 一个包含下拉加载的页面,刷新当前页然后滚动页面,能够正常触发滚动事件并调用回调函数,但是如果是进了某一个页面然后再进的该页面,滚动事件能够触发, 但是回调函数在滚动的时候只能被调用一次. 关键代码: 包含下拉加载的页面中,mounted中绑定scroll,在beforeRouteLeave中取消事件绑定 this.ele.addEventListener('scroll', this.getInvitationRecordUserList); 问题定位: 从其他页面进了之后再进该页面

vue 直接滚动到输入框

热门专题