日常开发
wangle_style
这个作者很懒,什么都没留下…
展开
-
实用的js操作小技巧
虽条条大路通罗马,何不择优选择一条,一些很实用的js小技巧,可以优雅的简化代码1.数组获取最大/最小值可以使用Math.min()或Math.max()结合扩展运算符来查找数组中的最小值或最大值。const numbers = [6, 8, 1, 3, 9];console.log(Math.max(...numbers)); // 9console.log(Math.min(...numbers)); // 1 2.设置 length 属性来缩短数组let arr...原创 2021-10-29 09:47:40 · 178 阅读 · 0 评论 -
不用插件vue实现滚动加载
关键所在是实现滚动到底部,然后进行post请求,然后将获得的分页的数据push到数组中1,在data中定义三个变量page,isadd,data_wrpa其中page是控制分页的,isadd是控制是否post的,data_wrpa是数据的容器2,给容器绑定scroll事件<ul class="left_li_ul" @scroll="gd_add"> <...原创 2018-05-16 12:01:59 · 6835 阅读 · 2 评论 -
vue实现动态验证码和短信验证码
一:动态验证码:html部分<div style="display: flex;align-items: center;"> <span>验证码:</span> <i-input v-model="picLyanzhengma" placeholder="请输入验证码" sty原创 2018-05-25 16:35:38 · 11138 阅读 · 1 评论 -
多种方式实现字幕滚动效果
1.html5有marquee标签来直接实现字幕的滚动效果 onMouseOut="this.start()" width="100%" height="100px" align="right"> 111111111111 222222222222222原创 2018-04-21 15:01:41 · 4142 阅读 · 0 评论 -
微信小程序实现按价格/销量等排序
//按价格排序jiage: function () {var arry_length = this.data.li_content.length //按价格排序 获取数据数组的长度for (var i =0; i for (var j =0; j 1; j++) {let arry_jiage1 = this.data.li_content[j].jia原创 2018-04-19 17:24:37 · 16751 阅读 · 3 评论 -
微信小程序--日期格式化和实现倒计时
首先看看日期怎么格式化第一种:Date.prototype.Format = function (fmt) { //author: meizz var o = { "M+": this.getMonth() + 1, //月份 "d+": this.getDate(), //日 "h+": this.getHours(), /...原创 2018-04-23 14:12:10 · 5859 阅读 · 0 评论 -
微信小程序各种动画轮子链接
惭愧!我不是轮子的创造者,我只是轮子的搬运工文字跑马灯效果:http://www.wxapp-union.com/portal.php?mod=view&aid=1038 触摸水波涟漪效果:http://www.wxapp-union.com/portal.php?mod=view&aid=1350 下拉菜单效果:http://www.wxapp-union.com/portal....转载 2018-04-23 10:58:33 · 1155 阅读 · 0 评论 -
css媒体查询来兼容
1,判断ipad:@media only screenand (min-device-width : 768px)and (max-device-width : 1024px){ 样式}2,判断ipad横屏:@media only screenand (min-device-width : 768px)and (max-device-width : 1024px)and(orientat...原创 2018-04-04 16:08:03 · 658 阅读 · 0 评论 -
微信小程序跳转传参的方法
两种方式:一是通过导航组件;而是利用wx:navigateTo的API(原理都一样:通过url传参)一:导航组件的方式:1.首先在页面建立导航2.在跳转后的页面接收参数:利用钩子函数onLoad: function (options) {this.setData({title: options.title,index: options.index})原创 2018-04-16 14:40:58 · 605 阅读 · 0 评论 -
vue简单实现记住密码功能
原理是在提交表单的时候把用户名和密码的值存入cookie中然后再次进入页面时读取cookiehtml部分<div class="log_form"> <div class="log_form_biao">蚊子蚊子蚊子</div> <div class="log_form_inp"&g原创 2018-05-28 15:34:13 · 8484 阅读 · 2 评论 -
vue多实例情况下eacharts的异步获取数据
html就不写了,自行解决吧,下面写写js一:首先在methods中写一个模型:methods(){ huitu_yxqs:function(){ var myChart5 = echarts.init(document.getElementById('qushi_fx')); myChart5.setOption({ title: { ...原创 2018-06-09 14:09:33 · 1738 阅读 · 0 评论 -
一些常用网址
一:vue相关:1.官网地址https://cn.vuejs.org/2.element框架挂网http://element-cn.eleme.io/#/zh-CN/component/quickstart3nuxt.js官网https://zh.nuxtjs.org/guide4.iview框架官网https://www.iviewui.com/二:bootstrap相关:1.bootstrap...原创 2018-06-26 13:55:53 · 545 阅读 · 0 评论 -
vue-element-admin与后端交互流程(补)(跨域)
有些朋友说,一个交互过程东一下,西一下的,不知所以然,所以在此补一下vue-element-admin的整体框架结构,并细说一下交互的过程,包括跨域问题!一:首先是整体框架结构:├── build // 构建相关(build.js/webpack等)├── config // 配置相关 (代理环境配置/l...原创 2019-03-06 13:00:24 · 32040 阅读 · 22 评论 -
vue-element-admin 之单个功能篇(三)
前面说完了登陆以及权限和利用tree进行动态更改权限的问题,下面撸一下单个的功能:一:table功能首先分析下table由三部分组成,搜索栏/table/分页栏1.在钩子函数里调用获取table数据的函数来渲染table// 获取活动列表 async _fetchActivityList() { this.listLoading = true //加载动画 ...原创 2019-03-05 17:21:37 · 2101 阅读 · 0 评论 -
实撸vue-element-admin(二)
之前撸了权限和登陆,这次补一下利用tree控件动态设置权限,和一些单个功能的实现:一:首先是新增角色,需要说的是,我们之前的思路是登陆之后就绑定了该角色,然后把cookie信息写上来供后端去在请求头里获取role来做角色关系处理!1.点击确定创建按钮后执行如下操作:// 添加角色 || 修改角色 async _addRole() { if (!this.roleN...原创 2019-03-05 11:02:32 · 1113 阅读 · 0 评论 -
vue+element使用vue-quill-editor的富文本编辑器
备注:我这里采用的是npm的安装模式配合vue-cli1.安装:cnpm install vue-quill-editor --save2.安装quill依赖:cnpm install quill --save3.如何很多页面都需要用到,可以选择在main.js中引入,如下: import VueQuillEditor from 'vue-quill-editor' imp...原创 2018-11-21 10:54:38 · 2367 阅读 · 0 评论 -
jq实现抽奖概率
思路是外层套一个100的随机函数,里面用if判断语句实现什么概率出现什么奖项var ran=Math.ceil(Math.random()*100) //外层100以内的随机整数 if(ran<75){ //通过概率判断选取数字 var needNum= 0 //选取需求数字(这里是0这个数字) return needNum;...原创 2018-08-20 17:31:00 · 2233 阅读 · 0 评论 -
移动端上下左右滑动事件
注意:要用on方法$(".activity_goods").on("touchstart",'.activity_goods_left',function(e) { if (e.cancelable) { if (!e.defaultPrevented) { e.preventDefault();...原创 2018-08-27 17:28:57 · 2009 阅读 · 0 评论 -
jq实现上传图片预览以及提交前更换/删除图片
css部分自行解决吧,我就不多写了一:html部分:<div class=""> <ul class="hyxc" id="userphotos"> <li class='photos' onmouseover='showdelete(this);' onmouseout='hidedelete(this);'>&am原创 2018-08-03 15:26:02 · 7802 阅读 · 0 评论 -
ipad横竖屏切换,页面适配方法
如果想始终横屏展示给用户,方法有很多,我也来写几种吧:1.简单粗暴型:当ipad竖屏的时候,给一个蒙层提示,让客户不得不进行横屏操作// ipad竖屏适配 var detectOrient = function() { var width = document.documentElement.clientWidth, height = docume...原创 2018-07-18 17:01:19 · 8475 阅读 · 0 评论 -
微信小程序获取表单元素的输入值
有时我们不想通过表单的submit事件来获取表单元素的value值,但又不能通过jq那样的方式,所以这里列举一下如何获取表单元素的值1.input的输入值:首先在input上绑定事件然后在quzhi_input事件中获取值quzhi_input:function(e){ console.log(e.detail.value)//或者直接赋值给data中的值th原创 2018-04-13 11:26:08 · 5207 阅读 · 0 评论 -
jq---data()方法的妙用
有这样一种场景:将左侧表格中的内容在点击添加的时候,右侧列表会增加相应的一列数据,然而反过来还需要点击右侧列的删除时相应的对左侧表格中的对应行操作,此时可以用jq的data()方法,在第一步点击左侧表格添加的时候向该行附加数据,然后左侧点击删除的时候根据附加的数据选择对应行!其实质是把附加数据作为标记,代码如下:// 左侧点击添加到右侧列表 $('.nowkucun_table1').on(...原创 2018-04-03 16:00:49 · 1761 阅读 · 0 评论 -
jq实现table的列分页
写在前面:此方法代码不够美观,但能达到效果,以后写出更简便的代码再封装:目前实现tr分页的插件很多,但列分页的不多,所以空闲时间自己写了一个小demo原理:利用click事件显示和隐藏所需的列:html部分: id wowowowoow2 wowowowoow3 wowowowoow4原创 2017-12-04 16:44:43 · 937 阅读 · 0 评论 -
require.js的使用
一:创建config.js用来配置模块加载的位置,或者更直接的说法是给js文件起个剪短的名字,方便require加载可以用两种方式来写:1,如果js模块不多的话可以直接require.config({ paths:{ 'jquery' : 'asstes/js/jquery.3.1.0', 'bootstrap'原创 2017-12-02 14:37:13 · 565 阅读 · 0 评论 -
Jquery Validation表单验证插件的使用
一:首先是下载并引用: //此为中文messages二:html部分: 会员来源:原创 2017-12-01 14:21:55 · 209 阅读 · 0 评论 -
mescroll.js实现下拉刷新,上拉加载!!
一:下载并引用二:html部分: 备注:id="mescroll"可以更换但是class="mescroll"不能更换三:js部分:1: 进入页面前,后台初始化页码、条数,获取总数据量 // 把后台获取的当前页码赋值给pageNo va原创 2017-11-30 15:29:26 · 4683 阅读 · 0 评论 -
lazyload.js实现懒加载
1:引入2:html部分备注:添加class是为了方便下面的js控制/ 2.data-original=“”属性是真是图片地址 3.width和height两个属性必须设置不然图片会始终出现在显示区3:js控制部分$("img.lazy").lazyload({ effect: "fadeIn",原创 2017-11-29 15:05:15 · 2747 阅读 · 0 评论 -
美化input type="file"的样式
原理:将原来的样式隐藏,然后自己写css和jshtml部分: 上传图片 css样式部分:.file-input{ line-height:30px; position:relative; margin-top:10px;}.file-input .input-container{ width:100翻译 2017-11-28 14:54:20 · 1450 阅读 · 0 评论 -
jq实现复选框全选和反全选以及子复选框的状态改变父复选框状态的方法
内容原创 2017-11-14 11:33:37 · 801 阅读 · 0 评论 -
bootstrap模态框出现关闭后再打开滚动条不回顶的解决办法
原理:在关闭之后通过点击事件把模态框的滚动条的位置手动规顶:$('.close,#MemberDetails').click(function(){ $(".modal-body").scrollTop(0) }); 备注:.close是点×关闭的类名 #MemberDetails是模态框的底层的id原创 2017-11-14 13:33:21 · 1770 阅读 · 0 评论 -
两种方式实现图片按比例响应式缩放、并自动裁剪的css技巧
两种方式各有各的优势和短板:一:也是大家最经常用的,如下: 这种方式优势在于:1,可以结合flexble等手机适配框架实现手机端的适配 (width: 4.0rem;)2,可以结合echo.js或者lazyload.js等懒加载插件备注:懒加载时style="width: 100%;"是必须要设置的这种方式短板也很明显:1,高度是自适应宽原创 2017-12-05 11:35:44 · 4835 阅读 · 0 评论 -
纯css,div隐藏滚动条,保留鼠标滚动效果。
当我们的内容超出了我们的div,往往会出现滚动条,影响美观。尤其是当我们在做一些导航菜单的时候。滚动条一出现就破坏了UI效果。 我们不希望出现滚动条,也不希望超出去的内容被放逐,就要保留鼠标滚动的效果。这里介绍一个简单的方法。 大体思路是在div外面再套一个div。这个div设置overflow:hidden。 而内容div设置 overflow-y:转载 2017-12-05 12:13:25 · 240 阅读 · 0 评论 -
自己修改select的样式(修改select右边的小三角)
CSS就可以解决,原理是将浏览器默认的下拉框样式清除,然后应用上自己的,再附一张向右对齐小箭头的图片即可。[html] view plain copyselect { /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/ border: solid 1px #000; /*很关键:将默转载 2017-12-05 14:04:36 · 1646 阅读 · 1 评论 -
利用vue-router的动态路由和路由传值实现同一模板渲染不同数据
在日常开发中有一种场景非常常见,比如有一百个列表链接,点击链接后进入的页面模板布局都是一样的,只是简单的有些数据不一样,所以在vue中可以利用vue-router的动态路由和路由传值实现,具体如下:1,在配置模板页面的路由的时候要用动态路由,并开启props模式:{ path:'/auction_detail_index/:id', component:auct原创 2018-04-03 10:37:52 · 5122 阅读 · 1 评论 -
echarts在vue中的使用
安装:cmd进入项目根文件夹 cnpm install echarts --savemain.js中全局引入:import echarts from 'echarts'Vue.prototype.$echarts = echarts或者不用在main.js中全局引入,哪个页面使用在哪里引入即可,比如我是在load_ajax.vue这个页面用所以,此页面结构如下:<template> ...原创 2018-04-03 10:00:24 · 2225 阅读 · 0 评论 -
jquery-confirm小弹窗插件的简单使用
这里只是简单的说说如何在vue中使用,想看更多的可以移步此插件官网,很详细http://craftpip.github.io/jquery-confirm/安装和全局引用就不多说了,很简单npm,import就好了需要注意的是,要引入css文件,否则样式不会被加载进来<template> <div class=""> <button type="butto...原创 2018-04-03 09:47:08 · 1337 阅读 · 0 评论 -
better-scroll在vue中实现原生滚动和上拉/下拉加载的效果
为了方便在VUE中的使用,可以把better-scroll抽化成一个组件,比如我抽化成了一个scroll组件,如下:<template>//ref="wrapper"不能更改 <div ref="wrapper">//此处放加载异步加载的内容 <slot name="header"></slot>//此处为上拉后没有数据的时候显示原创 2018-04-03 09:34:25 · 5679 阅读 · 3 评论 -
封装的一个jq实现表格列分页的函数
目前大部分插件都能实现行分页(tr),但一直没找到能够实现列分页(td)的插件,无奈自己封装了一个用此函数的注意事项:1,table必须要有class="column_paging_table"class2,分页按钮必须是如下结构(class="yema"和class="page_bt")不能变,样式可以自行天马行空<div class="yema"><!-- <butto原创 2018-04-02 16:38:19 · 499 阅读 · 0 评论 -
vue.js中的总结
1:vue中使用jq时选择器不能用this的解决方式:jq中的this是很方便的,比如可以让点击哪个元素哪个元素触发事件--如:$('.span').click(function(){ $(this).addClass('fanzhuan')})但vue中this的指向是vue实例,所以这种$(this)的方式是不能用了,但可以利用eq(index)<span v-for="(item...原创 2018-01-19 15:35:19 · 227 阅读 · 0 评论 -
jq实现表格上移/下移/置顶功能
这里主要是运用了选择器的一些知识,全部代码如下:jQuery实现表格行上移下移和置顶.demo{width:600px; margin:60px auto 10px auto; font-size:16px}.table {border-collapse: collapse !important;width: 100%;max-width: 100%翻译 2018-01-03 09:55:27 · 1862 阅读 · 0 评论