2 Taurus_666

尚未进行身份认证

我要认证

用力只能做到及格,用心才能做到优秀

等级
TA的排名 6w+

记录vant weapp 小程序组件库遇到的坑以及ios和安卓兼容问题 SubmitBar

组件一:SubmitBar 提交订单栏IOS不显示,安卓正常前情提要(可忽略)因为项目比较着急,正好这个组件跟设计图类似,欣喜万分,拿来即用。然鹅,现实跟想象中真是完全不同。IOS上完全不展示这个组件,安卓正常。苦恼万分,想着只是css问题(想着vant不可能有这种不显示的bug),浪费半天时间,无果。第二天头脑清醒的把组件拿到别的页面尝试,竟然能展示。问题及解决最终,判定是因为SubmitBar 放在了tab标签里面。如果放在tab里面IOS就会有问题,放在外层就正常。组件二: flex布

2020-07-30 16:00:18

es6快速数组去重 数组去重最佳方法

ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。Set本身是一个构造函数,用来生成 Set 数据结构。const set = new Set([1, 2, 3, 4, 4]);[...set]console.log(set)// [1, 2, 3, 4]所以我们可以使用set去重function duplicateRemoval(array) { return Array.from(new Set(array));}duplicateRemo

2020-07-06 14:51:09

vue组建内部导航守卫 查询上个路由页面地址 并赋值到本页面 监听用户未保存修改前突然离开

导航守卫事件:首先大家都知道,官方文档所说:你可以在路由组件内直接定义以下路由导航守卫!于是我们在目标页面可以增加3个路由监听函数;beforeRouteEnterbeforeRouteUpdate (2.2 新增)beforeRouteLeavebeforeRouteEnter (to, from, next) { // 在渲染该组件的对应路由被 confirm 前调用 // 不!能!获取组件实例 `this` // 因为当守卫执行前,组件实例还没被创建 cons

2020-07-03 17:53:55

vue element组合项目中校验问题element校验 金额校验 面积校验 2位小数校验

iviewUI校验问题如何才能优雅的进行校验也是目前楼主比较关心的问题,如有更好的方式希望大佬不吝赐教。下面是本人在开发中采用的方式,以此记录。主要是金额或者面积校验,可输入整数或者2位小数首先在输入时绑定trim,限制用户输入空格;其次,在校验中多加一层正则校验(整数或2位小数), /^\d+(.\d{1,2})?$/最后如果有多个校验规则,可继续追加。rules: { unitPrice: [ { required: true,message: "单价不能为空",

2020-06-30 14:58:58

iview级联组件报错Error in callback for watcher data TypeError Cannot read property length of null

iview级联选择组件报错问题发现后台返回的数据中没有子选项的情况下,children: null,如果让为空的情况下改为空数组就解决啦!首先满足官方要求:级联选择对数据有较严格要求,请参照示例的格式使用data,每项数据至少包含 value、label 两项,子集为 children,以此类推。value 为当前选择的数据的 value 值的数组,比如 [‘beijing’, ‘gugong’] ,按照级联顺序依次排序,使用 v-model 进行双向绑定。//切记,一旦没有子集的不能写null或

2020-06-17 11:18:40

如何对比两个数组中相同的元素 js对比数组 map遍历数组

项目场景在后台管理系统中通常会使用字典项,便于管理通用选项,比如男女下拉列表,比如菜单状态等。所以有一个场景就是,后台返回数字,需要将数字转换为文字,而且需要跟字典选项对比,才能获取实时更新后的数据。data(){ return{ arr1: [ { sex: '0', index: 123544 }, { sex: '1', index: 123586

2020-06-09 15:29:27

element 级联选择获取label 同时获取value和label element 级联选择回显

前情提要在elementUI的Cascader级联选择组件中,获取value大家应该都懂,一般我们会将value设置为id ;<el-cascader size="small" :options="listAll" placeholder="请选择或输入" filterable ref="cascaderAddr" :props="{value: 'id'

2020-06-05 14:25:30

小程序内部一键关注关联公众号 如何实现小程序无跳转关注公众号

上效果实现前提打开微信公众平台----->设置 ---------> 打开公众号关注组件注:设置的公众号需与小程序主体一致。具体实现//wxml<official-account bindload='loadSuccess'></official-account>//js /** 关注公众号组件 */ loadSuccess(e){ console.log("关注公众号组件加载成功") },official-account 为公

2020-05-28 17:58:03

小程序实现圆点边框 解决 dotted不兼容 小程序圆点边框兼容问题 如何在小程序实现兼容的圆点边框

先上效果图由于业务需要,需要做一排圆点,实现方法有很多,在此记录一下另一种实现方式。最终效果:效果前提由于仅仅做小程序,而且使用了weUI样式,其中有一个徽章badge,突然奇想用徽章badge做一排圆点,在badge wxss中修改你需要的背景色,字体颜色同背景色即可。 <mp-badge content="8" style="margin-left: 10px;"/> <mp-badge content="8" style="margin-left: 10px;

2020-05-28 16:56:15

微信小程序清除输入框内容组件 清空Input weui中一键清除input内容

前提首先,我是在引用weUI扩展组件情况下,自己做了适当修改,即可全局引用Input, 使用清空输入内容功能。components为weui组件,本身weui是没有input组件的,我自己添加了一个Input-clear组件。使用方法第一步:引入weUI组件,方法很多,我是直接引入了weUI的components文件夹,也可用其他方法引入,详见微信公众平台文档说明第二步: 在app.wxss页面引入weui.wxss第三步: 在需要使用weUI组件的页面的json文件中添加你需要的组件,一定要

2020-05-26 18:40:38

关于js中return的用法 return和return false的区别

定义和用法return 语句会终止函数的执行并返回函数的值。这是官方给的定义,但是关于return和return false到底有什么区别,什么时候用return什么时候用return false呢?(最后有彩蛋哦_)关于return和return false区别下面上大白话O(∩_∩)O哈哈~1、当执行一个function,需要返回一个值,就直接return 值;function myFunction() { return Math.PI;}2、当你只是需要判断在某种条件下不

2020-05-20 17:46:30

微信小程序顶部滚动通知 仿支付宝顶部通知 小程序滚动文字

先呈上效果图主要代码//wxml部分<view class="scroll-top" hidden="{{isHiddenMsg}}"> <scroll-view> <view class="msg-icon notice-icon"> <image src="../../../static/images/show-info...

2020-05-06 11:46:55

限制input输入框保留2位小数 清除input框type=number右边的图标

转载记录限制input输入框只能输入正数和小数//输入正数和小数(保留两位)<input type="number" step="0.01" min="0" onkeyup="this.value= this.value.match(/\d+(\.\d{0,2})?/) ? this.value.match(/\d+(\.\d{0,2})?/)[0] : ''">//去掉...

2020-04-14 13:25:24

vue 四级联动 地址联动 vue级联选择

vue 四级联动效果实现前提首先看下,我们的开发环境及数据封装特点:第一: 开发框架vue-cli3 elementUI第二: 数据封装情况,详见代码部分 data中的 data;满足以上2点再继续,如果数据封装有所不同,可根据实际情况稍作修改。实现过程此处主要采用vue计算属性以及watch监听输入框变化,展示不同的数据。只需加载时一次请求即可。仅个人想法,如有更好的方法,欢...

2020-04-08 11:34:54

element表单校验问题 表单清除某个校验 表单图片校验问题

问题描述首先我使用的是vue-cli +element Ui ,就是在表单中有上传图片环节,由于我们这边是先上传图片,提交表单的时候单独传imageUrl即可,官方表格演示中并没有表单校验图片流程,然后按照表单校验一般规则填写,无论是否上传图片,都有提示:图片不能为空,但是如果上传了图片,虽然有提示,但是也能提交成功,但是,这样对用户太不友好。如何修改下面是我的form表单中截取了图片上传一...

2020-04-01 14:10:28

小程序如何引入weui样式 小程序如何使用weUI样式插件 weUI如何使用

weUI在微信小程序中的引用小程序如果想引入weUI,需要以下几步,本文章主要介绍通过页面按需加载引入模式:第一:下载weUI,三种方式一、可以通过npm方式下载构建,npm包名为 weui-miniprogramnpm install weui-miniprogram二、去github下载https://github.com/Tencent/weui-wxss三、可以通过页面按需...

2020-02-28 13:12:24

小程序多状态class 动态控制多个class 动态添加删除class

我们在小程序页面制作时通常会遇到不同状态展示不同的样式或者内容,当然如果只有2种情况最好办,直接三元运算符和 逻辑或都可以解决,但是如果是三种状态四种状态呢?遇到这种情况我是这么处理的(根据条件判断采用wx:if else),下面的小栗子是展示的4种状态。如果你有更好的方法,欢迎交流!<view class="invoice-item-flex" id='invoice-item-stat...

2020-02-28 11:34:01

小程序模糊搜索功能

小程序模糊搜索功能小程序模糊搜索功能,记录一下

2020-02-27 15:50:16

超好用的js 日历插件 日期插件 日期日历选择控件

前情提要:主要是目前项目较小,仅需要一个日历插件,就没有选择引用UI框架,单纯找了一个日历插件,外观相对简单大方,还不错,而且只需要2步就可以完成引入:第一步(有2种方式引入,支持单独引入文件及npm引入):1、官网下载压缩包文件打开官网: layDate日期插件官网网址2、第二种方式npm安装:npm install layui-laydate第二步:获得 layDate 文...

2020-01-15 18:26:27

wangeditor 在vue项目中的安装方法 wangeditor安装和使用

以下是基于vue-cli3项目关于wangeditor编辑器的使用,只许简单3步即可使用:第一步:npm install wangeditor第二步:import E from 'wangeditor'第三步:mounted(){ let editor = new E('#div1'); editor.create(); },当当当当……如有疑问,欢迎交...

2019-12-31 18:44:56

查看更多

勋章 我的勋章
  • GitHub
    GitHub
    绑定GitHub第三方账户获取
  • 签到王者
    签到王者
    累计签到获取,不积跬步,无以至千里,继续坚持!
  • 新人勋章
    新人勋章
    用户发布第一条blink获赞超过3个即可获得
  • 阅读者勋章Lv1
    阅读者勋章Lv1
    授予在CSDN APP累计阅读博文达到3天的你,是你的坚持与努力,使你超越了昨天的自己。
  • 持之以恒
    持之以恒
    授予每个自然月内发布4篇或4篇以上原创或翻译IT博文的用户。不积跬步无以至千里,不积小流无以成江海,程序人生的精彩需要坚持不懈地积累!
  • 1024勋章
    1024勋章
    #1024程序员节#活动勋章,当日发布原创博客即可获得
  • 勤写标兵Lv1
    勤写标兵Lv1
    授予每个自然周发布1篇到3篇原创IT博文的用户。本勋章将于次周周三上午根据用户上周的博文发布情况由系统自动颁发。
  • 原力新人
    原力新人
    在《原力计划【第二季】》打卡挑战活动中,成功参与本活动并发布一篇原创文章的博主,即可获得此勋章。