上下拉-抽屉菜单实现在开发中一般我们都使用左右侧换菜单,而上下抽屉菜单却很少见,今天我们实现一个简单的上下拉抽屉菜单。首先我们先直观的看下上下拉抽屉菜单的实现效果:                                 
转载 2023-11-24 05:50:51
147阅读
       在web或移动端开发中,有时候我们需要做一个可滚动显示的banner、轮播、滑动翻页显示内容等,常用的插件就数swiper。当然如果我不想因为一个小的页面去引入一个库,那么我们就手动写一个简易版的swiper。因为正做的项目是vue中需要用到滑动翻页效果,就用vue来实现一个垂直方向滑动翻页的效果咯!      &
转载 2023-10-28 13:40:04
326阅读
## vue 滚动条组件对比 由于项目中需要使用到滚动区域,且要求滚动区域可以设置最大高度,并要求支持谷歌和IE浏览器。 在使用了以下几款滚动条后针对他们的情况记录他们的优缺点 ``` 一、vue-custom-scrollbar 这是一款自定义的滚动插件,基于perfect-scrollbar库。适用于PC端 1) 安装:vue-custom-scrollbar 2) 局部使用 import v
转载 2023-09-27 13:30:18
563阅读
vue中表格滚动加载数据的几种方式表格滚动加载数据本次将分两种类型进行讲解,分别是表格内加载(即监听el-table中的滚动事件,好处是表格的表头可以固定住)、表格的父级元素绑定滚动时间加载数据。一、监听表格内的滚动事件(可固定住表头)1、vue-infinite-loading使用文档说明链接:vue-infinite-loading好处是:可以固定住表头,监听表格的滚动,且每次滚动到底部加载
转载 2023-08-26 08:49:19
141阅读
 如标题,效果如下图: 我做的是移动端,表格太长,所以做左边固定列右边滑动,上图右边显示动态箭头是让用户知道表格可以滑动。表格的思路:写两个table一个是整体的table,外面的div保持宽度固定,内部的table宽度大于外部才能滚动;一个是左边固定列,这个固定position:absolute在左边,就是盖在大table上面;下面table组件// table.vue &l
最近自己在自学vue2.0,然后就自己摸索做一个简单的后台管理系统,在做的过程中,总感觉不同浏览器自带的滚动条样式不统一,也很难看,所以就在网上找一些使用vue的滚动条插件。最开始用的是Easy-scroll插件,可是在使用过程中,发现一个问题——由于在开发过程中,需要经常打开开发者选项进行调试,可是只要一开启这个选项,Easy-scroll插件就会出现debugger断点,在网上也一直没找到怎么
转载 2024-02-05 16:32:34
94阅读
接上篇文章:在上篇文章中实现了通过使用scrollIntoView()在使用vux的移动端实现了点击锚点进行页面dom定位,但是这个demo在ios中运行存在兼容性问题,滑动页面时使用position:absolute定位的dom会出现跳动现象,待有时间再解决这个bug。好了,开始本篇内容部分:本篇内容是在上篇内容的基础上二次开发而来,实现了双向定位,当页面上下滑动到某个位置时,对应的锚点会出现高
滑动删除demo
原创 精选 2022-03-28 11:48:48
1089阅读
1点赞
在开发应用过程中,使用 Vue.js 的时候,特别是在iOS上,可能会碰到一个棘手的问题,那就是“无法滑动”或“不响应滑动”。这类问题影响用户体验,处理得当能够避免许多不必要的后续问题,因此我们需要设法解决它。 ## 背景描述 近年来,移动端的应用越来越多,尤其是使用 Vue.js 开发的单页应用(SPA)在用户体验方面的发展迅速。然而,我在2023年初的一个项目中遇到了一个问题:在某些 iO
原创 5月前
46阅读
# 实现 Vue iOS页面滑动教程 在现代前端开发中,实现页面滑动是一项常见需求。在 iOS 设备上,滑动体验需要特别注意,因为其触控操作与桌面浏览器大相径庭。本篇文章将指导你如何在 Vue.js 中实现流畅的页面滑动效果。 ## 整体流程 下面是实现 Vue iOS 页面滑动的整体步骤: | 步骤 | 描述 | |--
原创 10月前
20阅读
# 在 Vue 中实现 iOS 禁止滑动的完整指南 在移动设备上,尤其是 iOS 设备,默认的情况下用户可以通过手势做很多操作,比如滑动页面、滚动列表等等。有时候我们希望在应用中禁止这种滑动,特别是在模态框或特定场景下。今天我们将学习如何在 Vue.js 中实现 iOS 的禁止滑动。 ## 流程概述 首先,我们将整个实现过程整理成一个流程表,帮助你更清晰地理解每个步骤。 | 步骤
原创 8月前
64阅读
使用方法目录1. 新建文件 dragVerifyImgChip.vue ,复制粘贴下方代码<template> <div class="drag-verify-container">
原创 2022-07-12 17:11:25
628阅读
这篇文章主要介绍了vue移动UI框架滑动加载的方法,现在分享给大家,也给大家做个参考。前言在我们移动端还有一个很常用的组件,那就是滑动加载更多组件。平常我们看到的很多插件实现相当复杂就觉得这个组件很难,其实不是的!!这个组件其实可以很简单的就实现出来,而且体验也能非常的棒(当然我们没有实现下拉刷新功能)!!下面我们就一起来实现这个组件。效果展示先上一个gif图片展示我们做成后的效果,如下:DOM结
一、windows系统下掉ping 方法1:命令行模式进入服务器后 点击 开始——运行 输入命令:netsh firewall set icmpsetting 8这样就可以在外部ping到服务器了 非常简单实用!同样道理,如果想禁止Ping,那运行如下命令即可实现:netsh firewall set icmpsetting 8 disable方法2:防火墙高级面板方式1. 进入控制面板——&g
原创 2017-03-08 10:38:48
1068阅读
下载(vue-touch)npm install vue-touch@next --savemain.js中引入:import VueTouch from 'vue-touch' Vue.use(VueTouch, {name: 'v-touch'})开始使用 (用v-touch将要实现滑动的区域包住 并绑定相应事件)<v-touch @swipeleft='left' @swiperigh
转载 2024-05-06 14:26:35
716阅读
1.通过内核ping[root@t6 ~]# vim /etc/sysctl.conf 将net.ipv4.icmp_echo_ignore_all = 0 改为net.ipv4.icmp_echo_ignore_all = 1  即可实现ping ,如果,想打开,改为0 即可。2.通过iptablespingiptables -A INPUT -p icmp --icmp-typ
原创 2013-12-31 10:51:39
622阅读
<template> <div> <div class="date_picker"> <van-button @click="preWeek()"b
原创 2023-02-24 12:21:23
154阅读
# 如何在 Vue 中实现 iOS 的滑动返回监听 在移动端开发中,我们常常会遇到用户滑动返回的情况,特别是在 iOS 设备上。如果你是新加入的开发者,可能会对如何监听这个事件感到困惑。本文将详细讲解如何在 Vue 中实现这一功能,并提供具体的代码示例和解释。 ## 整体流程 我们可以将实现滑动监听的过程分成几个关键步骤。以下是整个流程的概述: | 步骤 | 说明 | | ---- | -
原创 2024-10-22 03:33:06
151阅读
先上图: 如果想要点击tab切换页面内容,或者活动页面切换tab,很多ui组件可以做到。今天我要探讨是如何做到像微信那样的滑动切换tab,既能左右滑动切换,又能上下滑动一个页面而不影响其他页面的滚动位置。如果用ui组件的话,子页面都是在一个div里面的,虽然可以做到左右滑动,但是只要有一个页面上下滚动,所有页面也会滚动到同样的高度。浏览了相关的博客或GitHub上面做的插件。大概思路是:子页面是在
转载 2023-05-26 14:53:19
380阅读
   Vue的图片滑动验证            首先安装插件支持(先简要概述下组件参数的配置信息和配置位置)npm install vue-puzzle-vcodehtml代码部分<Vcode :show="isShow" @success="success"/>其中@success是验证成功之后的回调JS代码import Vcode from "vue-puzzle-vcod
Vue
转载 2021-05-09 00:04:18
622阅读
2评论
  • 1
  • 2
  • 3
  • 4
  • 5