vue2.0_在vue中使用VantUI 实现移动端返回顶部操作

QiuRenBB

已于 2022-03-21 11:26:27 修改

阅读量2.6k

点赞数 2

分类专栏： Vue2.0 文章标签：前端

于 2021-09-10 16:23:32 首次发布

本文链接：https://blog.csdn.net/qiurenbb/article/details/120224378

版权

本文介绍了在Vue2.0移动端项目中，由于VantUI缺少返回顶部组件，作者通过自定义代码实现这一功能。在HTML部分添加返回顶部按钮，并在Vue部分编写相应逻辑，实现点击按钮返回页面顶部的效果。

摘要由CSDN通过智能技术生成

前言

今天在做移动端项目的时候，发现vant官网并没有返回顶部的组件和相关内容。因此，今天记录一下移动端返回顶部的操作。废话不多说，直接上代码。

实现

html部分:

<van-button color="#EABA6B" class="backTop" @click="backTop" v-show="scrollType">
      <van-icon class=

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

QiuRenBB

关注关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Vue实现一个返回顶部backToTop组件

08-29

本篇文章主要介绍了Vue实现一个返回顶部backToTop组件，可以实现回到顶部效果，具有一定的参考价值，有兴趣的可以了解一下

vantUI回到顶部（BackTop）

Twelve0805的博客

01-18

504

BackTop

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

vue2+vant2实现移动端下拉刷新、上拉加载及返回顶部功能

qq_45040431的博客

11-09

3034

【代码】vue2+vant2实现移动端下拉刷新、上拉加载及返回顶部功能。

Vant2组件库van-list+Toast下拉加载滚动条回顶问题

Mr.小灰狼_随笔

01-08

3020

Vant2组件库van-list+Toast下拉加载滚动条回顶问题目录 List 列表 Toast 轻提示解决方案 1、不使用Toast 的加载提示 2、修改调整pointer-event 属性值 3、判断是否为第一次加载再使用 4、forbidClick 设置为 false 5、自定义组件

封装返回顶部组件 vant-ui

qq_43806488的博客

12-17

2071

vant居然没有返回顶部组件没办法自己封装一个 <template> <div> <van-button color="rgba(0,0,0,.3)" round class="backTop" size="mini" @click="backTop" v-show="scrollType" > <van-icon class="icon-backTop" nam

Vue中实现返回顶部

About_zero的博客

04-14

416

html样式 //van-icon 是引用了vant组件中的icon图标 <div class="top" v-show="flag_scroll" @click="backTop"> <van-icon name="arrow-up" size="25" color="#333" /> <p>顶部</p> </div> data data() { return { flag_scrol

vue_2.0_fyf

Cat_Boom1999的博客

04-01

697

vue2.0 学习笔记 vue框架的两大核心：一、前端开发历史 1994年可以看做前端历史的起点（但是没有前端的叫法） 1995年网景推出了JavaScript 1996年微软推出了iframe标签，实现了异步的局部加载 1999年W3C发布第四代HTML标准，微软推出用于异步数据传输的 ActiveX(ActiveXObject)，各大浏览器厂商模仿实现了 XMLHttpRequest（这是前端的真正的起始） 2006年，XMLHttpRequest被W3C正式纳入标准（这是前端正式的起始） 2006

VUE学习笔记

qq_48305989的博客

02-16

701

VUE学习笔记一、Vue基础 (一)、认识Vue.js 1. 官网英文官网：https://vuejs.org/ 中文官网：https://cn.vuejs.org/ 2. 简介 vue是一套用于构建用户界面的渐进式框架 Vue 采用自底向上增量开发的设计 Vue 的核心库只关注视图层 3. Vue的特点遵循MVVM模式代码简洁，体积小，运行效率高，适合移动/PC端开发它本身只关注UI，可以轻松引入vue插件或者其他第三方库开发项目 4. 与其他前端JS框架的关联借鉴Angular

2022前端知识整理：十、vue基础

weixin_42373976的博客

07-15

988

2022前端知识整理：第十部分、vue基础，仅包含vue2.0相关知识，建议先完成html5、css3和JavaScript ES6之后再学习。部分图片未上传成功，稍后完善，请见谅。

vue实现移动端返回顶部

10-14

主要为大家详细介绍了vue实现移动端返回顶部，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

VUE面试题（3）--vue常见面试题

最新发布

MingL520的博客

05-21

536

除了核心功能默认内置的指令 (v-model和v-show)，Vue 也允许注册自定义指令。[info]举个聚焦输入框的例子，如下：autofocus在移动版 Safari 上不工作)。事实上，只要你在打开这个页面后还没点击过任何内容，这个输入框就应当还是处于聚焦状态。// 注册一个全局自定义指令 `v-focus`// 当被绑定的元素插入到 DOM 中时……// 聚焦元素el.focus()})如果想注册局部指令，组件中也接受一个directivesfocus: {// 指令的定义。

2021 vue 2.0 cli3配置vantUI

weixin_44903107的博客

04-02

155

1、安装 # 安装 Vue Cli npm install -g @vue/cli # 创建一个项目 vue create hello-world # 安装vant npm i vant -S # 完整写法：npm install vant --save # 安装插件 npm i babel-plugin-import -D # 完整写法： npm install babel-plugin-import --save-dev # 更换安装源： # npm install vant --save

vue使用elementui的Backtop 回到顶部

yuan5211215的博客

11-03

149

直接上使用代码放到对应的盒子里面刚开始把<template>去掉了死活不显示，气死！！！ content的样式要设置高度，overflow-y：scroll；

vue返回顶部组件

JQG的博客

07-21

5601

页面滚离顶部一定距离的时候显示返回顶部图标，点击按钮以一定的速度返回顶部。组件：src/components/GoTop.vue <template> <div id="goTop"> <div class="goTop" v-show="goTopShow" @click="goTop">

锚点定位及返回顶部

狼道的博客

08-07

900

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery.1.9.1.min.js"&gt

vue2不使用组件。用原生方法实现回到顶部功能

JPQLGZPW的博客

02-21

269

原生回到顶部功能

关于使用vant组件库，点击van-tab，返回到页面顶部问题解决

Strive_Limingyun的博客

03-28

2068

原因是当我们点击第一个van-tab，其余van-tab display:none ,页面数据加载再后，导致高度暂时为0，当第二轮点击之后，就不会出现这个问题，解决方式使用min-height=100vh,占用一个页面高度，不让他回到页面顶部。

Vue实现回到顶部

qq_32421489的博客

10-13

510

Vue实现回到顶部

vue2.0_前端跨域

07-12

在Vue 2.0中，解决前端跨域问题有几种方法： 1. 代理服务器：在开发环境中，可以配置一个代理服务器来转发请求，以解决跨域问题。可以使用webpack-dev-server提供的proxy配置，或者使用http-proxy-middleware中间件。具体配置可以参考相关文档。 2. JSONP：JSONP是一种通过动态创建<script>标签来实现跨域请求的方法。由于<script>标签可以跨域请求资源，所以可以通过定义一个回调函数，将返回结果作为参数传递给回调函数。在Vue中，可以使用vue-jsonp插件来实现JSONP请求。 3. CORS：跨域资源共享(CORS)是一种机制，允许服务器在响应中设置一些头部信息，来告诉浏览器是否允许跨域请求。在Vue中，可以通过在服务器端设置Access-Control-Allow-Origin头部信息来实现CORS。 4. 代理配置：如果你的项目是基于Vue CLI创建的，可以在项目根目录下的vue.config.js文件中配置代理。具体配置可以参考Vue CLI的官方文档。需要注意的是，以上方法都是在开发环境中解决跨域问题，而在生产环境中，应该通过配置服务器来处理跨域请求。