【antdv】a-back-top失效问题及解决办法

最新推荐文章于 2024-05-28 18:56:23 发布

Bankcary

最新推荐文章于 2024-05-28 18:56:23 发布

阅读量723

点赞数 12

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/Bankcary/article/details/135830067

版权

const app = () => {
  return document.getElementById('app')
}

<a-back-top :visibility-height="0" :target="app" />

原因：a-back-top组件没有绑定好所设置需要监听其滚动事件的元素

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Bankcary

关注关注

12
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
【antdv】a-back-top失效问题及解决办法

原因：a-back-top组件没有绑定好所设置需要监听其滚动事件的元素。
复制链接

扫一扫

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

08-29

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

antd BackTop回到顶部 a-back-top回到顶部组件使用，a-back-top不显示，a-back-top无效问题

weixin_47602884的博客

09-15

1363

因为默认的是window，所以我们往往需要改变target的指向。有一天我需要用到 a-back-top回到顶部组件，在引用至页面中，发现无论何时都没有生效，就小小组件花了我中午宝贵的40分钟休息时间才弄好！1、target 设置需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数。滚动高度达到此参数值才出现，而你的滚动还不到，所以可以把这个数据重新设置小点。2、当第一步实现了，有可能你的页面上咋滚都没出现回到顶部那个按钮，这是因为你的。3、放在任何地方都行，因为他。

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

Back Top ②（回到顶部）

前端向朔

08-16

1314

为什么element的el-backtop会不管用，来看这里

GeniusXYT的博客

05-23

5857

<template> Scroll down to see the bottom-right button. <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop> </template> 把target指向你要产生“回到顶部”按钮的组件，这个组件一定要是产生滚动条的组件！这个组件一定要是产生滚动条的组件！这个组件一定要是产生滚动条的组件！举

react antd引入后样式不显示

water_Popcorn的博客

12-18

3747

问题：npm install antd之后，使用antd没有样式效果。解决方法：在index.js文件头部引入 import'antd/dist/antd.min.css';

Backtop 回到顶部失效? 手搓回到顶部按钮【基于vue自定义】

General_D的博客

05-21

1245

解决elemnt-ui的Backtop组件失效问题，两种方法帮你解决小烦恼~ 基于vue自定义一个回到顶部按钮，包含超视距显示、视距内隐藏、一键回到顶部，诸多丝滑小妙招等你来撩，阿巴阿巴~

解决ElementUI的el-backtop无效的问题

weixin_45714898的博客

06-29

5687

错误用法示例 1. 直接拷贝了elementui的示例代码，添加了bottom和visibility-height属性 2. 控制台报错Error in mounted hook: "Error: target is not existed: .page-component__scroll .el-scrollbar__wrap" 解决方法1 去掉target，直接使用el-backtop <template> <div id="app"> <d

Back Top ①（回到顶部）原生JS实现

前端向朔

08-13

3935

button<a href="javaScript:void(0);" id="btn"></a>style<style> #btn { display: none; width: 40px; height: 40px; position: fixed; right

经典Top-K问题最优解决办法以及C++代码实现

Hairy_Monsters的博客

04-02

7709

问题描述： Top-K问题是一个十分经典的问题，一般有以下两种方式来描述问题：在10亿的数字里，找出其中最大的100个数；或者在一个包含n个整数的数组中，找出最大的100个数。前边两种问题描述稍有区别，但都是说的Top-K问题，前一种描述方式是说这里也许没有足够的空间存储大量的数字或其他东西，我们最好可以在一边输入数据，一边求出结果，而不需要存储数据；后一种说法则表示可以存储数据，这...

关于ionic ion-nav-back-button 标题隐藏及修改

KoalaShane

05-03

3451

关于ionic ion-nav-back-button 标题隐藏及修改最近在做ionic APP开发，遇到一些问题，其中就是关于ion-nav-back-button文字的隐藏修改，做个记录，方便以后查阅。 ion-nav-back-button在一个 ionNavBar中创建一个按钮。当用户在当前导航堆栈能够后退时，将显示后退按钮。用法默认用法<ion-nav-bar>

解决Error starting ApplicationContext.To display the conditions report re-run your application xxx的问题

最新发布

码农研究僧的博客

05-28

2644

出现 Transaction rolled back because it has been marked as rollback-only 解决方法

element ui 组件的库的Backtop用法，以及没有效果的问题

weixin_46174785的博客

08-05

1192

Backtop组件的基本用法： js代码 // 这个div标签叫作用是，滚动的到顶部的距离是以他基准，最好放到顶部 <div class='container'></div> <el-backtop target=".container" > <div class="toTop">Top</div> </el-backtop> css代码： .container { width: 100%; /

Element UI中的BackTop无法使用的解决方案

Jesus_z的博客

03-02

5738

问题描述最近在写个人博客时使用elementUI来作为前端框架，但是当我使用到BackTop时发现无法使用的现象。具体表现为：滚动页面后该返回顶部按钮组件并没有出现。 ElementUI官网文档：https://element.eleme.cn/#/zh-CN/component/backtop 问题分析在查阅了大量文章后，发现该组件的实用方式很简单，直接引入即可，如下图是最简单的...

【Python百日进阶-Web开发-Feffery】Day397 - fac其他02：AntdBackTop回到顶部

岳涛的博客

06-23

552

文章目录前言：fac是什么？“人生苦短，我用Python；Web开发，首选Feffery！”↓↓↓ 今日笔记 ↓↓↓二、fac其他：AntdBackTop回到顶部2.1 语法与参数2.1.1 语法2.1.2 主要参数说明2.2 使用示例2.2.1 回到顶部示例前言：fac是什么？ feffery-antd-components（简称fac），是国内大佬费弗里(Feffery)老师基于著名的React UI组件库ant design进行二次开发，将ant design中的诸多实用组件及特性引入Dash，

antd <BackTop>组件的使用

weixin_30838921的博客

07-02

1906

<Content className={style.content} style={{ maxHeight: 'calc(100vh - 175px)',overflowY:"auto" }} id ='handelDocID'> 　　<BackTop visibilityHeight={300} target ={()=>document.getEleme...

vue开发中遇到的坑之返回顶部，在Android端居然不能用的问题。

一键写代码的博客

05-15

670

问题描述：自己按照element-ui的思路写了一个返回顶部的公共居中，使用在移动端。在PC上的模拟器和IOS手机正常，在安卓上跑，居然没有效果。气死人了。原因分析 document.documentElement.scrollTop在值，在安卓端，始终是0。 解决办法 安卓端使用document.body.scrollTop来替代。兼容写法 const scrollTop= document.documentElement.scrollTop || document.body.scrollTop;

Back Top （回到顶部）JS实现

weixin_34355715的博客

07-01

329

button <a href="javaScript:void(0);" id="btn"></a> style <style> #btn { display: none; width: 40px; height:...

ant-design-vue

扶强的专栏

10-19

2522

所有组件 <a-button></a-button> 按钮组件 <a-icon type="exclamation" /> icon图标 <a-row></a-row> <a-col></a-col> Grid删格组件 <a-layout></a-layout> layout布局组件 <a-space></a-space> space间距组件 <a-affix>&

a-back-top如何单独引入在页面里

05-31

如果您只需要在页面中使用a-back-top组件，而不想引入整个Ant Design Vue组件库，可以按照以下步骤进行操作： 1. 在您的Vue项目中安装a-back-top组件： ``` npm install a-back-top --save ``` 2. 在您的Vue组件中引入a-back-top组件： ```vue <template> <div>  <a-back-top :visibility-height="100" /> </div> </template> <script> import ABackTop from 'a-back-top' export default { components: { ABackTop }, // 组件的其他选项 } </script> ``` 在这个例子中，我们通过`import`语句引入了a-back-top组件，并在组件的`components`选项中注册了该组件。然后，我们将a-back-top组件放在了Vue组件的模板中，并设置了`visibility-height`属性为100像素。您可以根据需要进行修改。