![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
移动端
素素_钗钗
如今世路已惯,此心到处悠然
展开
-
双向滑动区间选择控件
如题所示,仿瓜子二手车双向滑动选择器,主要特点是:双向滑动,可点击进度条定位,滑块可拖动,数值变化有提示动画效果图如下:效果简约,有需要可下载资源。。。资源开箱即用,基于vue.js,代码封装性不高...原创 2022-01-20 20:12:27 · 727 阅读 · 8 评论 -
input输入数字且有长度限制的兼容方案
在使用表单元素的时候,input输入框是很常见的,在输入手机号等只需使用数字并且对输入长度有需求的时候,就会发现,input本身所具有的属性真是太令人又爱又恨了,哈哈哈!只输入数字时,你可能会想,让input的类型为number不就好了吗?是呀,可惜,ios不怎么听话,需要限制长度时,你可能又会想,input不是有个maxlength属性吗?有啊,但当type=number的时候,各个系统都很叛逆,都跟你对着干,这个时候,你会想什么呢?再进一步思考的时候,限制长度的时候,有空格怎么办呢?如果是复制粘..原创 2021-11-15 20:51:16 · 1908 阅读 · 0 评论 -
Vue.js在同一个页面重复引用相同组件时的干扰处理
如标题所说,我们在使用vue.js组件时,会出现在同一个页面会多次使用相同的组件,更特别的是,组件相同,但数据呈现上是完全不同的,有增或有减,但dom交互的处理是一样的,在这样的背景下,有可能引起组件数据跟需求不一致,交互无法运行等问题,这两个问题是比较常见的,由 于组件在初始化时,是共用的作用域,因此,变量数据是一致的,另外一个问题是因此,大部份的情况下,交互编写可能都会考虑到dom元素的选取问题,如果组件中出现多个相同的id,那交互上会出问题,也不足为奇了。为了解决如上的问题,我们编写组件的时候,需要原创 2021-10-29 23:14:48 · 11529 阅读 · 3 评论 -
单页应用移动端弹窗穿透解决终极方案
移动端的web项目,大多数会采用单页应用来实现,在布局上也有一定的讲究,从设计角度出发的话,布局大致分为两类,一类是单页全屏,另外一种是内容多的滚动屏。全屏的话,一般布局会采用vh,position等等方式来实现,而滚动屏又会分为两小类,一类是局部滚动,另外一类是全局滚动,一旦页面出现滚动条,并且此页面有弹窗的需求时,穿透这个问题就来了。一句话总结穿透就是:弹层下的页面滚动会跟随着弹窗的滚动。要解决这个问题,有很多种方案,尤其是在移动端,比如说,设置overflow:hidden,positio...原创 2021-08-01 17:07:44 · 315 阅读 · 0 评论 -
小程序车型选择器组件
如题所示,实现小程序页面车型选择组件,主要特点为数据是服务器加载的,仿微信联系人右侧导航实现定位,可搜索对应列表,点击标题可切换数据结构为普通的数组对象,前端需要编写方法处理成适合界面显示的数据结构,在选择品牌的时候,右侧导航主要代码如下...原创 2020-12-15 15:23:17 · 1255 阅读 · 23 评论 -
企业微信H5踩坑指南
企业微信开发H5功能,正在进行中,需要记录的点有两个:第一是:域名验证,针对SPA应用,下载下来的验证文件跟index.html同一目录或者使用其他方式,需要保证域名+文件名可以访问即可,再次登录微信后台勾选即可第二是:企业微信jssdk授权,建议下载文件放到本地,再引入至index.html页面中,因为它有要求在app.vue监听路由即可,当然,有些api调用是有次数限制的,因此,还是...原创 2020-05-08 17:00:34 · 1335 阅读 · 2 评论 -
一维数组变有规律二维数组
布局写多了,总会踩上几个坑,面对有奇偶需求的布局而服务端数据只返回一维数组列表时,flex布局帮不上忙的时候,有没有一种抓耳挠腮的感觉呢!这种状态下,前端就得发挥一下啦!来看一下何谓奇偶布局吧!图片有点难看,将就着看,能理解就行啦,毕竟是截图工具画的~~~如图所示,类似这种结构,如果使用flex来布局,那需要好好想想,对吧!那就换一种思路,布局不直接,那就改数据结构呗!如...原创 2020-03-07 17:46:51 · 308 阅读 · 0 评论 -
vue.js实现手风琴效果
效果如图,标题可定制,自定义内容区,默认打开项可以配置,主要利用了vuejs父子组件中的uid来实现,打开一个,关闭其他的,主要实现代码如下:// collapse.vue<template> <div class="collapse-parent"> <slot></slot> </div>&...原创 2019-12-25 16:28:23 · 1406 阅读 · 1 评论 -
移动端元素拖拽之touchstart, touchmove,touchend简易版本
!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-C...原创 2019-12-17 21:25:38 · 200 阅读 · 0 评论 -
微信小程序定制页面局部上拉刷新及加载列表
如标题所示,由于微信小程序目前仅支持整体页面刷新及加载,有某些具体特殊需求的页面中是无法满足的,因此有了定制化的局部下拉刷新及上拉加载列表,思路如下:下拉刷新会有5种状态嘛:reset:重置初始状态pulling:下拉过程pullEnough:下拉距离判断refreshing:释放正在刷新refreshed:刷新完成有了这些状态之后,再考虑在微信小程序当中,局...原创 2019-07-31 23:57:00 · 2860 阅读 · 0 评论 -
移动端H5开发之顶部固定导航布局
在开发移动端h5应用时,尤其是在开发混合app时,一般情况下,顶部导航会一直固定在页面头部,如下图:h5的常规操作是直接来个fixed定位,代码如下:position:fixed;top:0;left:0;right:0;但是,这种写法,在ios系统下,会出现一些,类似下拉页面时,导航会一起滚动,无法固定在屏幕顶部,或者是有input标签的时候,调出软键盘之后,页面无法往上...原创 2019-01-30 10:34:09 · 14372 阅读 · 7 评论 -
移动端h5键盘弹出后影响页面弹窗问题
在服务号中开发html5页面,输入框比较多,在iphone version 12及以上,发现,键盘弹出之后,页面整体上移,导致页面弹窗的元素定位不准,无法点击到正确的位置,解决方法有二:1.弹窗只作提示,定时器跳转2.判断键盘状态 当键盘弹出,收起时,判断弹窗位置,再据实际情况修改,鉴于示为紧急bug,直接让页面滚回到最初始状态(scrollToTop)判断移动端键盘弹出收起的代码...原创 2018-12-03 15:41:04 · 2595 阅读 · 0 评论