最近用 Vue 做移动端页面遇到一个问题，从列表页进入详情页，再返回到列表页，不管之前滚动到哪里，每次返回时都跳到列表最顶部。这样体验肯定不好，期望的应该是记住滚动条的位置，每次返回还是在原来的位置上，便于继续浏览。于是在网上搜解决方法，搜了一大圈看了 n 篇文章，都没有说清楚。起码我是没有通过看一篇文章而完美解决，所以决定写一篇详细的亲测可行的解决方案。一共分三步：给 router-view 添
转载
2024-01-05 13:39:06
220阅读
在开发移动端应用时，尤其是在使用 Vue.js 框架时，iOS 上的滚动条表现常常给开发者带来诸多困扰。iOS 特有的滚动效果可能无法满足我们在网页上流畅的用户体验需求，这就需要我们深入剖析其技术原理，构建合理的解决方案，并优化性能。
## 背景描述
在现代 Web 开发中，滚动条的设计与实现至关重要。尤其是在 iOS 设备上，原生的滚动条与我们预想中的表现可能不一致。稍有不慎，就会导致用户体
在文档页面(http://localhost:8080/document)拉动滚动条，然后刷新浏览器会发现滚动条依然在原来的位置，这是浏览器的默认行为，会记录浏览器滚动条默认位置。但是点击浏览器“前进/后退”按钮，会发现当初那个页面的滚动条从0开始了，没有记录上一次滚动条的位置。现在要求点击浏览器“前进/后退”按钮，页面滚动条要记录上一次的位置，这时需要设置它的的滚动行为。这时候需要在路由配置中设
转载
2024-01-04 21:41:39
89阅读
一、 安装插件 npm install --save vue-fullpage.js 二、 全局导入，在main.js中import 'fullpage.js/vendors/scrolloverflow'
import VueFullPage from 'vue-fullpage.js/dist/vue-fullpage.js'
Vue
转载
2023-07-23 23:57:50
194阅读
ScrollView简单应用activity中经常只是一个LinearLayout，但这样的话，如果activity内容超过一屏，无法滚动查看下面的内容。这时只需在外面嵌套一个ScrollView就可以了。 1 2 8 13 14 View Code
转载
2015-10-12 21:39:00
406阅读
2评论
vue使用screenfull进入全屏1.安装依赖npm install --save screenfull2.在需要设置的页面导入import screenfull from "screenfull";3.Js代码//全屏方法
isScreenFull() {
// 需要注意的是 如果判断!screenfull.enabled 显示的是不支持全屏的话 是因为谷歌的版本问题
转载
2023-10-05 09:00:32
126阅读
官方说明很仔细，我就简述我的用法：首先下载：npm install vue-happy-scroll --save-dev然后注册，我用的是局部注册，在需要的页面中引入：import { HappyScroll } from 'vue-happy-scroll'
import 'vue-happy-scroll/docs/happy-scroll.css'components: {
转载
2023-12-07 11:42:17
146阅读
# Android滚动条
滚动条是Android应用程序中常见的用户界面元素，用于显示和控制可滚动视图的位置。它可以帮助用户在长内容列表中进行快速导航，并提供可视化指示当前视图的位置。本文将介绍Android中滚动条的用法和示例代码。
## ScrollView滚动条
ScrollView是一个容器视图，当内容太大无法完全显示时，可以在垂直或水平方向上滚动以浏览内容。它自带垂直滚动条，用户可
原创
2023-07-24 10:43:16
267阅读
小小滚动条，设计还是挺复杂。其中有两种类型的滚动条，一条是普通的滑动时的滚动条，一种是快速滚动条项目中曾经就出现过XML定义了 android:scrollbars="none" 但是滑动时，还是会出现滚动条，其中是因为设置了快速滚动条的原因 android:fastScrollEnabled="true"，而默认android:fastScrollEnabled是false的
原创
2015-11-02 10:31:09
1110阅读
Vue下配置好看的滚动条1、原生代码优化1.1 滚动条组成1.2 简洁展示1.3 参考2、（vue组件-自定义滚动条）2.1 介绍2.1.1 安装2.1.2 属性 Attribute2.1.3 事件 Events2.1.4 方法 Methods2.2 使用2.2.1 引入组件2.2.2 Vue中使用2.2.3 给body设置自定义滚动条2.3 参考 1、原生代码优化1.1 滚动条组成::-web
1、如果你的scrollbar是Vertical的，设置以下属性android:scrollbarThumbVertical="@drawable/scrollbar_indicator"
android:scrollbarTrackVertical="@drawable/scrollbar_bg"2、如果你的scrollbar是horizontal的，设置以下属性android:scrollba
转载
2023-05-22 13:59:46
660阅读
目录 介绍下载引入使用 配置项事件refresh/load介绍Vuescroll 一个功能强大，有多种模式的基于Vue.js的滚动条插件，它的原理是创建 div 用于包裹要滚动的内容，操后操作容器的样式或者scrollTop或scrollLeft完成内容的滚动。设计它的目的是用来美化和增强你的滚动条。你可以通过更改配置来选择不同的模式:
native 模式: 类似于原
转载
2024-01-12 15:07:10
65阅读
vue中关于滚动条的那点事不知道你有没有遇到过这种情况，有时当页面切换时，滚动条不在页面的顶端。最近半路加入一个项目，就遇到这种情况。(若只是为了解决此问题，可直接翻到最下方)下面谈谈解决此问题的过程：什么情况下会出现滚动条的缓存？之前想要滚动条在页面跳转时被缓存，需要自己设定keep-alive，<keep-alive v-if="$route.meta.keepAlive">
转载
2023-07-23 23:57:00
175阅读
先张贴一张效果图：说明：这里会出现横向滚动条，是因为默认是开启横向滚动条的，并且内容区域高度超出了外层盒子的宽度 下面介绍使用方法：1、安装vue-happy-scroll推荐使用npm安装，这样可以跟随你的webpack配置去选择怎样打包 npm install vue-happy-scroll --save-dev 当然，你也可以选择使用script标签的方式引入 <!-- 引
转载
2023-12-19 22:06:10
136阅读
# Android 滚动条滚动距离实现指南
作为一名经验丰富的开发者，我将为你详细介绍如何在Android中实现滚动条的滚动距离。我们将通过一个简单的示例来展示这个过程。
## 步骤流程
以下是实现滚动条滚动距离的主要步骤：
| 序号 | 步骤描述 | 操作 |
|------|----------|------|
| 1 | 创建布局文件 | 创建一个包含滚动视图的布局文件 |
|
原创
2024-07-29 07:53:43
84阅读
实现思路记录当前滚动条与文档顶部间的距离，将滚动后滚动条与文档顶部间的距离与滚动前滚动条与文档顶部间的距离做比
原创
2022-07-12 16:15:51
1764阅读
//main.js Vue.directive('tableScroll', { bind(el, binding, vnode, oldVnode) { let scrollTop = 0; let dom = el.querySelector(".el-table__body-wrapper") ...
转载
2021-07-15 16:15:00
1109阅读
2评论
其实你百度了一下基本都是 mounted() { window.addEventListener('scroll', this.handleScroll) }, methods: { handleScroll() { console.log('a') } }如何你复制过去基本不会调用handleScroll函数...
原创
2022-07-25 16:32:21
2347阅读
# 使用Vue实现iOS风格的滚动条
在本篇文章中，我们将指导你如何使用Vue来实现一个美观的iOS风格滚动条。通过以下流程步骤，你将能够轻松完成这个任务。
## 流程步骤
| 步骤 | 描述 |
| ---- | ----------------------- |
| 1 | 创建Vue项目 |
| 2 |
原创
2024-10-09 05:47:48
57阅读
拉伸 table 表格滚动区域高度想要去实现拉伸表格滚动区域高度的功能（鼠标选中表格底部边框来拉伸整个表格滚动区域高度）table表格使用的是 ant-design-vue 组件库中的表格，但是所有表格同理实现想法：开始：为table设置::after伪元素向table表格的底部添加一个边框，再对该伪类设置事件，但是问题是伪类不是真实dom所以无法获取到该伪类结果：使用js添加新元素模拟伪类的效果
