移动端CSS适配方案：vw、flexible
何谓移动端适配？首先我们要有期望希望只一套 css，希望只有一套设计稿。因为多一套就会多出一些工作量，我们希望工作量小。希望高度还原设计稿，最好是设计稿转换成图片，图片在手机打开什么样子，网页就长什么样子。带着我们的期望，我们来看看移动端设备 ：ios（375*667、414*736 等） ...
2024-01-10
vue-cli引入手淘移动端适配解决方案
安装lib-flexible,使用命令行npm i lib-flexible --save引入lib-flexible，在项目入口文件main.js中引入lib-flexibleimport \'lib-flexible\'添加meta标签，在项目根目录的index.html中添加如下标签<meta name="viewport" content="width=device-width, initial-scale=1.0">如果仅仅是引入该方案的话，当然是满足不了需求，我们需要将px转换成rem...
2024-01-10
详解Vue-cli webpack移动端自动化构建rem问题
相信很多小伙伴想着自己的移动端项目能够自动转换为rem，这才符合前端的潮流，如果用自己手写或者编辑器插件来改动十分不方便还容易出错，我在网上找了很多的方法发现以下问题：1 照着老的视频教程去弄，发现node npm webpack px2rem的各种插件版本都不一样，根本没用2 网上的教程缺斤少俩，不...
2024-01-10flexible.js实现移动端rem适配方案
需要了解的基础知识：物理像素：物理像素又被称为设备像素，他是显示设备中一个最微小的物理部件。每个像素可以根据操作系统设置自己的颜色和亮度。正是这些设备像素的微小距离欺骗了我们肉眼看到的图像效果。设备独立像素：也称为密度无关像素，可以认为是计算机坐标系统中的一个点，...
2024-01-10
better-scroll 移动端滑动解决方案
中文文档：https://www.wenjiangs.com/docs/better-scrollBetterScroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。BetterScroll 是使用纯 JavaScript 实现的，这意味着它是无...
2024-01-10
Chii：移动端web页面调试工具
Chii 是一款与 weinre 类似的远程调试工具，主要是将 web inspector 替换为最新的 chrome devtools frontend。Demo请扫描二维码或在手机上直接访问：https://chii.liriliri.io/tests/demo.html打开 https://chii.liriliri.io/ 并点击 inspect 按钮开始调试示例页面。如果想在其它页面尝试，请在浏览器地址栏上输入以下代码。...
2024-01-10React Click事件未在移动设备上触发
我已经与React互动了几个月了，但是遇到了一些奇怪的事情。在移动设备上根本不会触发点击事件：http://jsbin.com/morarewelu/1/edit?html,js，输出http://jsbin.com/morarewelu/1/-在您的设备上检查您可以看到该点击从未触发。在iPhone上进行测试。这是预期的行为，还是仅仅是一个错误？回答：React的Github项目中有...
2024-01-10
vue项目在webpack2实现移动端字体自适配
使用vue开发移动端页面时，往往需要实现页面根据不同设备屏幕进行尺寸的适配，实现将px自动换算成rem单位，其实只需要安装下面的两个插件即可快速实现移动端适配问题。1 准备工作：a. 安装 px2rem-loader 插件：npm install px2rem-loader --save；b. 安装 lib-flexible 插件：npm install lib-flexible --save;2 插件的作...
2024-01-10
vue.js下移动端绑定click事件失效，pc端正常的问题
原因可能是我在项目中使用到了 better-scroll，默认它会阻止 touch 事件。所以在配置中需要加上 click: true 即可。例如：mounted () { this.scroll = new BScroll(this.$refs.wrapper, { mouseWheel: true, click: true, tap: true })}...
2024-01-10swiper4实现移动端导航切换
本文实例为大家分享了swiper4实现移动端导航切换的具体代码，供大家参考，具体内容如下首先导入<link rel="stylesheet" href="css/swiper.min.css" ><script src="js/jquery-1.10.1.min.js"></script><script src="js/swiper.min.js"></script>(这里用的是Swiper 4.0.7版本)在写入html内容<div id=header> <div class="head-top"> <h...
2024-01-10
vue自定义组件@click点击失效问题，附解决方案
问题描述：自定义组件在使无法，无法绑定原vue文件内的原生click事件原因分析：根据查询vue官方文档，得知click事件作用于组件内部，如果组件内没有写click事件，便会无响应。问题解决：1.参照官方文档，可以用@click.native=“click”解决2.可以用：将事件传递至组件内，也符合组件间的单向数据流...
2024-01-10
vue项目在webpack2实现移动端字体自适配功能
使用vue开发移动端页面时，往往需要实现页面根据不同设备屏幕进行尺寸的适配，实现将px自动换算成rem单位，其实只需要安装下面的两个插件即可快速实现移动端适配问题。1 准备工作：a. 安装 px2rem-loader 插件：npm install px2rem-loader --save；b. 安装 lib-flexible 插件：npm install lib-flexible --save;2 插件的作...
2024-01-10
在vue中使用lottie-web实现动画（移动端）
最近有一个需求里有个动效是这样的，一张图片从右边往左边无限循环滚动，然后图片上还有一个人骑着车放风筝，这样的一个场景。。我用css3实现出来有，每次动画执行完后循环的那一瞬间总是会有种切换，给人抖动的感觉。于是在跟ui商量之后，让她导出动画的json文件，然后我这边通过lottie-w...
2024-01-10
React 移动端判断用户划屏方向
功能展示：1.当用户触发划屏事件时2.判断其正确方向并alert出来3.总共上下左右四种所有代码：import React,{Component} from 'react';import './Stroke.css'class Stroke extends Component{ constructor(props){ super(props); this.state={ firstX:0, firstY : 0, ...
2024-01-10
移动端Vue2.x Picker的全局调用实现
目录什么是Picker组件Picker组件存在的问题解决思路选项解释解决方案目录划分描绘Picker容器创建Picker思路大纲Picker函数createshowhideremoveupdateChildrenComponent结束语什么是Picker组件对标PC端的Select标签, 移动端的选择框一般是在viewPort底部弹出Picker组件存在的问题Picker通常以fixed布局，但是我们在写Picker组...
2024-01-10详解基于Vue/React项目的移动端适配方案
前言本文的目标是通过下文介绍的适配方案，使用vue或react开发移动端及H5的时候，不需要再关心移动设备的大小，只需要按照固定设计稿的px值布局，提升开发效率。下文给出了本人分别使用create-react-app搭建的react（create-react-app）项目和使用vue-cli 2.x 搭建的vue项目中的 亲测可用 配置方案。px2rem或po...
2024-01-10
移动端Vue2.x Picker的全局调用实现
目录什么是Picker组件Picker组件存在的问题解决思路选项解释解决方案目录划分描绘Picker容器创建Picker思路大纲Picker函数createshowhideremoveupdateChildrenComponent结束语什么是Picker组件对标PC端的Select标签, 移动端的选择框一般是在viewPort底部弹出Picker组件存在的问题Picker通常以fixed布局，但是我们在写Picker组...
2024-01-10
Vue 移动端适配 amfe-flexible
"amfe-flexible": "^2.2.1","postcss-px2rem": "^0.3.0", 插件安装 配置px转remaddPostcssPlugins([require("postcss-px2rem")({ remUnit: 37.5 })]), remUnit是37.5，750px的设计稿就要除以2 来写px单位remUnit是75，750px的设计稿就是1:1来写px单位https://github.com/amfe/lib-flexible参考：https://blog.csdn....
2024-01-10UnexpectedRollbackException-完整的方案分析
我仅从Spring的文档和一些论坛上发来的关于该异常的信息，其中饱受摧残的开发人员粘贴了巨大的堆栈跟踪信息，但没有回复。从Spring的文档中：尝试提交事务导致意外回滚时抛出我想一劳永逸究竟是什么原因造成的？回滚发生在哪里？在App Server代码中还是在数据库中？是由于特定的基础异常...
2024-01-10基于rem的移动端响应式适配方案(详解)
视口在前一段时间，我曾经写过一篇关于viewport的文章。最近由于在接触移动端开发，对viewport有了新的理解。于是，打算重新写一篇文章，介绍移动端视口的相关概念。关于这篇文章说到的所有知识，本质上离不开以下代码<meta name="viewport" content="width=device-width, initial-scala=1, maximum-scale=1, minimum-scale=1...
2024-01-10基于Swiper实现移动端页面图片轮播效果
使用Swiper开发移动端页面，轻松实现图片的轮播。swiper1.主要包含模块：swiper：指滑动、切换（整个滑动对象，有时特指滑块释放后仍然正向移动直到贴合边缘的过程（过渡））container：指容器（swiper的容器里面包括滑动快（slide）的集合（wrapper）、分页器（pagination）、前进按钮等）wrapper：指包...
2024-01-10
vue移动端项目考虑要做pc端，有什么比较好的方案吗？
首先这是一个vue2的项目，已经上线运行较久了，是个移动端项目。然后现在调研要做pc端了，这个怎么做比较好就需要仔细斟酌了。首先几个点需要满足，因为原项目都是给到客户一个链接接入的，要么是嵌在企业微信、要么就飞书钉钉啥的客户那边的企业平台里，所以第一点要求就是提供给客户的链接始终是同一个，一个链接两端通用；然后第二个要求就是移动端和pc的逻辑是完全一样仅html交互不同，但不只是排版的不同，组件的...
2024-03-09
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
淘宝弹性布局lib-flexiblelib-flexible并不单独使用，而是搭配px2rem-loader一起做适配方案，目的是自动将css中的px转换成rem，在项目中还是按照设计稿写上对应的固定像素（px）就行。移动端适配的具体步骤第一步：安装插件 lib-flexiblenpm i lib-flexible --save-dev第二步：安装px2rem loadernpm install px2rem-loader --...
2024-01-10
分布式ID方案SnowFlake雪花算法分析
1、算法SnowFlake算法生成的数据组成结构如下：在java中用long类型标识，共64位（每部分用-分开）：0 - 0000000000 0000000000 0000000000 0000000000 0 - 00000 - 00000 - 0000000000 001位标识，0表示正数。41位时间戳，当前时间的毫秒减去开始时间的毫秒数。可用 (1L << 41) / (1000L * 60 * 60 * 24 * 365) = 69年。5位数据中心标识...
2024-01-10
Kickstarter替代方案：选择众筹平台
CNET @ Work：在发起众筹活动之前，值得探索Kickstarter与竞争对手之间的差异。随着技术越来越与业务的各个方面交织在一起，CNET @ Work可以帮助您-从生产者到员工少于五名的小型企业-开始。众筹是一种筹集资金并引起新的创业热潮的引人注目的方法，几乎是Kickstarter的代名词。虽然Kickstarter是一个主要...
2024-01-10
