大家好,由于最近从事的是微信公众号和APP内嵌 H5开发,避免不了开发一些和native相同的操作功能,就如接下来说的 仿IOS滚轮选择器. 先来个截图: 接下来具体介绍如何实现的.能力有限避免不了错误请指出,有问题QQ邮箱 1766597067@qq.com 先来屡一下需求: 1.移动端用户手上下滑动,内容上下移动,用户手离开数字按照惯性移动一段距离. 2.当停止移动后,选中一个文字并且文字高亮,上面的值会变成你选中的文字. 3.可以连续滚动. 好了我们知道需求了,开始写吧. 写之前,想来一句

Vue PC端框架 1. Element 中文文档:http://element-cn.eleme.io/#/zh-CN github地址:https://github.com/ElemeFE/element 2. iView 中文文档:https://www.iviewui.com/ github地址:https://github.com/iview/iview 3. vue-element-admin 中文文档:https://panjiachen.github.io/vue-element

背景 在一pc端的web项目里,由于某些特性需要由动态语言处理,所以只在有需要使用vue来处理数据的页面,直接引入vue.js来处理.由于刚开始并没有打算使用前端来渲染数据和处理交互,所以使用了一些非vue的ui和插件,导致后来冲突坑点不少.非vue模块化下使用vue,虽然不能import vue文件,使用组件方式也有点恶心,但处理一些事情还是不错的. 使用formdata提交表单数据 先上代码 var that = this; var myForm = document.getElementB

在vue2 中用脚手架建立的项目,后端提供接口获取数据.在公司做第一个项目的时候不清楚公司里的对接流程,结果后续代码被一个接口整的乱七八糟,这个接口是获取用户信息的接口——'usre/info'. 如果用户登录了以后,很多(几乎全部)页面都要用到userinfo,难道每个页面都要写个 getUserInfo 方法去获取?好烦的好吧,如果你不觉得烦,那不用往下看了... 再写完第一个项目后,我在反思这个userinfo数据要怎么处理好,下边处理的关键代码: index.html 中引入的 publ

1.vue中通过路由跳转的三种方式      https://blog.csdn.net/qq_40072782/article/details/82533477 2.数组解构,对象解构:https://www.cnblogs.com/langwo/p/7259191.html 3.关于如何查找一些好的自学的项目 3.1 输入网址:https://github.com/ 3.2 在搜索框中输入例如 vue 豆瓣电影 经过回车,即可以找到很多项目 3.3一个比较经典的: https://githu

*手上的项目刚刚搞完了,记录一下项目中遇到的问题,留做笔记: 需求: 在项目中,需要展示用户上传的一些图片,我从后台接口拿到图片url后放在页面上展示,因为被图片我设置了宽度限制(150px),所以图片被缩放了,需求说加一个图片预览的功能 参考文章: https://blog.csdn.net/yp090416/article/details/81486581(vue点击图片放大预览图片支持旋转等) 准备工作: (1)搜索插件:https://github.com/mirari/v-viewer

项目需要:在添加新类别的弹框中,要在输入框中输入多条描述信息,不同的描述信息要换行输入,输入后点击确定传给后端,接口返回成功后点击查看刚添加的新类别时,描述框中展现多条换行的描述信息也要跟填写时一样(即不同的描述换行展示),他们说用富文本比较方便,所以找到了这个插件,刚好满足我想要的功能效果,写下来当笔记. 参考文章:Vue基于vue-quill-editor富文本编辑器使用心得 安装插件: npm install vue-quill-editor 然后是在需要的组件引入,当然也可以在main.

使用场景:有适配pc端改为适配pc端和移动端,使用2套css 代码实现App.vue created: function () { if(document.documentElement.clientWidth > 640){ require('./style/index.scss'); this.plaform = 'pc'; }else{ require('./style/mobile.scss'); this.plaform = 'mobile'; } 注意: 为2套css分别指定不同的父

1, 首先判断设备:在main.js里面写 // vue原型挂载 - 是否PC端 if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) { Vue.prototype.$pc = false hostConfig.vconsole && new VConsole() } else { Vue.prototype.$pc = true let winWidth = document.documentEle

https://github.com/onlyhom/mobileSelect.js/blob/master/docs/README-CN.md mobileSelect.js 一款多功能的移动端滚动选择器,支持单选到多选.支持多级级联.提供自定义回调函数.提供update函数二次渲染.重定位函数.兼容pc端拖拽等等.. [English documents] 特性 原生js移动端选择控件,不依赖任何库 可传入普通数组或者json数组 可根据传入的参数长度,自动渲染出对应的列数,支持单项到多项选

常看到各种app应用中使用自定义的键盘,本例子中使用vue2实现个简单的键盘,支持在移动端和PC端使用,欢迎点赞,h5 ios输入框与键盘 兼容性优化 实现效果: Keyboard.vue <template> <div class="keyboard" v-show="showKeyboard" v-clickoutside="closeModal"> <p v-for="keys in keyList&

lib-flexible + px2rem Loader lib-flexible 阿里伸缩布局方案 px2rem-loader:px转rem: 依赖 首先需要安装 vue-cli 脚手架,这里我安装的是 cli3. 项目初始化完成后,在项目目录中安装 lib-flexible 和 px2rem-loader. npm install lib-flexible --save-dev npm i postcss-px2rem --save 接着在项目入口文件 main.js 中引入 lib-fle

原因:pc端微信浏览器不支持es6,而代码中使用了 let . 解决:将 let 改为 var(若使用 es6 语法比较多,可以进行转换,将 es6 语法转为 es5) 参考博客: 1,h5微信页面在手机微信端和微信web开发者工具中都能正常显示,但是在pc端微信浏览器上打不开(显示空白) - Alonge的博客 - CSDN博客https://blog.csdn.net/m0_37543652/article/details/83059696

进入正题 1. PC端调用摄像头拍照上传base64格式到后台,这个没什么花里胡哨的骚操作,直接看代码 (canvas + video) <template> <div> <!--开启摄像头--> <img @click="callCamera" :src="headImgSrc" alt="摄像头"> <!--canvas截取流--> <canvas "><

思路:1.先做出一个上传的图片的上传区 <!-- 上传区 --> <label for="fileUp"> <div class="upBorder"> <img src="../assets/add.png" alt="" /> <input ref="fileUp" type="file" id="fileUp"

效果如下 使得大屏不论在什么宽高比例依然能展示全部数据 安装 npm install -S postcss-pxtorem rem配置思路 原先的rem函数是能解决大部分的问题的,如果展示不全,也可以用滚动条. 但是大屏展示又不能使用滚动条,又必须展示全部的内容,这个时候就需要改变原来的计算方式,需要根据屏幕的实际高度来计算对应的屏幕宽度 1. 配置rem.js文件 rem.js可以放在src文件夹下,我是放在src下的utils文件夹中 初始的rem配置 // 设置 rem 函数 functi

学习要点: 1.准备工作 2.创建项目 3.网站结构 4.CSS选择器 5.完成导航 主讲教师:李炎恢 本章主要开始使用学习用HTML5和CSS3来构建Web页面,第一个项目采用PC端 固定布局来实现. 一．准备工作 1.为了达到最低效果,第一个项目将采用1440x900的分辨率录制:因为,1024根本无法容纳最低宽度的页面:页面采用1280的最低宽度设计,去掉滚动条为1263像素. 2.第一个项目是PC端的固定布局,会采用像素(px)单位. 3.项目素材图片,是课外独立设计好的,课程不会去设计

<script> (function () { var navUA = navigator.userAgent; var defIncludeStr = "iPhone|Android|iPod|BlackBerry|"; var defExcludeStr = ""; var redirectUrl = ""; var metas = document.getElementsByTagName("meta");

最近新调到一个项目,由原来的pc端,调到移动端,一切都是那么的不一样,在得知即将调到移动端的时候,听说我们的技术要用到vue,Aladdin,还有es6,有点懵... 我做了以下准备工作: 1,买了本阮老师的es6入门 2,下了vue学习视频,招朋友要各种vue的资料,然后加各种vue技术qq群 3,寻找对应项目的网站,嘿嘿,找到了饿了么的官网 4,准备mac本 5,招同时要对应项目的代码 6,发现原来的编辑器不能用了(webstorm),换编辑器 7,.... 到了新项目组,发现自己准备的还是

跨域解决方案 config/dev.env.js 'use strict' const merge = require('webpack-merge') const prodEnv = require('./prod.env') module.exports = merge(prodEnv, { NODE_ENV: '"development"', API_ROOT: '"/api"' }) config/prod.env.js ,生产的服务器(你线上运行时的服务器

vue判断是pc端还是移动端分别进入不同的页面 判断移动端代码如下: function IsPC(){ var userAgentInfo = navigator.userAgent; var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"); var flag =