vue移动端
CloudEmperor
The best time to plant a tree was ten years ago, followed by now.
展开
-
vue2.0项目中使用CSS3 animation动画在安卓手机上失效解决办法
vue2.0 + webpack做移动端项目,如果在项目中使用了CSS3 animation动画属性,会发现在ios上完全没问题,但是在安卓手机上依然失效,尽管把animation在五大浏览器各种兼容都写了还是不行,原因其实很简答。其实在 vue-cli脚手架package.json配置文件里面就有对浏览器的版本做css的前缀处理"browserslist": [ "> 1%", ...原创 2018-04-24 10:52:09 · 5163 阅读 · 0 评论 -
vue2.0和mintui-infiniteScroll 结合实现无线滚动加载
<template lang="html"> <div class="main"> <div class='list-box'> <ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading"原创 2018-09-12 09:55:47 · 2014 阅读 · 3 评论 -
vue.js 使用 fastclick解决移动端click事件300毫秒延迟方法
一.使用npm安装:npm install fastclick -S二.用法:安装完以后,可以在在main.js中全局引入,并绑定到body,全局生效。或者在单页面引入,只针对当前页面生效//引入import FastClick from 'fastclick'//初始化FastClick实例。在页面的DOM文档加载完成后FastClick.attach(document...原创 2018-07-16 10:58:21 · 9253 阅读 · 9 评论 -
vue2.0 keep-alive组件用法
在做vue移动端项目的时候,有些课程列表内容特别多,通过做上拉加载就可以分批加载,但是如果用户操作到四五页左右点进去看课程详情,返回会回到第一页数据。这样再次上拉加载找课程就比较麻烦。所有我们可以利用vue2.0提供了一个keep-alive组件用来缓存组件,避免多次加载相应的组件,减少性能消耗。定位用户当前操作的位置及数据。一.根据实际需求,将keep-alive组件开关定到相应页面,通常都是在...原创 2018-05-22 10:07:02 · 402 阅读 · 0 评论 -
vue2.0中针对字符串类型数据转换并输出方法,输入框宽度根据文字输入个数动态增加方法。
最近做的项目有一个考试作答功能,其中除过单选,多选,判断,简答,还有填空题。其他题操作都很简单,但是填空题就稍微麻烦一点,需要做处理。一.数据结构及最终显示效果:二.HTML代码(重点<i v-html="emptyOut(vo.title)" class="i_title"></i>):<div class="answer-content-body" v-for=".原创 2018-05-18 16:29:33 · 11970 阅读 · 2 评论 -
js获取图片原始比例并根据比例显示宽高
由于每个图片上传的时候比例大小都不一样,如果要在移动端展示,统一宽高效果会非常差。所以我们可以获取图片的原始宽高,然后以移动的比例展示,效果会非常好。以下就是实现方法: //获取图片原始宽高getNaturalImgSize: function(img, callback) { /** *img元素 *callback 回调函数 **/ va...原创 2018-05-17 15:25:04 · 8903 阅读 · 0 评论 -
vue2.0 结合HTML5原生Audio标签在移动端的使用实现方式,应用场景为钉钉微应用
在做vue2.0钉钉微应用项目,有需要播放音频的是需求,用阿里云sdk播放器不购买相关服务,音频有些播放不了。于是我就直接用HTML5原生的Audio标签自己写音频播放器。(业务需求:记录上次播放位置并从上次播放位置播放,观看进度不满100%不允许快进,满100%方可快进。)以下是整个业务代码:CSS部分:.audio-box{ height:100%; width:100%...原创 2018-04-25 11:38:52 · 3145 阅读 · 0 评论 -
vue和mintui-Loadmore结合实现上拉加载(移动端钉钉微应用)
最近做移动端钉钉微应用,使用Vue2.0+Webpack+Mint-UI实现上拉加载功能(下拉刷新也是同理,需要的可以看下Min-UI官方介绍)。下面是实现代码:HTML部分:<template lang="html"> <div class="video-content" :style="{'-webkit-overflow-scrolling': scrollMode}"...原创 2018-04-24 17:45:38 · 2454 阅读 · 3 评论 -
vue移动端日历组件封装
最近项目需求,需要做一个移动端的日历,类似于安卓原生日历。晚上找了很多成熟的插件都不是想要。偶然的机会发现某篇博客上有人写的有类似的,于是拿过来稍加改造,终于可以用了。在这里非常感谢这位博主,省去我很多的开发时间。附上此博客地址:https://blog.csdn.net/yin_you_yu/article/details/81126513 费话不多说,直接附上...原创 2019-05-21 16:35:45 · 10165 阅读 · 5 评论