狗蛋*-优快云博客

原创微信小程序点击按钮弹窗生成二维码图片+长按识别

框架：uni-app库：Painter GitHub - Kujiale-Mobile/Painter: 小程序生成图片库，轻松通过 json 方式绘制一张可以发到朋友圈的图片ui框架：uView 1.X u-modal 为uView弹窗，弹窗内容显示生成的二维码图片引入Painter组件（需事先下载库到components）获取数据后，调用this.draw()方法，绘制canvas，这里使用的painter内置的生成二维码qrcode，绘制成功后，onImgOk回调中获取生成图片

2022-07-04 11:50:29 3002

原创 react 函数式组件ref

在react中，ref属性可以获取子组件的实例或者Dom对象，进而对子组件进行修改，在传统类组件中，通过使用React.createRef()创建，通过ref属性附加到组件使用。在函数式组件中有所不同：使用forwardRef父组件：子组件：importReact,{createRef,useEffect,useState,forwardRef,useImperativeHandle}from"react";拿到ref通过useImperativeH...

2021-10-12 14:35:27 2378

原创 node+mysql+vue全栈本地前后端分离mock数据

项目结构：通过vue-cli创建的vue2.0项目，npm安装axios，body-parser，core-js，element-ui，express，mysql，vue-router。在项目根目录新建server文件夹，来放node代码。./server/api.jsconst mysql = require('mysql');const dbConfig = require('./db');const sqlMap = require('./sqlMap');c.

2021-06-24 18:17:20 306

原创 vue watch监听多个属性

watch的作用可以监控一个值的变换，并调用因为变化需要执行的方法。可以通过watch动态改变关联的状态。要监听多个值的话可以把vue对象实例的属性写到一个新的对象里边，然后监听这个对象。computed:{ id_num_data () { const { goods_list_id, goods_num } = this; return { goods_list_id, goods_num } }},watch:

2021-04-13 15:18:16 1129

原创基于vue的uni-app框架 h5移动端-首页多tab实现思路

应用首页存在多个顶部导航tab，且每个tab下都有不一样的内容和样式，怎么在不影响数据的情况下，优化用户体验。头部导航栏+显示区域--<view class="navbar"> <view v-for="(item, index) in navList" :key="index" class="nav-item" :class="{ current: ...

2019-12-13 16:45:58 1233

原创基于vue的uni-app框架之vuex+storage登录

根据vuex全局状态管理+es6本地存储实现登录缓存以及token状态拦截vuex--import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({ state: { hasLogin: false, token: false,...

2019-12-13 16:30:32 2193

原创 js遍历多个div并自动获取姓名的姓氏填入span

div class="mui-content" style="background-color: #f7f7f7;"> <div style="width: 100%;height: 0.2rem;"></div>  <div class="jutidiz...

2019-04-26 16:39:40 868

转载解决mui h5移动端input弹出键盘，布局整体上移问题

mui.plusReady(function() { var height = document.documentElement.clientHeight || document.body.clientHeight; plus.webview.currentWebview().setStyle({ ...

2019-04-26 16:33:10 5394 1

原创移动端购物车商品分类页面通用方案

<!doctype html><html> <head> <meta charset="UTF-8"> <title>分类</title> <meta name="viewport" content="width=device-width,initial-sc...

2019-04-26 16:28:35 1008

原创 vue移动端解决click事件延迟，封装tap等事件

下载vue-touch.js引入：<script src="js/vue-touch.js" type="text/javascript" charset="utf-8"></script>导航条tab：<div> <ul> <li v-tap="{fn:vu...

2019-04-26 16:22:11 1995

原创 js多个列表框点击按钮展开与收起

<div class="taskList mytask"> <img src="img/renwuimg1.png" /> <div class="task-title"> <span class="title">北欧简约设计风格小...

2019-04-26 16:13:49 2121

原创解决mui框架bottom公用导航条a标签href跳转，在微信内置浏览器跳转两次后不能点击--

首先解决mui框架 a标签不能跳转问题(被覆盖)js添加：mui('nav').on('tap','a',function(){document.location.href=this.href;});在原本跳转的链接上带上任意参数，例如这样：<a id="task" class="mui-tab-item mui-active" href="task.html?go=...

2019-03-21 11:19:28 557

转载 js常用特效

1. oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键　　<table border oncontextmenu=return(false)><td>no</table> 可用于Table2.<body onselectstart="return false"> 取消选取、防止复...

2019-03-19 19:47:03 2167

转载移动前端--下拉刷新

<html><head> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>test</title&

2018-08-29 16:50:22 443

原创横排文字向上滚动效果 --jquery

html：<div class="Top_Record"> <div class="record_Top">摇奖排行榜</div> <div class="topRec_List"> <dl>

2018-08-15 10:40:18 267

原创移动端导航条点击一个栏目滑动到屏幕中间

HTML<ul class="tab-head"> <li class="tab-head-item active">衣服</li> <li class="tab-head-item">裤子</li> <li class

2018-08-13 13:32:57 3190 4

转载移动端滑动卡顿问题

-webkit-overflow-scrolling: touchIOS 端特属属性，手指离开屏幕会保持滚动一段距离，继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。overflow: scroll; //该属性随着手指离开立即停止-webkit-overflow-scrolling: touch;//该属性随着手指离开还会保持滚动-webkit-transform: t...

2018-08-10 10:27:20 707

原创移动端手机验证码四格input

最近接的新项目，登录注册页根据需求要使用手机号获取验证码登录或者注册，一开始的想法是要做4个inputshur输入框，但是光标问题太严重。在网上看别人的实现方法，发现可以用一个input+4个span或者四个div来做，经过构思，实现了以下的方法。 html:<div id="shoujihao"> <span>&l...

2018-08-06 09:12:19 3559

原创输入框清除按钮(自定义)

<input id="sjh" type="text" name="" oncopy="" required value="" class="ipt" placeholder="请输入手机号" onkeyup="Mobile2(this)" /><span class="mui-icon mui-

2018-08-06 08:59:23 2092

原创 input输入框输入手机号时第三位后和第七位后自动加一空格

<input id="sjh" type="text" name="" oncopy="" required value="" class="ipt mui-input-clear" placeholder="请输入手机号" onkeyup="Mobile2(this)" />function Mobile2(obj

2018-08-06 08:54:49 2047

转载 css -webkit-tap-highlight-color（ios半透明背景）

-webkit-tap-highlight-color 这个属性只用于iOS (iPhone和iPad)。当你点击一个链接或者通过Javascript定义的可点击元素的时候，它就会出现一个半透明的灰色背景。要重设这个表现，你可以设置-webkit-tap-highlight-color为任何颜色。想要禁用这个高亮，设置颜色的alpha值为0即可。示例：设置高亮色为50%透...

2018-08-02 11:34:38 674

转载短信验证码输入框 6位

<!DOCTYPE html><html><meta charset="utf-8"><head> <script src="../js/commonJs/jquery-1.8.3.min.js"></script> <title>六位input输入框

2018-08-02 10:33:35 4084

原创 jquery淡入淡出弹出窗口

<div id="dialogBg"></div> <div id="dialog" class="animated"> <div class="dialogTop"> <span href=

2018-08-01 15:33:46 696

转载移动端rem适配

使用%单位css中body元素全局声明font-size=62.5%, 因为浏览器中默认字体高都是16px，所以100%=16px, 62.5%=10px,so 1rem = 10px, 2rem = 20px. @media only screen and (min-width: 320px){ html { font-size: 62.5% !importa...

2018-07-31 10:44:05 243

原创浏览器兼容-- hack方式

css hack使用hacker 我可以把浏览器分为3类：ie6 ；ie7和遨游；其他（ie8 chrome ff safari opera等）ie6认识的hacker 是下划线_ 和星号 * ie7 遨游认识的hacker是星号 * （包括上面问题6中的 !important也算是hack的一种。不过实用性较小。）比如这样一个css设置height:300px;*height:...

2018-07-30 16:26:02 405

转载 html css常见浏览器兼容问题总结

1、居中问题 div里的内容，IE默认为居中，而FF默认为左对齐，可以尝试增加代码： 1 margin: 0 auto; 2、高度问题两上下排列或嵌套的div，上面的div设置高度(height)，如果div里的实际内容大于所设高度，在FF中会出现两个div重叠的现象；但在IE中，下面的div会自动给上面的div让出空间所以为避免出现层的重叠，高度一...

2018-07-30 15:34:33 1366 1

原创 jquery 条件注释兼容ie

<body> <p id="p">狗蛋</p></body>&amp

2018-07-30 15:23:20 221

转载 js 鼠标、键盘、html事件（转载）

转自https://blog.youkuaiyun.com/qwer_df_b/article/details/77509859（个人备忘参考）鼠标事件click：单击dblclick：双击mousedown：鼠标按下mouseup：鼠标抬起mouseover：鼠标悬浮mouseout：鼠标离开mousemove：鼠标移动mouseenter：鼠标进入mouseleav...

2018-07-30 15:10:27 151

转载 jquery鼠标事件（备忘）

鼠标事件是在用户移动鼠标光标或者使用任意鼠标键点击时触发的。1、click事件：点击鼠标左键时触发　　$('p').click(function(){});示例：[js] view plain copy$('p').click(function(){ alert('click function is running !'); }); ...

2018-07-30 15:03:41 101

转载 js 鼠标事件

一般事件事件浏览器支持描述 onClick HTML: 2 | 3 | 3.2 | 4 Browser: IE3 | N2 | O3 鼠标点击事件，多用在某个对象控制的范围内的鼠标点击 onDblClick HTML: 2 | 3 | 3.2 | 4 Browser: IE4 | N4 | O 鼠标双击事件 onMouseD...

2018-07-30 15:01:50 143

原创定位居中布局+js日常

javascript:void(0);使按钮不可点击 position: absolute;定位center{ position: absolute; width: 80%; height: 1rem; right: 0; left: 0; top: 0; bottom: 0; margin: auto;}...

2018-07-27 14:21:05 674

原创移动端font自适应

html { font-size: 125%; /* 20÷16=125% min-font-size:12px bug*/}@media only screen and (min-width: 481px) {html { font-size: 188%!important; /* 30.08÷16=188% */}}@media only screen and (m...

2018-07-27 11:05:46 233

转载 js 系统内置函数

var str = 'AAAA';var aTest= new Array(); //['ff'[,'er']] \ new Array(10); \ new Array('ff','fee');var obj = new Obejct(); // {name:'zhangsan',height:198}var today = new Date();// Math对象示需要声明。字符...

2018-07-26 16:42:13 221

原创 jQuery 移动端页面手机号+验证码+密码

<div class="swiper-slide"> <div class="baodanall"> <div class="baodaninfo"> <div class="baodan"> <label class="mui-icon mui-icon-contact&quo

2018-07-24 16:58:25 2951

转载前端工具库（转）

Javascript 库Particles.js— 一个用来在 web 中创建炫酷的浮动粒子的库Three.js — 一个用来在 web 中创建 3d 物体和 3d 空间的库Fullpage.js— 快速实现全屏滚动特性Typed.js — 打字机效果Waypoints.js — 滚动到某个元素位置时触发一个功能Highlight.js — web 语法高亮Chart.js — 使用 JavaSc...

2018-07-13 17:08:34 397

原创移动端两列商品自适应

.dianpupaipin{ width: 100%; background-color: white; margin-top: 5px;}.dppp-top{ width: 90%; margin: auto; height: 40px; line-height: 40px;}.dianpupaipin .p1{ font-size: 15px; color: black;}.dppp-cont...

2018-07-13 11:07:53 1455

原创移动端自适应横排导航条

.daohang{ width: 100%; text-align: center; background-color: white; padding: 10px 10px 10px 10px;}.daohang ul{ display: table; margin: auto; width: 100%;}.daohang ul li{ display: inline-block; width: ...

2018-07-12 14:54:25 2364

转载移动端控制上滑导航条消失，下滑出现

var p = 0, t = 0; //上下滚动时隐藏导航栏 $(window).scroll(function(e){ //下滑 p =$(this).scrollTop(); if(t < p && p !==0){ $('.my-nav-footer').slideUp('fast'); ...

2018-07-12 12:05:54 3656

原创微信朋友圈九宫格图片自适应宽高

<ul class="figure-list"> <li> <figure style="background-image:url(img/09.jpg)"></figure> </li> <li> <figure style="background-image

2018-07-11 16:25:05 12943

转载前端优化-图片预加载

一、css、js、css+jscss：#preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; }#preload-02 { background: url(http://domain.tld/image-02.png) no-repeat -9999px -9999px; }该...

2018-07-10 16:36:56 879