app
浩星
95后的我从小鲜肉变成老腊肉了
展开
-
解决移动端300毫秒点击延迟问题-react/vue
前言: 在写移动端时,有个问题是300毫秒点击延迟问题,解决办法:引入fastclick步骤:1、下载插件cnpm install fastclick --save 2、vue-main.js react-index.js中注册import FastClick from 'fastclick' FastClick.attach(document.body);...原创 2020-09-14 16:31:54 · 334 阅读 · 0 评论 -
vue+二维码(带logo图片,可直接运行)
前言: 目前总结的二维码方法有两种,1、是 qrcode,2、是 qrcodejs2 ,这里说下qrcodejs2步骤:1、安装: cnpm install qrcodejs2 --save2、调用: import QRCode from 'qrcodejs2' js中调用 <div ref="qrCodeDiv" ></div> template中添加容...原创 2020-06-10 10:18:39 · 2928 阅读 · 3 评论 -
vue移动端禁止页面缩放
前言: 在某些特殊性情况下,我们并不需要让页面进行缩放,这里加个属性,让他禁止缩放代码: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">解释下参数: width - viewport的宽度 ...原创 2020-05-19 11:26:31 · 2228 阅读 · 0 评论 -
vue移动端中实现日历效果
前言: 在需要一个移动端的日历效果时,找了很多资料,这里分享下我找的两个资料,一个是使用了插件 vue-hash-calendar ,还有一个是自己封装的组件。我这边最终实现效果:一、vue-hash-calendar使用教程:github地址入口1、npm装插件cnpm i vue-hash-calendar2、main.js中配置// 在入口...原创 2020-05-08 16:07:10 · 5131 阅读 · 2 评论 -
vue+mintui+picker弹框选择器
前言: 实现app端使用mint-ui+popup+picker,弹框加选择效果实现效果图:实现步骤:一、安装mint-ui 详情查看二、查看具体步骤1、template部分 <div id="peopleChorseT" @click="openQuestionType"></div> <input type="t...原创 2019-11-20 18:56:35 · 2878 阅读 · 1 评论 -
vue+mint实现移动端开发
前言: 搭建一个移动端项目,可供我们选择的插件挺多的:mint-ui, muse-ui,antd的移动版vant-weapp等等,相对pc端来说,移动端功能都大同小异,这里简单说一下mint-ui实现步骤:一、项目中安装mint-uinpm install mint-ui 二、引入1、(全局)main.js中注册,全局加载的话,页面要使...原创 2019-11-20 18:48:56 · 866 阅读 · 0 评论 -
vue-cli3移动端实现上拉刷新+下拉加载
前言: 一直说项目完了记录一下,还是给忘记了,想起来了,就记录下,我们的移动端经常会用到一种功能就是下拉加载更多,上拉刷新页面的功能,这里主要说的是mint-ui的下拉加载,上拉刷新官网入口实现原理:获取数据是一个函数,这里通过给后台传当前页码和一页显示数据量(我们后台是按照分页那种写的)以及其他参数,然后获取数据,下拉刷新直接调用重新渲染方法,上拉加载会额外传...原创 2019-11-12 19:10:15 · 2721 阅读 · 0 评论 -
vue-cli3.0移动端使用的时间轴效果
前言: 我们使用element或者iview时会发现框架中就有时间轴的效果,但是我在mint-ui中是没有找到该效果,但是实际项目又是需要,所以引入了一个时间轴插件vue-cute-timeline,在这里记录一下实现效果:步骤:第一:下载插件npm i vue-cute-timeline第二:timeline.vue组件<template...原创 2019-11-01 21:16:34 · 2681 阅读 · 8 评论 -
vue-cli3.0移动端使用的轮播插件
前言: 因为移动端项目的需要,我在项目中经过考虑使用的mint-ui的框架,但是使用他提供的swiper插件以后,感觉坑太多,填不动的感觉,故经过查找并实际测试,发现一款使用挺好的swiper插件vue-swiper-component效果图:步骤:第一:安装插件npm i vue-swiper-component第二:封装好的组件:cswiper.v...原创 2019-11-01 21:07:34 · 2454 阅读 · 0 评论 -
vue-cli3.0搭建移动端项目的适配问题以及解决第三方组件样式受影响的问题
前言: 我们之前使用的解决移动端适配常用的方法是媒体查询+rem,em,这种适合小的项目,而且每次rem值计算也太麻烦了点,这里列出现在常用的另一种方法就是:lib-flexible和 postcss-px2rem-exclude来完美的解决适配问题。步骤一:安装lib-flexible - 适配插件,自动添加头部 meta1 安装npm install lib-...原创 2019-10-28 11:59:10 · 1106 阅读 · 2 评论