h5
分享h5相关实战案例
z.week
技术驱动创新
展开
-
H5端rem自适应屏幕
计算设计图尺寸与窗口宽度,窗口宽度放大100倍即1rem = 100px在head标签中引入,让页面一加载就适应屏幕; (function (win) { var tid; function refreshRem() { let designSize = 1920; // 设计图尺寸 let html = document.documentElement; let wW = html.clientWidth;// 窗口宽度原创 2021-12-10 18:38:33 · 815 阅读 · 0 评论 -
微信内H5页面跳转小程序
如果所使用的标签允许提供插槽,由于插槽中模版的样式是和页面隔离的,因此需要注意在插槽中定义模版的样式。另外,对于具名插槽还需要通过slot属性声明插槽名称,下文标签插槽中的default插槽为默认插槽,可不声明插槽名称。已认证的非个人主体的小程序,使用小程序云开发的静态网站托管绑定的域名下的网页,可以使用此标签跳转任意合法合规的小程序。已认证的服务号,服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。系统版本要求为:iOS 10.3及以上、Android 5.0及以上。原创 2021-04-23 10:02:17 · 827 阅读 · 0 评论 -
补充:(方案二)vue路由hash模式(带#)微信公众号首次授权后ios总是跳首页的问题
解决方案一 请看我另一篇文章 方案一利用 .html 文件作为中转页面进行路由重定向该页面在 static 文件夹下(vue打包时不会被编译),并只做 js 处理:截取参数解码——> 跳转页面<script> let url = location.href.split('?') let pars = url[1].split('&') let data = {} pars.forEach((n, i) => { let p =原创 2021-02-25 11:41:19 · 1175 阅读 · 0 评论 -
vue路由hash模式(带#)微信公众号首次授权后ios总是跳首页的问题
ios系统url上#后面的信息不会解析,会被忽略掉比如url:www.demo.com/dist/index.html#/detail?id=10直解析到www.demo.com/dist/index.html,所以跳转到首页解决方案:在index页面添加如下代码 beforeCreate() { window.location.href = window.locat...原创 2019-11-07 17:03:07 · 2418 阅读 · 0 评论 -
微信小程序request请求封装,并可设置防抖
请求函数加入防抖功能:有两种防抖效果,根据自己需求使用。页面中使用函数:先在app.js引用,方便调用。request请求封装基于promise。看下防抖效果(上图)原创 2019-10-17 11:00:32 · 1000 阅读 · 1 评论 -
vue项目自定义滚动指令控制按钮显示隐藏
在vue项目中,有些页面需要toTop的按钮(滚到顶部),因此在页面中需要用到滚动事件,但是如果很多页面都需要用到这个按钮,就要在这些页面中都加上滚动事件,会导致页面代码臃肿,不便维护。这里使用vue自定义指令封装一个全局的滚动事件,在需要的页面引用组件,加上指令即可。下面上代码:1、首先封装一个toTop的按钮组件(默认显示)<template> <div id...原创 2019-09-05 14:10:12 · 1960 阅读 · 1 评论 -
Vue使用有赞ImagePreview(图片预览)遇到的问题
首先说下有赞ImagePreview的使用有赞官方文档:https://youzan.github.io/vant/#/zh-CN/image-preview先上个预览效果图问题点:如果图片预览弹框没有隐藏的话,在路由切换的时候也会一直显示如图,路由已切换:解决方案:beforeRouteLeave 钩子中调用 close() 方法关闭预览遮罩beforeRouteLeave ...原创 2019-08-22 09:23:05 · 19590 阅读 · 9 评论 -
Vue定时器报“timeout.close is not a function”的问题
今天在项目中用到定时器,发现个问题当vue清除定时器时发现报错解决方案:加上window前缀无报错信息原创 2019-08-21 09:04:16 · 1672 阅读 · 0 评论 -
vue搭建的公众号微信分享功能
微信分享,这里要注意的是,获取签名参数时,前端传的URL是#前面部分,所以要截取一下,否则即使能分享,分享的信息也是默认的,不能修改成传过来的标题和其他想要修改的数据import request from '../request/http'import Vue from 'vue'import { Toast} from 'vant'Vue.use(Toast)import api...原创 2019-08-14 09:11:50 · 1598 阅读 · 7 评论 -
vue+vant公众号项目踩的坑
vant – List组件在页面初始化后连续触发多次的问题,如下图:代码:html代码:<van-list v-model="category.dropLoading" :finished="category.finished" finished-text="--没有更多了--" @load="onLoad" > 内容</van-list>data数据 c...原创 2019-08-06 17:56:05 · 1636 阅读 · 0 评论 -
小程序下滑触底,切换页面
小程序项目需求,触底后上滑切换页面,下滑取消切换。用到touch事件,分别绑定touchstart、touchmove、touchend事件wxml代码<view class="section" bindtouchstart="handletouchtart" bindtouchmove="handletouchmove" bindtouchend="handletouchend"&g...原创 2019-08-02 13:29:44 · 1299 阅读 · 0 评论 -
移动端滑动反弹效果
原生js实现移动端滑动反弹效果纵向滑动效果演示横向滑动效果演示请在谷歌浏览器移动端模拟下查看具体实现思路触摸事件(touch event)可响应用户手指(或触控笔)对屏幕或者触控板操作,给基于触控的用户界面提供了可靠支持。触摸事件接口是较为底层的 API,可为特定程序提供多点触控交互(比如双指手势)的支持。多点触控交互开始于一个手指(或触控笔)开始接触设备平面的时刻。随后其他手指也可触...转载 2019-07-24 12:52:10 · 944 阅读 · 0 评论