Vue移动端

vue移动端配置自适应，全局自动转换px单位

1、下载lib-flexiblenpmilib-flexible--save2、在main.js中引入lib-flexibleimport'lib-flexible/flexible'3、安装postcss-px2remnpmipostcss-px2rem--save4、安装px2rem-loadernpmipx2rem-loader--save5、配置px2rem-loader在build/ut
guanguan0_0·2020-08-11 21:46

vue移动端滴滴cubeui和postcss-pxtorem插件的rem混合使用,不影响UI的px

我用的是postcss-post，cube，在node——modules下找到postcss-pxtorem/indedx.js‘usestrict’;varpostcss=require(‘postcss’);varobjectAssign=require(‘object-assign’);varpxRegex=require(’./lib/pixel-unit-regex’);varfilte
杜昆淇·2020-08-11 21:38

【VUE移动端适配】VUE使用flexible布局

配置flexible安装lib-flexible在命令行中运行如下安装：npmilib-flexible--save引入lib-flexible在项目入口文件main.js里引入lib-flexible//main.jsimport'lib-flexible'meta标签处理在项目根目录的index.html中根据需求删除如下meta，采用flexible自动设置。flexible只针对iphon
劲枫·2020-08-11 20:42

vue移动端rem适配

移动端项目rem是必不可少的，在不同系统不同机型下，因屏幕大小尺寸不一样，使得用px单位的页面在移动端显示的不一样。所以移动端项目才会使用rem单位首先安装px2remnpminstallpx2rem-loader-snpminstalllib-flexible—s然后在main.js中引入lib-flexibleimport'lib-flexible/flexible'然后在vue项目中buil
爽儿儿儿·2020-08-11 20:36

vue移动端适配完整过程!

1.假设当前已经使用vue-cli搭设好项目2.安装flexiblenpmilib-flexible3.在项目入口文件main.js中引入lib-flexibleimport'lib-flexible'4.去掉目标文件的index.html头里的meta标签//不要写上边这行meta，flexible会为根据屏幕自动给加上，如果你自己加了，那么flexible会根据你加的值来计算，也就会出现固定的
任志野·2020-08-11 20:02

vue移动端的适配rem和vw记录

在接触移动端开发的时候，适配是必须要解决的一个问题。个人在开发过程中，也是边做边学，使用了一些常用的解决方案，这里一一列举出来：前提：移动端的适配更多关注的是宽度的适配，也就是说元素在不同设备上通过改变自身宽度来实现在页面的比例一样，这样布局就不会乱掉1.百分比代替px在最开始做移动端页面时，能想到的只有使用百分比，简单直接body{margin:0;padding:0;}.box{width:8
Liu_Jun_Tao·2020-08-11 20:09

vue移动端自适应

方案1：直接引入js（自己写的动态改变fontsize的js）functionhtRem(){varww=document.documentElement.clientWidth;if(ww>750){ww=750;}document.documentElement.style.fontSize=ww/7.5+"px";}htRem();window.onresize=function(){htR
Linkea_i·2020-08-11 20:37

使用vue移动端实现自适配

1.首先把安装amfe-flexible，这里使用npminstallnpmi-Samfe-flexible复制代码2.在入口文件main.js中引入import‘amfe-flexible/index.js’复制代码3.在根目录的index.html的头部加入手机端适配的meta代码复制代码4.安装postcss-pxtorem是一款postcss插件，用于将单位转化为remps：前提是ui设计
Chenming_321·2020-08-11 20:32

VUE移动端适配，将px转换成vw插件使用

一.在终端中进行npminstallpostcss-px-to-viewport--save-dev二.这时会生成一个postcss.config.js文件，如果没有就手动创建一个在postcss.config.js里面添加module.exports={plugins:{autoprefixer:{},"postcss-px-to-viewport":{viewportWidth:375,//视
进阶的巨人001·2020-08-11 20:56

vue移动端项目使用第三方ui框架适配rem的问题

近期使用vue开发移动端项目，引入了mint-ui框架。由于mint-ui框架中css样式使用了px作为单位，无法使用rem适配不同设备的屏幕。方案一，使用px2rem-loader将px转为rem第一步：在终端中安装px2rem-loadernpminstallpx2rem-loader--save-dev复制代码第二步：然后在vue-cli项目找到build/utils文件，在里面加上以下代码
weixin_33695082·2020-08-11 20:09

vue移动端使用rem实现适配

rem.js适配!(function(n){vare=n.document,t=e.documentElement,i=750,d=i/100,o="orientationchange"inn?"orientationchange":"resize",a=function(){varn=t.clientWidth||320;n>750&&(n=750);t.style.fontSize=n/d+"
sxs1995·2020-08-11 20:22

vue移动端rem适配--附带引入第三方库解决方案

一、先上解决方案：移动端适配我采用淘宝的一套rem解决方案源码：https://github.com/amfe/lib-flexible1、安装npmi-Samfe-flexible2、引入meta标签3、然后引入到项目import‘amfe-flexible’4、到这里适配基本解决，但是我们再写的时候量出来的尺寸都需要除以75rem，这样很烦，这时引入插件postcss-px2rem-exclu
有梦想必远方·2020-08-11 20:16

vue移动端项目，屏幕适配方法，rem

亲测有效，大家可以试试。使用的是vue-cli搭建的webpack项目，然后按步骤一步一步走下去就成功了1.终端中输入npmilib-flexible--save2.终端中输入npmipx2rem-loader--save-dev3.在项目入口文件main.js里引入lib-flexibleimport'lib-flexible'4.在项目根目录的index.html中添加如下meta5.在bui
bamboozjy·2020-08-11 20:20

vue移动端UI组件

1.vonicvonic一个基于vue.js和ionic样式的UI框架，用于快速构建移动端单页应用，很简约。中文文档|github地址|在线预览image2.vuxvux基于WeUI和Vue(2.x)开发的移动端UI组件库。基于webpack+vue-loader+vux可以快速开发移动端页面，配合vux-loader方便你在WeUI的基础上定制需要的样式。小编在开发微信公众号的时候使用过，欢迎来
胜天一子·2020-08-11 13:06

Vue移动端 viewport视口的设置、解决点击响应延时0.3s问题

（1）配置移动端视口：（2）解决点击响应延迟0.3秒的问题：if('addEventListener'indocument){document.addEventListener('DOMContentLoaded',function(){FastClick.attach(document.body);},false);}if(!window.Promise){document.writeln(''
柠檬不萌只是酸i·2020-08-10 09:18

vue移动端flexible.js结合Muse-ui使用的小坑

因为公司有个项目有webapp的需求，在前期准备的期间考虑过使用ionic，毕竟该项目web端的框架使用的是Angular，项目组的人也都比较熟悉，但是我们毕竟只是做个移动的网页，不想用ionic那么繁琐的东西，最终我还是选了vue。开始的设想是vue+Muse-ui或者Mint-ui(各有优缺点)+flexible.js，在做到手机端兼容的同时结合ui框架让项目更好看些，然后就开始动手做！这个时
zl_gogogo·2020-08-10 05:37

vuejs开发H5页面总结

vue移动端h5页面根据屏幕适配的四种方案关于布局方案当拿到设计师给的UI设计图，前端的首要任务就是布局和样式，相信这对于大部分前端工程师来说已经不是什么难题了。
前端库·2020-08-10 02:39

tips:在iframe中嵌入微信公众号文章

那么该怎么办呢，我在网上寻找一番之后倒是发现了一些基于jQuery的解决方法，虽然我的项目是VUE移动端项目，不过还是可以借
韭菜的故事·2020-08-09 23:03

vue移动端浏览器项目，微信内置浏览器中调用微信支付

微信内置浏览器中调用微信支付，前提需获取微信签名等信息，然后通过wx.config配置签名等信息，代码示例如下：wxPayInside(wxData){//微信内部浏览器letthat=thisthat.wxconfig(wxData)wx.ready(function(){//config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的
晴愔·2020-08-09 15:57

vue移动端适配（postcss-pxtorem和amfe-flexible）

一、移动端适配（postcss-pxtorem和amfe-flexible）在vue中实用rem自动转换插件(postcss-pxtorem和amfe-flexible事项移动端适配)实现思路：①通过postcss-pxtorem实现将px转成rem，②实用amfe-flexible插件进行HTML根节点的初始化。配置完这两个插件，我们就可以实用设计稿的px来进行开发了。1.安装postcss-p
四季飘雪·2020-08-09 11:45

vue移动端ui框架vant如何自定义引入阿里巴巴图标库

vant如何自定义引入阿里巴巴图标库框架虽然本身有提供部分icon，但是很多时候都无法满足我们得需要，这个时候我们就需要自定义引入icon，这里我是使用的阿里巴巴图标库。首先，我们先打开阿里巴巴图标库地址，下载我们项目里的图标资源。下载完的目录如下：在项目src/assets路径下新建一个文件夹iconfont(文件名随意取),将下载好的文件放在iconfont目录下。打开iconfont.css
liy1wen·2020-08-09 11:15

vue移动端适配（px转vw）postcss-px-to-viewport配置

安装postcss-px-to-viewportnpminstallpostcss-px-to-viewport根目录新建postcss.config.js文件//postcss.config.js文件module.exports={plugins:{'postcss-px-to-viewport':{unitToConvert:'px',//需要转换的单位，默认为"px"viewportWidt
猿者上钩·2020-08-09 10:20

vue移动端更改手机物理按键返回问题

又是一天见面的日子，春季盎然~已经无法在继续抒情下去了，写作水平骤降！！今天记录下应用cordva+vue生成的apk在手机物理返回时遇到的问题；前提说~~应用vue，我们可以自定义上一路径和下一路径，其实就是在开发webapp时，我们通常会在webapp的头部导航栏自定义返回的上层路径，但是，手机的物理路径并不是像上层路由那样直接返回了，手机物理返回，按照html5的history的路径进行返回
diandipi8532·2020-08-09 07:17

VUE移动端浏览器分享事件（微信，QQ，新浪微博）NativeShare.js

先看一下效果图：点击右上角的分享按钮，触发百度浏览器的分享事件，来实现分享。目前只支持UC浏览器百度浏览器等主流浏览器。使用NativeShare.js来达到上述功能的实现如何在Vue中使用：第一步：安装依赖：npminstallnativeshare第二步：在需要的vue组价或页面引入importNativeSharefrom'nativeshare'第三步：在点击分享的地方创建方法：@clic
姚辉乾·2020-08-09 05:39

Vue 日期控制的改造（只能选择年月）

1、前言学习Vue已经有很长一段时间了，也刚刚完成了一个Vue移动端项目，后面会陆续将个人在刚刚完成的这个Vue项目中碰到的坑进行汇总，然后以blog的形式分享出来。
蔚蓝色天空sky·2020-08-09 03:10

vue移动端路由切换完整实例

vue移动端路由切换完整实例在写移动端时，因为需要给页面做转场动画，便有了这次的研究其中最主要的时以下两个问题：浏览器导航栏的切换IOS上滑动切换时，会有两次页面的转场动画，一次自身滑动时进行的切换，随后触发我们设置的转场动画
weixin_34062329·2020-08-09 00:07

vue移动端日期选择组件

用了vux的一个弹窗转载来源:https://blog.csdn.net/Candy_mi/article/details/98612906?utm_source=app时间段:{{starttime}}至{{endtime}}-->请选择时间开始时间{{starttime}}结束时间{{endtime==''?'请选择结束日期':endtime}}上一月{{Year}}年{{month}}月下一
w晨晨·2020-08-08 23:36

Vue移动端日期选择器（datepicker.js）

声明：因为帮忙用到移动端用到日期选择器，效果如图使用方法：第一步：在main.js中引入importdatePickerfrom"../static/js/datePicker.js"//路径自己设置Vue.use(datePicker)第二步：在.vue文件中使用备注：需要更改样式在js里面更改第三步：在.vue文件中使用mounted(){this.datePicker();//加载日期选择控
你说的誓言°变失言·2020-08-08 11:10

Vue 日期控制的改造（只能选择年月）

1、前言学习Vue已经有很长一段时间了，也刚刚完成了一个Vue移动端项目，后面会陆续将个人在刚刚完成的这个Vue项目中碰到的坑进行汇总，然后以blog的形式分享出来。
zhaofeiweb·2020-08-08 10:38

vue移动端地址编辑地址回显

写这篇文章主要是前面写这个地址的时候遇到了一些坑，走了许多弯路，这里记录一下，给新手朋友们指道，这是编辑原图最开始我用了vantui框架，在地址这方面vant一直很好用，地址列表省市区选择组件都用，最开始没什么问题在经历了几次版本更新之后不知道什么页面与vant地址选择组件起冲突，导致选择省市区的时候弹框里空白，在经历了无数次尝试之后，我放弃了改用了muse省市区选择组件，但是地址回显的时候由于后
通通...·2020-08-07 21:55

VSCode一个简单的vue移动端适配方案

在index.HTML下用JS动态配置viewport我这里UI给的设计图都是750px，所以750px/15(份)=50rem(function(){varpixRatio=1/window.devicePixelRatio;document.write('');varhtml=document.documentElement;varhWidth=html.getBoundingClientRe
weixin_34284188·2020-08-07 20:03

vue项目在iPhoneX上的底部tab切换被小黑条遮挡问题

在修改公司以前的项目中，遇到了vue移动端在iphoneX上底部tab栏被遮挡的问题。在查网上，有很多方法，苹果也给出了开发建议，几乎都试了一圈。
如果有鱼·2020-08-07 17:34

vue移动端的左右滑动事件demo

*{padding:0;margin:0;}body{background:#EEEEEE;}.box{text-align:center;}.btn{position:relative;width:70%;height:40px;margin:150pxauto;border-radius:20px;background:#333333;}.btn-move{position:absolute;
染蓝了天·2020-08-05 11:51

Vue移动端左右滑动组件

一个业务问题由于加载的数据过大之前用Swiper组件一次性加载所有导致安卓低端手机及苹果内核性能低下导致闪退自己根据网上的代码再自己优化下写了个组件,能够监听用户左右滑动的事件.自己再通过按需加载,减少数据一次加载过多exportdefault{name:'slide',data(){return{startX:0,//开始触摸的位置endX:0,//结束触摸的位置disX:0,//移动距离las
qa2080639·2020-08-05 10:31

vue移动端使用clipboard实现复制功能

移动端实现复制功能1.先引入clipboard.js2.加入按钮##其中:data-clipboard-text="复制的内容"复制3.js中写入事件....methods:{createCopy(){varclipboard=newClipboardJS('.copybtn')//此处为点击的dom的类名clipboard.on('success',e=>{console.log('复制成功')
谁看到我的小饼干·2020-08-05 03:32

vue移动端拖拽的简单方案

话不多说，同事的需求，今儿早上过来敲了一会，希望对大家有用首先该需求比较简单，在谷歌上查了一会发现结果的方法都有些复杂，因此决定用vue自带的手指点击事件处理，菜鸟选手写的比较简单，将就将就。首先我们要用到的事件有手指点击事件：touchstart当手指放下去时，通过获取点击点信息与元素位置信息将元素中心点移动到点击点上手指移动事件：touchmove同上，获得两者位置信息之后想怎么操作就怎么操作
跑的飞快·2020-08-04 17:57

vue移动端开发h5基础配置

移动端项目中开发基础配置简介：仅针对于vue项目基础配置，但也适用于类似框架vue项目搭建项目初始化vue2.0vueinitwebpack基础配置依据个人爱好，这里直接省略vue3.0vuecreate基础配置同样省略vue3.0需要在根目录创建vue.config.js这里有一篇关于vue-cli3的全面配置的文章供大家参考，https://segmentfault.com/a/1190000
众生皆苦唯有我甜·2020-08-04 12:59

vue移动端手写tab栏切换

复制代码结构----供自己直接使用：全部**//注意a标签中的href必须去掉，否则路由出现问题**审核中审核通过退回//可直接编写内容在exportdefault{data(){return{//设置cur默认值cur：0}}}设置样式—可直接使用/*tab栏切换*/.tabsbox{overflow:hidden;border:1pxsolid#fff;}.tabsboxli{float:le
weixin_45108907·2020-08-04 07:28

Capacitor+Vue+Vant移动端打包总结

Capacitor+Vue+Vant移动端打包总结本笔记为打包Vue移动端AndroidApk打包步骤Capacitor与Vue项目结合基本配置自行百度/谷歌，这里是已集成配置好的项目。
DuebassLei·2020-08-03 19:52

vue移动端音乐----播放器组件的开发

多个组件都可以打开播放器，所以我们要控制这个播放器的数据，一定是全局的，所以我们把数据通过vuex来管理1.Vuex数据设计，很多歌单都可以打开播放器，打开歌单缩小时，会出页面最下方出现小型的播放器，所以播放器的数据一定是全局的，所以把这个数据通过vuex来管理在state.js中添加播放器的状态，并在common->config.js中添加播放器的播放模式（顺序，随机，循环）首先，在state.
qq_22317389·2020-08-01 14:20

vue移动端音乐----播放器组件的开发2

播放模式对应到vuex中state是一个mode字段exportconstplayMode={sequence:0,loop:1,random:2}import{playMode}from'common/js/config'mode:playMode.sequence,//默认为顺序播放getter中有一个state的映射exportconstmode=state=>state.mode所以在pl
qq_22317389·2020-08-01 14:20

一、Vue移动端项目前准备

1.更改index.html的属性index.html在public目录下2.解决各个显示终端样式的一致性reset.css@charset"utf-8";html{background-color:#fff;color:#000;font-size:12px}body,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,figure,form,fieldset,legend,input,
咸鱼最牛逼·2020-08-01 13:03

vue移动端app调用百度地图实现简单定位

最近做毕业设计做了一个手机定位的小功能，在此记录下来，我这个定在在电脑上进行测试是没有权限的，只有在手机上测试才能拿到具体的地理位置。第一步先是建立一个map.js文件，用来引入和暴露百度地图的组件，具体内容如下：exportfunctionMP(ak){returnnewPromise(function(resolve,reject){window.onload=function(){resol
guo一清·2020-08-01 12:15

Vue移动端框架的选择

文章目录Vue移动端前端框架的选择Vue移动端前端框架的选择vue后台项目web端一般都选用ElementUI，但是移动端的选择还是比较多的。
woflyoycm·2020-08-01 07:16

vue移动端浮动导航组件实现方式

内容importaxiosfrom"axios";import{isWxAli}from"@/common/common";import{linkBaseUrl,baseUrl,qyyxUrl}from"../../config/index";importvueCookiefrom"vue-cookie";exportdefault{props:{left:{type:String|Number,
陈小成·2020-08-01 06:29

vue移动端项目缓存问题实践

最近在做一个vue移动端项目，被缓存问题搞得头都大了，积累了一些经验，特此记录总结下，权当是最近项目问题的一个回顾吧！先描述下问题场景：A页面->B页面->C页面。
weixin_34228662·2020-08-01 04:46

关于vue移动端 ios 的兼容问题

最近在做微信公众号web页面遇到了以下的问题,关于ios，准确的说是safari浏览器的问题1.关于cookie携带的问题这方面可以查看微信公众平台的技术文档的微信网页开发的iOSWKWebview网页开发适配指南中找到答案文档中描述1\跨域存取Cookie问题说明：在访问一个页面A时，如果页面A引用了另一个页面B的资源（页面A和B为不同的域名），这时页面B就被认为是第三方页面。若在页面B中设置C
weixin_30667649·2020-08-01 03:06

如何实现一个简单的Vue移动端组件库

前段时间一直在研究组件库，终于在组内派上了用场。来给大家贡献一篇关于移动端组件库的相关知识。经验不是很多，如果有不合理的地方还请指出哦～～～回想一下，在你们公司或者你们小组是否有一个以上的项目需要你维护？你是否遇到了两个项目需要开发类似的功能的情况？那么你是怎么做的呢？有这么三种通俗的解决方案：COPY你可能会说我讲究速度，复制之前的组件到新项目中（如果之前没抽出组件那你可能得反思一下了），那么慢
若寒hqq·2020-08-01 02:49

vue移动端UI框架——Vant全局引入vs局部引入

全局引入1.在main.js中全局引入全部vant组件优点：可以在所有vue文件的template中定义所需组件缺点：打包发布时会增加包的大小，Vue的SPA首屏打开时本来就有些慢，同时不能在js中使用类似Toast功能的组件代码如下：//main.jsimportVantfrom'vant'import'vant/lib/vant-css/index.css'Vue.use(Vant)//log
朱天和·2020-08-01 02:48

vue移动端头部组件

import{NavBar}from'vant';exportdefault{name:'headerNav',components:{[NavBar.name]:NavBar,},props:{title:String,},methods:{onBack(){history.back();},userInfo(){this.$router.push({path:'/user'});}}}.van
前端打工仔小剑儿·2020-07-31 22:15
上一页 4 5 6 7 8 9 10 11 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他