H5
vue H5 vue H5vue H5vue H5vue H5vue H5vue H5vue H5vue H5vue H5vue H5
一个假的前端男
一个 迷迷糊糊的前端
展开
-
H5 监听页面是否被关闭
var device_type = navigator.userAgent; //获取userAgent信息 var md = new MobileDetect(device_type); //初始化mobile-detect var os = md.os(); //获取系统 const eventName = os == "iOS" ? "pagehide" : "unload"; // 监听刷新 window.addEventListener(even...原创 2021-09-09 18:01:56 · 1552 阅读 · 0 评论 -
H5仿淘宝下拉多选框
效果图本案例结合vant多选框 实现这里只具体分析一下下拉框动画 内容多选效果 遮罩层下拉框的实现1、 通过对导航栏 position: fixed; top: 0px;transform: translate(-100%); 使他向上移动他自身高度的位置这样子就实现了刚开始的导航栏隐藏2、通过点击使导航栏移动到固定的位置<template> <div class="box"> <!-- 顶部 --> <div class="top原创 2021-08-27 18:32:08 · 1243 阅读 · 0 评论 -
ios 安卓 手机软键盘 搜索
注意:input 标签 type search 通过keydown 监听按下事件2、ios下必须搭配from 表单 及 action 属性 实现 <form action="javascript:return true" @submit.prevent="formSubmit"> <input type="search" v-model="content"原创 2021-08-10 16:39:48 · 198 阅读 · 0 评论 -
h5 打包后效果失效
在 多行省略文本时 发现-webkit-line-clamp: 2;效果失效出现布局问题 overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; overflow: hidden; -webkit-box-orient: vertical;解决方式通过/*! autoprefixer:原创 2021-08-05 17:09:37 · 277 阅读 · 0 评论 -
Vant Toast loading加载使用
methods: { // 提交表单 onSubmit(value) { const toast = vant.Toast.loading({ duration: 0, // 持续展示 toast forbidClick: true, message: "加载中..." }); axios.post("http://127.0.0.1:8010/test").then(function (resp) { .转载 2021-06-22 15:15:07 · 3746 阅读 · 1 评论 -
vue h5 真机调试
下载npm install vconsole2.直接在页面引用 import VConsole from "vconsole"; let vConsole = new VConsole();正常使用console原创 2021-04-20 10:34:13 · 292 阅读 · 0 评论 -
vue 移动端H5微信支付和支付宝支付
添加链接描述转载 2021-04-19 16:50:28 · 261 阅读 · 0 评论 -
vue H5的流程
1、 做好移动端适配我用的rem + lib-flexible2、 考虑到H5需要动态设置titleios动态设置title 无法实时展示3、H5 IOS边框阴影无效解决方法 加入下列样式input{-webkit-appearance: none;}原创 2021-04-16 16:13:15 · 84 阅读 · 0 评论 -
h5 IOS边框阴影无效
解决方法在IOS下,input 和textarea表单默认会有个内阴影,一定程度上影响视觉一致,可通过设置下面代码去掉:input{-webkit-appearance: none;}原创 2021-04-16 10:00:04 · 269 阅读 · 0 评论 -
H5 ios 动态设置title
一、安装vue-wechat-titlenpm install vue-wechat-title --save二、在main.js引入import VueWechatTitle from 'vue-wechat-title'Vue.use(VueWechatTitle)三、在需要的时候引入<template> <div class="customerCaseDetail" v-wechat-title="这是是动态title"> </div&原创 2021-04-14 15:08:09 · 486 阅读 · 0 评论 -
vue 移动端适配
"postcss": { "plugins": { "postcss-import": {}, "postcss-url": {}, "postcss-aspect-ratio-mini": {}, "postcss-write-svg": { "utf8": false }, "postcss-cssnext": {}, "postcss-px-to-viewport": { "v.原创 2020-09-11 15:34:37 · 141 阅读 · 0 评论 -
移动端解决屏幕晃动
在App里面设置.body,html{height:100%;width:100%;overflow-x:hidden}原创 2020-07-30 17:00:14 · 657 阅读 · 0 评论