分类：移动端

2021
11-09

webpack的移动端适配方案小结

目录remvw适配第三方UI框架结语在移动端开发的过程中，一个最常见的问题就是适配不同的屏幕宽度。目前比较常见的适配方案有rem和vw，它们都是css中的相对单位。remW3C对rem的定义是font-sizeoftherootelement，它是一个只相对于浏览器的根元素（HTML元素）的font-size的来确定的单位，也就是说对于不同宽度的机型，我们只需要计算出对应的根元素的字体大小，用同样的css代码可以实现等比适配。考虑最简单的情况：html代码片段... 继续阅读 >
2021
01-10

JavaScript Html实现移动端红包雨功能页面

JavaScript Html实现移动端红包雨功能页面 本文实例为大家分享了Html实现移动端红包雨功能页面的具体代码，供大家参考，具体内容如下实现效果如下：具体代码如下html部分：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>红包雨</title><linkrel="stylesheet"href="./css/demo.css"><linkrel="stylesheet"hr... 继续阅读 >
2020
12-22

基于javascript实现移动端轮播图效果

基于javascript实现移动端轮播图效果 本文实例为大家分享了js实现移动端轮播图效果的具体代码，供大家参考，具体内容如下插件使用：1.zepto.js2.touch.js实现效果html部分：<!--结构--><!--li*6>a[href=#]>img[src=./images/$.jpg]--><divclass="box"><ul><!--为了无缝连接，我们在图片这里前后增加了2个图片--><li><ahref="#"><imgsrc="./images/6.jpg"alt=""></a></li><li><ahref="#"><imgsrc="./images/1.jpg"alt=""></a>... 继续阅读 >
2020
11-13

如何基于viewport vm适配移动端页面

前言作为一个小前端，经常要和H5打交道，这就面临着不同终端的适配问题。Flexible方案通过Hack手段来根据设备的dpr值相应改变<meta>标签中viewport的值，给我更贴切的体会就是通过js脚本根据设备的dpr和设计图的宽度来计算出html的font-size值，然后就运用rem单位开发可以等比例缩放的H5页面。但是！Flexible已经完成了他自身的历史使命，我们可以放下Flexible，拥抱新的变化。做到适配要解决的问题在移动端布局，我们需要面对两... 继续阅读 >
2020
10-13

移动端JS实现拖拽两种方法解析

移动端JS实现拖拽两种方法解析 移动端的项目经常会引入手势库来实现拖拽不过如果只是一两个页面用到拖拽，再引入一个手势库就很不划算最近的项目中就有这么一个需求：因为就这一个地方需要拖拽，所以我就没有引入第三方库移动端的拖拽有两种主流的实现方案：1.将元素设置为固定定位，然后在拖拽的时候修改其定位，实现拖拽的效果；2.使用transform中的平移translate属性实现拖拽。方案一：固定定位fixed这种方案的核心就是给元素添加固定定位position:fixe... 继续阅读 >
2020
10-13

vue实现移动端返回顶部

本文实例为大家分享了vue实现移动端返回顶部的具体代码，供大家参考，具体内容如下HTML:<template><divclass="home"><divv-for="ysin100":key="ys"><p>1</p></div><div@click="back"class="back1"v-show="isShow">▲</div></div></template>JS:<script>exportdefault{data(){return{isShow:true};},handleScroll(){//handleScroll和methods是同级if(window.pageYOffset>300){//... 继续阅读 >
2020
10-10

如何阻止移动端浏览器点击图片浏览

在一些移动端浏览器上，如果点击图片，会产生一个浏览图片的行为。QQ没有这种默认行为，但是UC浏览器有。所以为了达到一致的效果，这种默认的浏览行为是需要被禁止的。下面介绍几种方法：1.在img元素上添加onclick="returnfalse"<imgsrc="a.png"onclick="returnfalse"/>2.图片用背景图的方式插入background:url(a.png)norepeatcenter;3.使用js事件阻止默认行为的方法，这里需要注意哦！varimg=document.getElementById(... 继续阅读 >
2020
10-09

Vue-cli 移动端布局和动画使用详解

vue-cli（重点）vue-cli是用来管理vue项目的工具，可以使用vue-cli快速创建项目、启动项目、编译项目等操作。常说的vue全家桶指：vue-cli、vue-router、vuex、vue-resource。vue的单文件组件扩展名是.vue文件，需要借助vue-loader，才能被正常解析。vue-cli3（新版本）如果之前安装过低版本的vue-cli，那么命令行执行：npmuninstallvue-cli-g然后安装npminstall-g@vue/cli然后检查版本vue--version创建项目vuecre... 继续阅读 >
2020
10-08

vue实现移动端项目多行文本溢出省略

vue实现移动端项目多行文本溢出省略 多行文本溢出省略在做微信公众号开发时,有个需求是这样的找到了一个方法,<div>2323文字提示气泡框，在鼠标悬停时显示，代替了系统的title提示。文字提示气泡框，在鼠标悬停时显示，代替了系统的title提示。文字提示气泡框，在鼠标悬停时显示，代替了系统的title提示。文字提示气泡框，在鼠标悬停时显示，代替了系统的title提示。文字提示气泡框，在鼠标悬停时显示，代替了系统的title提示。</div><!--上面这样写是无效的--><!--... 继续阅读 >
2020
10-08

vue移动端弹起蒙层滑动禁止底部滑动操作

解决办法在蒙层弹起的时候将body设置为fixed定位在蒙层消失的时候将body恢复原位popupVisible(newValue){if(newValue){document.body.style.position='fixed';document.body.style.width='100%';document.body.style.height='100%';}else{document.body.style.position='static';document.body.style.height='auto';}},设置为fixed的时候整个页面会恢复原位，如果需要把位置开始scrollY... 继续阅读 >
2020
10-08

解决Vue 移动端点击出现300毫秒延迟的问题

1.安装模块cnpminstallfastclick-S2.在main.js中引入，并绑定到bodyimportFastClickfrom'fastclick'FastClick.attach(document.body);当better-scroll和fastclick冲突的不能点击的时候：<slider><divv-for="iteminrecommends"><a:href="item.linkUrl"rel="externalnofollow"><!--当better-scroll和fastclick冲突的不能点击的时候，只需要加上class="needsclick",图片就可以被点击了，解决冲突的问题-->... 继续阅读 >
2020
10-08

Vue移动端项目实现使用手机预览调试操作

Vue移动端项目实现使用手机预览调试操作 最近在开发移动端Vue移动端项目，查了一些资料，这里分享下如何在webpack工具构建下的vue项目，在手机端调试和预览，言归正传。1.电脑和手机连接到同一个WIFIa.台式电脑和手机同时链接一个路由器，使用同一个wifi；b.笔记本也可以直接启用一个wifi，手机链接笔记本wifi也可以；2.查询本地IP地址WIN+R，输入cmd回车，打开命令提示符，输入ipconfig，查看本地IPv4；3.修改本地项目中IP地址找到项目中config文件夹，下面index.js文件... 继续阅读 >
2020
10-08

vue中移动端调取本地的复制的文本方式

我就废话不多说了，大家还是直接看代码吧~_this.$vux.confirm.show({title:'复制分享链接',content:‘分享的内容',onConfirm(){//_this.$vux.toast.text('复制成功')leturl=‘分享的内容';letoInput=document.createElement('input');oInput.value=url;document.body.appendChild(oInput);oInput.select();//选择对象;document.execCommand("Copy")... 继续阅读 >
2020
10-08

基于VUE实现判断设备是PC还是移动端

实际开发工作中会经常遇到一个需求，就是判断当前登录网页的设备是PC还是移动，要求PC端和移动端显示的是不同的网页内容。那么我们就需要对当前登录设备进行判断。使用navigator.userAgent字符串检测我是在PC端开发完接到要做移动端的需求，而且移动端只有一个页面，我就统一放在了一个文件夹内。首先在app.vue文件内，判断当前设备是pc端还是移动端。methods:{//添加判断方法isMobile(){letflag=navigator.userAgen... 继续阅读 >
2020
09-29

keras .h5转移动端的.tflite文件实现方式

以前tensorflow有bug在winodws下无法转，但现在好像没有问题了,代码如下将keras下的mobilenet_v2转成了tflitefromkeras.backendimportclear_sessionimportnumpyasnpimporttensorflowastfclear_session()np.set_printoptions(suppress=True)input_graph_name="../models/weights.best_mobilenet224.h5"output_graph_name=input_graph_name[:-3]+'.tflite'converter=tf.lite.TFLiteConverter.from_keras_model_fi... 继续阅读 >
2020
09-29

vue+canvas实现移动端手写签名

vue+canvas实现移动端手写签名 本文实例为大家分享了vue+canvas实现移动端手写签名的具体代码，供大家参考，具体内容如下<template><divclass="sign"><divclass="header"><iclass="el-icon-arrow-leftbackImg"@click="goBack"></i><spanclass="title">个人签名</span></div><sectionclass="signature"><divclass="signatureBox"><divclass="canvasBox"ref="canvasHW"><canvasref="canvasF"class="canvasStyle"@to... 继续阅读 >