功能实现
wangle_style
这个作者很懒,什么都没留下…
展开
-
jq实现复选框全选和反全选以及子复选框的状态改变父复选框状态的方法
内容原创 2017-11-14 11:33:37 · 792 阅读 · 0 评论 -
微信小程序跳转传参的方法
两种方式:一是通过导航组件;而是利用wx:navigateTo的API(原理都一样:通过url传参)一:导航组件的方式:1.首先在页面建立导航2.在跳转后的页面接收参数:利用钩子函数onLoad: function (options) {this.setData({title: options.title,index: options.index})原创 2018-04-16 14:40:58 · 586 阅读 · 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 · 1121 阅读 · 0 评论 -
微信小程序--日期格式化和实现倒计时
首先看看日期怎么格式化第一种: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 · 5817 阅读 · 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 · 16689 阅读 · 3 评论 -
多种方式实现字幕滚动效果
1.html5有marquee标签来直接实现字幕的滚动效果 onMouseOut="this.start()" width="100%" height="100px" align="right"> 111111111111 222222222222222原创 2018-04-21 15:01:41 · 4109 阅读 · 0 评论 -
vue实现动态验证码和短信验证码
一:动态验证码:html部分<div style="display: flex;align-items: center;"> <span>验证码:</span> <i-input v-model="picLyanzhengma" placeholder="请输入验证码" sty原创 2018-05-25 16:35:38 · 11122 阅读 · 1 评论 -
不用插件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 · 6808 阅读 · 2 评论 -
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 · 8446 阅读 · 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 · 1712 阅读 · 0 评论 -
ipad横竖屏切换,页面适配方法
如果想始终横屏展示给用户,方法有很多,我也来写几种吧:1.简单粗暴型:当ipad竖屏的时候,给一个蒙层提示,让客户不得不进行横屏操作// ipad竖屏适配 var detectOrient = function() { var width = document.documentElement.clientWidth, height = docume...原创 2018-07-18 17:01:19 · 8384 阅读 · 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 · 7788 阅读 · 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 · 2334 阅读 · 0 评论 -
vue-element-admin撸后台实践(一)
一个项目首先要解决的问题,同时也是核心的问题就是登陆和权限的问题,vue-element-admin将路由和左边侧栏进行了绑定,所以我们要解决的就是根据不同的role,生成不同的路由,然后动态渲染不同的侧边栏,同时还要解决在后台可以通过tree控件动态设置权限的效果,所以,先撸一下整体实现思路:首先要说一下,vue-element-admin是怎么与后端进行交互的:用户端有交互提交----&g...原创 2019-02-28 16:13:28 · 6694 阅读 · 2 评论 -
实撸vue-element-admin(二)
之前撸了权限和登陆,这次补一下利用tree控件动态设置权限,和一些单个功能的实现:一:首先是新增角色,需要说的是,我们之前的思路是登陆之后就绑定了该角色,然后把cookie信息写上来供后端去在请求头里获取role来做角色关系处理!1.点击确定创建按钮后执行如下操作:// 添加角色 || 修改角色 async _addRole() { if (!this.roleN...原创 2019-03-05 11:02:32 · 1100 阅读 · 0 评论 -
vue-element-admin 之单个功能篇(三)
前面说完了登陆以及权限和利用tree进行动态更改权限的问题,下面撸一下单个的功能:一:table功能首先分析下table由三部分组成,搜索栏/table/分页栏1.在钩子函数里调用获取table数据的函数来渲染table// 获取活动列表 async _fetchActivityList() { this.listLoading = true //加载动画 ...原创 2019-03-05 17:21:37 · 2068 阅读 · 0 评论 -
jq---data()方法的妙用
有这样一种场景:将左侧表格中的内容在点击添加的时候,右侧列表会增加相应的一列数据,然而反过来还需要点击右侧列的删除时相应的对左侧表格中的对应行操作,此时可以用jq的data()方法,在第一步点击左侧表格添加的时候向该行附加数据,然后左侧点击删除的时候根据附加的数据选择对应行!其实质是把附加数据作为标记,代码如下:// 左侧点击添加到右侧列表 $('.nowkucun_table1').on(...原创 2018-04-03 16:00:49 · 1733 阅读 · 0 评论 -
利用vue-router的动态路由和路由传值实现同一模板渲染不同数据
在日常开发中有一种场景非常常见,比如有一百个列表链接,点击链接后进入的页面模板布局都是一样的,只是简单的有些数据不一样,所以在vue中可以利用vue-router的动态路由和路由传值实现,具体如下:1,在配置模板页面的路由的时候要用动态路由,并开启props模式:{ path:'/auction_detail_index/:id', component:auct原创 2018-04-03 10:37:52 · 5110 阅读 · 1 评论 -
美化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 · 1417 阅读 · 0 评论 -
鼠标拖动改变div容器的大小
html代码如下: 1111 2222 3333css代码如下: .fu{ width: 100%; position: relative; height: 500px; } .zi1{ position: absolute原创 2017-11-21 13:42:07 · 5701 阅读 · 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 · 2720 阅读 · 0 评论 -
mescroll.js实现下拉刷新,上拉加载!!
一:下载并引用二:html部分: 备注:id="mescroll"可以更换但是class="mescroll"不能更换三:js部分:1: 进入页面前,后台初始化页码、条数,获取总数据量 // 把后台获取的当前页码赋值给pageNo va原创 2017-11-30 15:29:26 · 4655 阅读 · 0 评论 -
Jquery Validation表单验证插件的使用
一:首先是下载并引用: //此为中文messages二:html部分: 会员来源:原创 2017-12-01 14:21:55 · 182 阅读 · 0 评论 -
jq实现table的列分页
写在前面:此方法代码不够美观,但能达到效果,以后写出更简便的代码再封装:目前实现tr分页的插件很多,但列分页的不多,所以空闲时间自己写了一个小demo原理:利用click事件显示和隐藏所需的列:html部分: id wowowowoow2 wowowowoow3 wowowowoow4原创 2017-12-04 16:44:43 · 912 阅读 · 0 评论 -
两种方式实现图片按比例响应式缩放、并自动裁剪的css技巧
两种方式各有各的优势和短板:一:也是大家最经常用的,如下: 这种方式优势在于:1,可以结合flexble等手机适配框架实现手机端的适配 (width: 4.0rem;)2,可以结合echo.js或者lazyload.js等懒加载插件备注:懒加载时style="width: 100%;"是必须要设置的这种方式短板也很明显:1,高度是自适应宽原创 2017-12-05 11:35:44 · 4812 阅读 · 0 评论 -
纯css,div隐藏滚动条,保留鼠标滚动效果。
当我们的内容超出了我们的div,往往会出现滚动条,影响美观。尤其是当我们在做一些导航菜单的时候。滚动条一出现就破坏了UI效果。 我们不希望出现滚动条,也不希望超出去的内容被放逐,就要保留鼠标滚动的效果。这里介绍一个简单的方法。 大体思路是在div外面再套一个div。这个div设置overflow:hidden。 而内容div设置 overflow-y:转载 2017-12-05 12:13:25 · 210 阅读 · 0 评论 -
自己修改select的样式(修改select右边的小三角)
CSS就可以解决,原理是将浏览器默认的下拉框样式清除,然后应用上自己的,再附一张向右对齐小箭头的图片即可。[html] view plain copyselect { /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/ border: solid 1px #000; /*很关键:将默转载 2017-12-05 14:04:36 · 1619 阅读 · 1 评论 -
bootstrap typeahead实现模糊查询功能
一:下载并引用二:html部分: 三:js部分:function displayResult(item, val, text) { console.log(item); $('.alert').show().html('You selected ' + val + ': ' + text + '');}原创 2017-12-07 15:33:33 · 2110 阅读 · 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 · 1848 阅读 · 0 评论 -
封装的一个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 · 467 阅读 · 0 评论 -
better-scroll在vue中实现原生滚动和上拉/下拉加载的效果
为了方便在VUE中的使用,可以把better-scroll抽化成一个组件,比如我抽化成了一个scroll组件,如下:<template>//ref="wrapper"不能更改 <div ref="wrapper">//此处放加载异步加载的内容 <slot name="header"></slot>//此处为上拉后没有数据的时候显示原创 2018-04-03 09:34:25 · 5643 阅读 · 3 评论 -
jquery-confirm小弹窗插件的简单使用
这里只是简单的说说如何在vue中使用,想看更多的可以移步此插件官网,很详细http://craftpip.github.io/jquery-confirm/安装和全局引用就不多说了,很简单npm,import就好了需要注意的是,要引入css文件,否则样式不会被加载进来<template> <div class=""> <button type="butto...原创 2018-04-03 09:47:08 · 1305 阅读 · 0 评论 -
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 · 2191 阅读 · 0 评论 -
vue-element-admin与后端交互流程(补)(跨域)
有些朋友说,一个交互过程东一下,西一下的,不知所以然,所以在此补一下vue-element-admin的整体框架结构,并细说一下交互的过程,包括跨域问题!一:首先是整体框架结构:├── build // 构建相关(build.js/webpack等)├── config // 配置相关 (代理环境配置/l...原创 2019-03-06 13:00:24 · 31947 阅读 · 22 评论