vue移动端图片预览组件
安装：npm install -s w-previewimg 或 yarn add w-previewimg在线预览地址： https://wenyuming.github.io/w-demos/dist/index.html#/previewimgDemo预览时请按f12，在移动端模式下预览由于预览网址带宽比较低，加载图片会比较慢，等图片都加载完才能完整体验，耐心等一下哦。操作说明：左滑右滑切换图片，单击预览图片关闭...
2024-01-10
vue移动端弹框组件的实例
最近做一个移动端项目，弹框写的比较麻烦，查找资料，找到了这个组件，但是说明文档比较少，自己研究了下，把我碰到的错，和详细用法分享给大家！有疑问可以打开组件看一看，这个组件是仿layer-mobile的，很多用法都一样，可以看看哦！一、npm 安装// 当前最新版本 1.2.0 npm install vue-layer-mobile/...
2024-01-10vue移动端 有滑动解锁组件吗？
问题描述：找了好多资料都是pc端的回答：类似的有很多呀, 题主说都是PC, 但其实只要根据移动端样式适配一下, 数据调一下, 方法名改一下就行了第一步：npm install --save vue-monoplasty-slide-verify第二步：main.js配置import Vue from 'vue';import SlideVerify from 'vue-monoplasty-...
2024-02-26vue实现移动端省市区选择
本文实例为大家分享了vue实现移动端省市区选择的具体代码，供大家参考，具体内容如下效果：安装：npm install v-distpicker --save组件代码：<template><div><li > <div class="left"> <span>所在地区</span> </div> <div class="right r"> <div class="city" @click="toAddress">{{city}}</div> <i class="arrow-r"> </i> </div></l...
2024-01-10
vue实现移动端多格输入框
近来公司提出需求，完成如下图h5页面操作。网上没什么轮子可以使用，就自己徒手撸了一个。不多废话，直接上代码。<div class="verify-tel"> <h1>短信验证</h1> <h2>SMS Verification</h2> <div> <input ref="pwd" :maxlength="digits.length" v-model="msg" style="position: absolute;z-index: -1;opacity: 0"/> ...
2024-01-10vue移动端实现红包雨效果
本文实例为大家分享了vue实现红包雨效果的具体代码，供大家参考，具体内容如下下面是代码：<template> <div class="ser_home"> <ul class="red_packet" id="red_packet"> <template v-for="(item, index) in liParams"> <li :style="{ left: item.left, animationDuration: item.durTime, webkitAnimationDuration: it...
2024-01-10
移动端无限滚动 TScroll.vue组件
// 先看使用TScroll.vue的几个demo 1. https://sorrowx.github.io/TScroll/#/ 2. https://sorrowx.github.io/TScroll/#/simple-tscroll 3. https://sorrowx.github.io/TScroll/#/xunlei-live 4. https://sorrowx.github.io/TScroll/#/youliao 5. https://sorrowx.github.io/TScr...
2024-01-10vue.js移动端tab组件的封装实践实例
这是vue.js系列文章第二遍，第一篇讲述的是如何搭建vue.js的开发环境，计划按进度做成一款完整的app，当然前提是时间允许的话。本文用到了stylus语法，至于为什么使用stylus而不去用sass，主要是因为stylus来自于Node.js社区。总之stylus是一款高效的CSS预处理器，具体使用不在本文讨论范围。好了，废话...
2024-01-10vue移动UI框架滑动加载数据的方法
前言在我们移动端还有一个很常用的组件，那就是滑动加载更多组件。平常我们看到的很多插件实现相当复杂就觉得这个组件很难，其实不是的！！这个组件其实可以很简单的就实现出来，而且体验也能非常的棒（当然我们没有实现下拉刷新功能）！！下面我们就一起来实现这个组件。效果展示先...
2024-01-10
vue移动端实现手指滑动效果
本文实例为大家分享了vue移动端实现手指滑动效果的具体代码，供大家参考，具体内容如下滑动时候黄色块宽度跟着变化通过touch点击实现目前感觉宽度变化有点问题，还在思考中下面上代码：<template lang="html"> <div class="back" ref="back" @touchstart.prevent="touchStart" @touchmove.prevent="touchMove"> <div class="b...
2024-01-10
vue实现移动端触屏拖拽功能
vue实现移动端可拖拽浮球，供大家参考，具体内容如下1 首先创建一个div<div class="floatball" id="floatball" @mousedown="down" @touchstart.stop="down" @mousemove="move" @touchmove.stop="move" @mouseup="end" @touchend.stop="end" @click="showRewardDesc" :style="{top:position.y+'px', left:pos...
2024-01-10
【JS】vue+vant移动端地区级联选择组件
首页专栏javascript文章详情0vue+vant移动端地区级联选择组件quanta发布于 今天 08:25 写在开头：项目的框架是vue+vant，业务需求一个级联的地区选择，写完才发现vant本身也有这组件....后来看vant本身用的逻辑跟我不太一样，觉得还有点思考价值那就发上来当做实现记录吧~总体思路（select与tabs独...
2024-01-10
vue移动端预览pdf，读取文件流出现跨域
刚开始是返回的base64转成blob访问不到资源，后来改文件流了接口返回的是文件流，我在拿到文件流之后转换为blob URLurlPdf blob:http://192.168.xx.xx:1234/031...但是url也访问不到资源,后来有人说加上responseType: 'blob',加上之后接口就跨域了。回答：可以参考这个如何预览以及下载pdf文件测试：手机：safari手机：chr...
2024-02-24
vue移动端判断手指在屏幕滑动方向
vue移动端判断手指在屏幕滑动方向，供大家参考，具体内容如下可以据此实现手指滑屏切换tab的功能，例如京东的订单页，这几个tab切换就可以利用这个实现页面<div @touchstart="handleTouchstart" @touchend="handleTouchend" class="slotWrap" >//屏幕滑动//手指按下屏幕 handleTouchstart(event){ this.star...
2024-01-10
Vue常用的UI组件-vant（轻量、可靠的移动端Vue组件库）(推荐)
1.github地址：https://github.com/youzan/vant2.安装：npm i vant -S 安装完成后，会在项目的package.json文件中显示vant插件，如下： "dependencies": { "animate.css": "^3.7.2", "moment": "^2.24.0", "pubsub-js": "^1.8.0", "shortid": "^2.2.15", "vant": "^2.6.3", "vue": "^2...
2024-01-10
Vue+ElementUI 导航组件
创建导航页组件在components目录下新建一个navigation目录，在Navi目录中新建一个名为Navi.vue的组件。至此我们的目录应该是如下图所示： 然后我们修改main.js文件，修改后的文件如下import Vue from \'vue\'//import App from \'./App\'import router from \'./router\'import ElementUI from \'element-ui\';import \'element-ui/lib/theme-ch...
2024-01-10
详解vue移动端 下拉刷新 - 绯色璃
详解vue移动端 下拉刷新 看完这篇文章，相信大伙也一样可以，做出一个自己的刷新，加载的组件说这个功能之前，大家要先了解一下，要怎么触发滚动条事件。 一定要注意，所有滚动事件都必须要满足这个条件，横向滚动条也一样，只要满足子元素宽度大于父元素宽度就可以了...
2024-01-10
vue写的PC端表格，如何在移动端显示？
写了个pc端的页面，基本上是个表格吧！在移动端显示不正常，只能显示部分。不知该如何处理，最后是这样解决的ebody加个样式 min-width: 1200px;然后就真的可以显示了 ，这是在移动端显示的页面解决了一个小问题，真的很开心啊...
2024-01-10
【Web前端问题】vue异步加载组件问题
1.环境说明：通过vue init初始化后项目仅在router/index.js里修改如下import Vue from 'vue'import Router from 'vue-router'// import HelloWorld from '@/components/HelloWorld'Vue.use(Router)const a='@/components/HelloWorld';const HelloWorld = ()=> import(/* webpackChunkName: "group-...
2024-01-10
VantUI+Vue移动端H5实现仿微信朋友圈功能
相关技术栈：# yarn add vue-photo-preview# npm i vue-photo-preview1、 图片预览切换vue-photo-preview 2、滑动（vant-ui）van-swipe (轮播控制滑块大小)3、关键点：获取对应组的图片地址数组根据图片个数展示不同的布局 （100%，49%，32% 三目运算）没有图片不显示图片预览切换对应的图集（:preview="index"）...
2024-01-10
vue 在移动端实现红包雨 （兼容性好）
下面是代码：<template> <div class="ser_home"> <ul class="red_packet" ></i> </a> </li> </template> </ul> </div></template><script>export default { data () { return { liParams: [...
2024-01-10
【Vue】vue菜鸟关于vantUI组件引入的问题。
本菜鸟新建项目，想尝试vue组件，选择了vantUI做为组件开发。参照官方的API文档进行组件引入配置，可是不知道忽略了那个步骤，在引入的过程中报错。报错信息：did you register the component correctly? For recursive components,make sure to provide the "name" option.真的是实在想不出问题出在那里。按照官方文档一步...
2024-01-10
如何查看vantUI官方组件的.vue文件（抛转篇）
有些vantUI组件文档说明太浅，若能参考对应的.vue文件，会更好理解，如何查看呢？vantUI官方地址：开发指南git演示项目 · 下载地址：vant演示项目步骤说明1初始化项目git clone [email protected]:youzan/vant.git (安装演示项目)以上就是关于“ 如何查看vantUI官方组件的.vue文件（抛转篇） ” ...
2024-01-10
Vue解决移动端弹窗滚动穿透问题
一、问题描述在移动端的H5页面中，我们经常会遇到 “点击按钮-->弹窗-->选择选项” 这样的场景。而在选项过多出现滚动条时，滚动滚动条至容器的底部或者顶部。再往上或往下拖动滚动条时，滚动动作会出现穿透，这时候底部的body也会一起滚动。问题总结：内容在滚动到容器的顶部或者底部时，...
2024-01-10
Vue解决移动端弹窗滚动穿透问题
一、问题描述在移动端的H5页面中，我们经常会遇到 “点击按钮-->弹窗-->选择选项” 这样的场景。而在选项过多出现滚动条时，滚动滚动条至容器的底部或者顶部。再往上或往下拖动滚动条时，滚动动作会出现穿透，这时候底部的body也会一起滚动。问题总结：内容在滚动到容器的顶部或者底部时，...
2024-01-10
