- vue移动端适配postcss-px-to-viewport
我是七月
在之前有一种流行已久的移动端适配方案,那就是rem,我想下面这两句代码,有不少老移动端都不会陌生:constdeviceWidth=document.documentElement.clientWidth||document.body.clientWidth;document.querySelector('html').style.fontSize=deviceWidth/7.5+'px';没错,
- vue移动端适配(px转vw)postcss-px-to-viewport配置 安装postcss-px-to-viewport
如饥似渴的人
npminstallpostcss-px-to-viewport//postcss.config.js文件module.exports={plugins:{'postcss-px-to-viewport':{unitToConvert:'px',//需要转换的单位,默认为"px"viewportWidth:375,//视窗的宽度,对应的是我们设计稿的宽度viewportHeight:1334,//
- 微信小程序封装vant 下拉框select 多选组件
IT博客技术分享
微信小程序微信小程序封装下拉框多选组件
老规矩先上效果图:本组件主要由小程序vantui组件,vant小程序ui网址:vant-weapp主要代码如下:先封装子组件:select-checkbox放在components文件夹里面select-checkbox.wxml:取消确定select-checkbox.wxss:/*pages/select-checkbox/select-checkbox.wxss*/.van-cell__va
- vue移动端适配问题
雨后晴阳
以前只知道移动端适配用rem,最近看到了一篇博客发现可以借助amfe-flexible插件在打包的时候将px改为rem,不过前提是ui设计是750*1334博客地址https://blog.csdn.net/weixin_43295397/article/details/82895116
- VUE -- 组件库
煸橙干儿~~
VUE基础vue.js前端javascript
目前较流行的组件库有:PC端:●ElementUI:ElementUI官网(饿了么前端团队开发,有vue2和vue3两种版本)●AntDesign:AntDesign官网(阿里团队开发)●ViewUI:ViewUI官网(也叫ivew)APP端:●Vant:vantUI官网●mint-ui:mint-ui官网(饿了么团队开发)
- vConsole 与 Vue中未定义变量而引发的Maximum call stack size exceeded异常问题
晓风伴月
开发问题#Vue开发问题vue.js前端javascript
一、问题描述前段时间有个前端小伙伴反馈在打包发布正式环境后调用VantUI的组件显示时,显示空白,并且在控制台看到一个Maximumcallstacksizeexceeded(超出最大调用堆栈大小),而本地开发环境正常:vconsole.min.js:10Uncaught(inpromise)RangeError:MaximumcallstacksizeexceededatArray.slice(
- react、vue移动端项目使用技术
崽崽的谷雨
React前端react.jsvue.js前端
前言:现在移动端项目越来越多,h5项目需求量也很大。所以有必要总结一下,h5移动段使用到的技术。一般h5可以在微信、内嵌app(webview)、小程序(webview)等等只要有浏览器环境都能运行。react、vue移动端使用到的技术:一、px2rem插件h5移动端首先需要做到适配各种手机屏幕,所以使用的单位肯定是相对单位。比如:rem原理就是rem是相对单位,给html加个基准值,然后其后代元
- vue移动端提交用户留言信息
冰淇wbq
屏幕快照2018-09-0909.53.38.png{{askData.nickname}}{{Date.format("yyyy-MM-ddhh:mm",askData.create_time*1000)}}问{{askData.title}}-->-->-->-->-->{{commentData}}1">{{commentData}}{{isInit?praiseCount:askData.
- 【记账本实战】03 集成 Vant UI 组件库
凌云(mlinyun)
人人都能做的Vue3记账本实战vue.js前端javascript
集成VantUI组件库目录集成VantUI组件库Vant介绍特性集成VantUI组件库通过npm安装VantUI按需引入组件1.安装插件2.配置插件3.使用组件适配移动端rem单位添加iconfont文字图标库Vant介绍Vant是一个轻量、可定制的移动端组件库,于2017年开源。目前Vant官方提供了Vue2版本、Vue3版本和微信小程序版本,并由社区团队维护React版本和支付宝小程序版本。特
- vue移动端项目中使用postcss-pxtorem进行适配方案
趁着年轻吃点苦
vue.jscss
首先,我们先使用vue-cli创建一个初始化的vue项目。vuecreatehello-world当项目创建好以后,我们在根目录下新建一个vue.config.js,想必大家也都懂这个文件是干什么的。既然是使用postcss-pxtorem对移动端项目进行适配,那肯定先要安装它,于是我们在电脑上敲下这行命令npminstallpostcss-pxtorem-Dpostcss-pxtorem有一个好
- Vue移动端rotate强制横屏
lMoonRed
前端vue.js
强制横屏#screen{position:fixed;width:100%;height:100%;padding:0;margin:0;background-color:rgb(228,180,180);overflow:hidden}@mediascreenand(orientation:portrait){/*竖屏*/#main{position:absolute;width:100vh;h
- vant-ui 使用
kjs--
前端vantvue.js
vant-ui使用记录近期所使用vantui组件的过程使用过程中用到的vant文档https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart#tong-guo-npm-an-zhuang一.vant-ui的团队Vant开源的移动端组件库是由有赞前端团队开发的,于2017年开源。有赞前端团队,几乎所有的微信用户他关注的公众号当中,就会有一个页面是由有赞
- vue3 uniapp + vant ui 实现上传图片后再次点击上传功能
查查茶茶丸
vantUI前端
效果代码起初想用vantui的chooseFile函数来实现重新上传的文件选择,用了之后没起用。。。改为用uni.chooseImage来实现。jsconstuploadImg=ref(null)consthandleReUpdate=()=>{uploadMenu.value=false//uploadImg.value.chooseFile()console.log(uploadList.va
- 计算机毕业设计 | SpringBoot+vue移动端音乐网站 音乐播放器(附源码)
说书客啊
前后端分离源码分享课程设计springboot毕业设计javavueintellijidea后端
1,项目背景随着计算机技术的发展,网络技术对我们生活和工作显得越来越重要,特别是现在信息高度发达的今天,人们对最新信息的需求和发布迫切的需要及时性。为了满足不同人们对网络需求,各种特色,各种主题的网站也在不断增加。为了满足音乐爱好者,明星崇拜者,各种专辑痴迷着的需求,一批以音乐为主题的网站也应运而生。由于以往的静态网页存在单调,维护任务大,缺乏和用户的交互,随着计算机软件知识的推广,动态网页正在走
- vue移动端实现模糊搜索关键字高亮效果
人生的旅行
搜索的关键词变高亮1.使用v-html指令绑定属性2.使用正则3.用正则替换关键字话不多说直接上代码html.pngjs.png效果图效果图.png
- 常用的几款Vue移动端UI推荐
草率小猿
vue前端vue.jsui前端
收录几个常用的移动端UI框架,不定时更新。1.Ionic/IonicFramework官网地址|Github地址AnopensourcemobileUItoolkitforbuildingmodern,highqualitycross-platformmobileappsfromasinglecodebaseinReact.Vue.Angular.一款开源的移动端UI工具包,用于开发现代的、高性能
- 微信小程序mpvue入坑(5)之组件封装---新增源码地址
wocwin
vue小程序组件化mpvue微信小程序vant-weapp组件封装
微信小程序mpvue入坑(1)之技术对比选型微信小程序mpvue入坑(2)之初始化及引入vantUI微信小程序mpvue入坑(3)之Promise封装wx.request及整合Api微信小程序mpvue入坑(4)之vuex使用整体项目结构├──src//源文件|├──api//接口目录||└──apiPath//具体接口地址||└──index.js//接口路径封装│├──components//
- 微信小程序mpvue入坑(1)之技术对比选型——新增源码地址
wocwin
小程序vue微信小程序mpvuevant-weapp
微信小程序mpvue入坑(2)之初始化及引入vantUI微信小程序mpvue入坑(3)之Promise封装wx.request及整合Api微信小程序mpvue入坑(4)之vuex使用微信小程序mpvue入坑(5)之组件封装小程序技术栈对比WepympVue/uni-appTaro原生语法风格类Vue规范Vue规范React规范,支持JSX小程序开发规范多端复用H5、微信、支付宝H5、小程序(uni
- 微信小程序mpvue入坑(3)之Promise封装wx.request及整合Api----新增源码地址
wocwin
vue小程序微信小程序mpvuepromise封装apivant-weapp
微信小程序mpvue入坑(1)之技术对比选型微信小程序mpvue入坑(2)之初始化及引入vantUI微信小程序mpvue入坑(4)之vuex使用微信小程序mpvue入坑(5)之组件封装1、在src下utils新建一个promiseRequest.js文件(用es6-promise封装wx.request)代码如下:importstorefrom'@/store'import{Toast}from'
- 微信小程序mpvue入坑(4)之vuex使用---新增源码地址
wocwin
小程序微信小程序mpvuevuexvant-weapppersistedstate
微信小程序mpvue入坑(4)之vuex使用微信小程序mpvue入坑(1)之技术对比选型微信小程序mpvue入坑(2)之初始化及引入vantUI微信小程序mpvue入坑(3)之Promise封装wx.request及整合Api微信小程序mpvue入坑(5)之组件封装1、首先安装vuexnpminstallvuex-S2、在src下新建一个store文件夹新建index.js文件代码如下import
- vue移动端绑定@click事件失效问题
丶End
vue移动端绑定click事件失效问题原因可能是你使用了better-scroll,默认它会阻止touch事件。所以在配置中需要加上click:true例:mounted(){this.scroll=newBscroll(this.$refs.wrapper,{mouseWheel:true,click:true,tap:true})}
- Vue移动端适配并解决rem影响第三方ui库样式问题
依旧大白丶
移动端移动端适配vue.js前端javascript
Vue移动端适配并解决rem影响第三方ui库样式问题一、项目中安装lib-flexiblenpminstalllib-flexible--save二、在项目的入口main.js文件中引入lib-flexibleimport'lib-flexible'三、安装postcss-px2rem-excludenpminstallpostcss-px2rem-exclude--save四、配置postcss
- 如何在Vue项目中使用vw实现移动端适配
小边_leo
Vue项目中使用vw实现移动端适配我们在vue移动端项目中的适配一般都采用rem,但是rem也不是能兼容所有的终端。随着viewport单位越来越受到众多浏览器的支持,下面将简单介绍怎么实现vw的兼容问题,用vw代替rem当我们采用vue-cli脚手架搭建完项目,安装所有依赖包之后,用npmrundev启动后,在根目录有一个.postcssrc.js文件,文件结构如下:imagevue-cli默认
- vue 移动端点击延迟_vue移动端项目-click事件在浏览器中延迟300ms的解决方法
Payton Sun
vue移动端点击延迟
在H5页面移动端项目当中,click事件在浏览器中会有300ms的延迟,这个也是移动端开发中常见的问题之一,今天就这个问题说一说解决方法解决click点击事件300ms延迟—fastClickfastClick的思路就是利用touch来模拟tap(触碰),如果认为是一次有效的tap,则在touchend时立即模拟一个click事件,分发到事件源(相当于主动触发一次click),同时阻止掉浏览器30
- uniapp 多端兼容开发遇到的问题总结(三)
NurTuam-何永杰
uni-appvue小程序vue.jsjavascriptuni-app
昨天作者在Uniapp的插件市场里无意找到了一个很适合自己业务场景的UI框架——uViewUI,为啥说适合呢,大家有读过我前几篇文章的人都应该看出,比较出名的移动端UI库,像VantUI、ThorUI这些在某些平台测试时会有各种各样的问题,其官方文档也指出有些组件只对某些平台有效,解决办法也只能按需引入自己需要的对应该平台的组件,最终项目就会thorUI和VantUI掺杂在一起,这样对后期项目维护
- Vue移动端左右滑动效果实现方法
daozun
1.最近得到一个新需求,需要在Vue项目的移动端页面上加上左右滑动效果,在网上查阅资料,最终锁定了vue-touch2.下载vue-touch(https://github.com/vuejs/vue-touch/tree/next)注意:如果Vue是2.x的版本的话,一定要下next分支上的。3.使用:
[email protected]在main.js中引入
- vue移动端html2canvas实现长按截图
今天也是爱大大的一天吖
vue.jshtml2canvas
1.安装html2canvasnpminstallhtml2canvas2.在需要生成海报的页面引入importhtml2canvasfrom'html2canvas';html//存放生成的图片//要转化为图片的dom结构//不能用background-image改成img标签装背景图js方法方法一//html转换为img图片htmlToimg(){letdom=document.getElem
- Vue中使用VantUI的list组件下拉刷新及上拉加载功能
前端-文龙刚
Vuevue.jslistwindows
templateJSdata(){return{list:[],loading:false,finished:false,refreshing:false,page:1};},created(){this.getRechargeLog()},methods:{asyncgetRechargeLog(isRefresh){const{data:{list}}=awaitrechargeLog(thi
- 【Vue】vue小工具,vue移动端h5页面使用小齿轮控制台,移动端项目打开控制台
阿民不加班
Vuevue插件实战案例vue.jsjavascript前端
前言没啥好说的,插件叫eruda提示:以下是本篇文章正文内容,下面案例可供参考一、原生用法这是我推荐的erudaeruda.init();还有另外一个叫VConsole//初始化引入的调试组件varvConsole=newVConsole();console.log('控制台打印信息最新');二、vue用法1.引入库npminstalleruda@^3.0.0--save2.编写环境配置本地为tr
- 记录:vue移动端富文本内容替换自定义视频全屏实现
相逢太短,莫等茶凉
vue.js音视频前端
使用vue3import{showImagePreview}from'vant';import{UtilService}from'@common/services/util.service';import'quill/dist/quill.core.css';import'quill/dist/quill.snow.css';import'quill/dist/quill.bubble.css';
- java观察者模式
3213213333332132
java设计模式游戏观察者模式
观察者模式——顾名思义,就是一个对象观察另一个对象,当被观察的对象发生变化时,观察者也会跟着变化。
在日常中,我们配java环境变量时,设置一个JAVAHOME变量,这就是被观察者,使用了JAVAHOME变量的对象都是观察者,一旦JAVAHOME的路径改动,其他的也会跟着改动。
这样的例子很多,我想用小时候玩的老鹰捉小鸡游戏来简单的描绘观察者模式。
老鹰会变成观察者,母鸡和小鸡是
- TFS RESTful API 模拟上传测试
ronin47
TFS RESTful API 模拟上传测试。
细节参看这里:https://github.com/alibaba/nginx-tfs/blob/master/TFS_RESTful_API.markdown
模拟POST上传一个图片:
curl --data-binary @/opt/tfs.png http
- PHP常用设计模式单例, 工厂, 观察者, 责任链, 装饰, 策略,适配,桥接模式
dcj3sjt126com
设计模式PHP
// 多态, 在JAVA中是这样用的, 其实在PHP当中可以自然消除, 因为参数是动态的, 你传什么过来都可以, 不限制类型, 直接调用类的方法
abstract class Tiger {
public abstract function climb();
}
class XTiger extends Tiger {
public function climb()
- hibernate
171815164
Hibernate
main,save
Configuration conf =new Configuration().configure();
SessionFactory sf=conf.buildSessionFactory();
Session sess=sf.openSession();
Transaction tx=sess.beginTransaction();
News a=new
- Ant实例分析
g21121
ant
下面是一个Ant构建文件的实例,通过这个实例我们可以很清楚的理顺构建一个项目的顺序及依赖关系,从而编写出更加合理的构建文件。
下面是build.xml的代码:
<?xml version="1
- [简单]工作记录_接口返回405原因
53873039oycg
工作
最近调接口时候一直报错,错误信息是:
responseCode:405
responseMsg:Method Not Allowed
接口请求方式Post.
- 关于java.lang.ClassNotFoundException 和 java.lang.NoClassDefFoundError 的区别
程序员是怎么炼成的
真正完成类的加载工作是通过调用 defineClass来实现的;
而启动类的加载过程是通过调用 loadClass来实现的;
就是类加载器分为加载和定义
protected Class<?> findClass(String name) throws ClassNotFoundExcept
- JDBC学习笔记-JDBC详细的操作流程
aijuans
jdbc
所有的JDBC应用程序都具有下面的基本流程: 1、加载数据库驱动并建立到数据库的连接。 2、执行SQL语句。 3、处理结果。 4、从数据库断开连接释放资源。
下面我们就来仔细看一看每一个步骤:
其实按照上面所说每个阶段都可得单独拿出来写成一个独立的类方法文件。共别的应用来调用。
1、加载数据库驱动并建立到数据库的连接:
Html代码
St
- rome创建rss
antonyup_2006
tomcatcmsxmlstrutsOpera
引用
1.RSS标准
RSS标准比较混乱,主要有以下3个系列
RSS 0.9x / 2.0 : RSS技术诞生于1999年的网景公司(Netscape),其发布了一个0.9版本的规范。2001年,RSS技术标准的发展工作被Userland Software公司的戴夫 温那(Dave Winer)所接手。陆续发布了0.9x的系列版本。当W3C小组发布RSS 1.0后,Dave W
- html表格和表单基础
百合不是茶
html表格表单meta锚点
第一次用html来写东西,感觉压力山大,每次看见别人发的都是比较牛逼的 再看看自己什么都还不会,
html是一种标记语言,其实很简单都是固定的格式
_----------------------------------------表格和表单
表格是html的重要组成部分,表格用在body里面的
主要用法如下;
<table>
&
- ibatis如何传入完整的sql语句
bijian1013
javasqlibatis
ibatis如何传入完整的sql语句?进一步说,String str ="select * from test_table",我想把str传入ibatis中执行,是传递整条sql语句。
解决办法:
<
- 精通Oracle10编程SQL(14)开发动态SQL
bijian1013
oracle数据库plsql
/*
*开发动态SQL
*/
--使用EXECUTE IMMEDIATE处理DDL操作
CREATE OR REPLACE PROCEDURE drop_table(table_name varchar2)
is
sql_statement varchar2(100);
begin
sql_statement:='DROP TABLE '||table_name;
- 【Linux命令】Linux工作中常用命令
bit1129
linux命令
不断的总结工作中常用的Linux命令
1.查看端口被哪个进程占用
通过这个命令可以得到占用8085端口的进程号,然后通过ps -ef|grep 进程号得到进程的详细信息
netstat -anp | grep 8085
察看进程ID对应的进程占用的端口号
netstat -anp | grep 进程ID
&
- 优秀网站和文档收集
白糖_
网站
集成 Flex, Spring, Hibernate 构建应用程序
性能测试工具-JMeter
Hmtl5-IOCN网站
Oracle精简版教程网站
鸟哥的linux私房菜
Jetty中文文档
50个jquery必备代码片段
swfobject.js检测flash版本号工具
- angular.extend
boyitech
AngularJSangular.extendAngularJS API
angular.extend 复制src对象中的属性去dst对象中. 支持多个src对象. 如果你不想改变一个对象,你可以把dst设为空对象{}: var object = angular.extend({}, object1, object2). 注意: angular.extend不支持递归复制. 使用方法: angular.extend(dst, src); 参数:
- java-谷歌面试题-设计方便提取中数的数据结构
bylijinnan
java
网上找了一下这道题的解答,但都是提供思路,没有提供具体实现。其中使用大小堆这个思路看似简单,但实现起来要考虑很多。
以下分别用排序数组和大小堆来实现。
使用大小堆:
import java.util.Arrays;
public class MedianInHeap {
/**
* 题目:设计方便提取中数的数据结构
* 设计一个数据结构,其中包含两个函数,1.插
- ajaxFileUpload 针对 ie jquery 1.7+不能使用问题修复版本
Chen.H
ajaxFileUploadie6ie7ie8ie9
jQuery.extend({
handleError: function( s, xhr, status, e ) {
// If a local callback was specified, fire it
if ( s.error ) {
s.error.call( s.context || s, xhr, status, e );
}
- [机器人制造原则]机器人的电池和存储器必须可以替换
comsci
制造
机器人的身体随时随地可能被外来力量所破坏,但是如果机器人的存储器和电池可以更换,那么这个机器人的思维和记忆力就可以保存下来,即使身体受到伤害,在把存储器取下来安装到一个新的身体上之后,原有的性格和能力都可以继续维持.....
另外,如果一
- Oracle Multitable INSERT 的用法
daizj
oracle
转载Oracle笔记-Multitable INSERT 的用法
http://blog.chinaunix.net/uid-8504518-id-3310531.html
一、Insert基础用法
语法:
Insert Into 表名 (字段1,字段2,字段3...)
Values (值1,
- 专访黑客历史学家George Dyson
datamachine
on
20世纪最具威力的两项发明——核弹和计算机出自同一时代、同一群年青人。可是,与大名鼎鼎的曼哈顿计划(第二次世界大战中美国原子弹研究计划)相 比,计算机的起源显得默默无闻。出身计算机世家的历史学家George Dyson在其新书《图灵大教堂》(Turing’s Cathedral)中讲述了阿兰·图灵、约翰·冯·诺依曼等一帮子天才小子创造计算机及预见计算机未来
- 小学6年级英语单词背诵第一课
dcj3sjt126com
englishword
always 总是
rice 水稻,米饭
before 在...之前
live 生活,居住
usual 通常的
early 早的
begin 开始
month 月份
year 年
last 最后的
east 东方的
high 高的
far 远的
window 窗户
world 世界
than 比...更
- 在线IT教育和在线IT高端教育
dcj3sjt126com
教育
codecademy
http://www.codecademy.com codeschool
https://www.codeschool.com teamtreehouse
http://teamtreehouse.com lynda
http://www.lynda.com/ Coursera
https://www.coursera.
- Struts2 xml校验框架所定义的校验文件
蕃薯耀
Struts2 xml校验Struts2 xml校验框架Struts2校验
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
蕃薯耀 2015年7月11日 15:54:59 星期六
http://fa
- mac下安装rar和unrar命令
hanqunfeng
mac
1.下载:http://www.rarlab.com/download.htm 选择
RAR 5.21 for Mac OS X 2.解压下载后的文件 tar -zxvf rarosx-5.2.1.tar 3.cd rar sudo install -c -o $USER unrar /bin #输入当前用户登录密码 sudo install -c -o $USER rar
- 三种将list转换为map的方法
jackyrong
list
在本文中,介绍三种将list转换为map的方法:
1) 传统方法
假设有某个类如下
class Movie {
private Integer rank;
private String description;
public Movie(Integer rank, String des
- 年轻程序员需要学习的5大经验
lampcy
工作PHP程序员
在过去的7年半时间里,我带过的软件实习生超过一打,也看到过数以百计的学生和毕业生的档案。我发现很多事情他们都需要学习。或许你会说,我说的不就是某种特定的技术、算法、数学,或者其他特定形式的知识吗?没错,这的确是需要学习的,但却并不是最重要的事情。他们需要学习的最重要的东西是“自我规范”。这些规范就是:尽可能地写出最简洁的代码;如果代码后期会因为改动而变得凌乱不堪就得重构;尽量删除没用的代码,并添加
- 评“女孩遭野蛮引产致终身不育 60万赔偿款1分未得”医腐深入骨髓
nannan408
先来看南方网的一则报道:
再正常不过的结婚、生子,对于29岁的郑畅来说,却是一个永远也无法实现的梦想。从2010年到2015年,从24岁到29岁,一张张新旧不一的诊断书记录了她病情的同时,也清晰地记下了她人生的悲哀。
粗暴手术让人发寒
2010年7月,在酒店做服务员的郑畅发现自己怀孕了,可男朋友却联系不上。在没有和家人商量的情况下,她决定堕胎。
12月5日,
- 使用jQuery为input输入框绑定回车键事件 VS 为a标签绑定click事件
Everyday都不同
jspinput回车键绑定clickenter
假设如题所示的事件为同一个,必须先把该js函数抽离出来,该函数定义了监听的处理:
function search() {
//监听函数略......
}
为input框绑定回车事件,当用户在文本框中输入搜索关键字时,按回车键,即可触发search():
//回车绑定
$(".search").keydown(fun
- EXT学习记录
tntxia
ext
1. 准备
(1) 官网:http://www.sencha.com/
里面有源代码和API文档下载。
EXT的域名已经从www.extjs.com改成了www.sencha.com ,但extjs这个域名会自动转到sencha上。
(2)帮助文档:
想要查看EXT的官方文档的话,可以去这里h
- mybatis3的mapper文件报Referenced file contains errors
xingguangsixian
mybatis
最近使用mybatis.3.1.0时无意中碰到一个问题:
The errors below were detected when validating the file "mybatis-3-mapper.dtd" via the file "account-mapper.xml". In most cases these errors can be d