- 博客(45)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 微信小程序自定义头部导航栏
微信小程序自定义头部导航栏虽然小程序自带的顶部导航栏比较好用，但是扩展性比较差。在实际开发中我们经常需要针对导航栏进行一些功能性操作。比如点击返回按钮返回到固定的页面，设置其他背景颜色字体颜色以及增加一些按钮等等。下面我们一起来看看导航栏的定制；先看下demo的效果：最终要实现的效果：在tabbar页面不显示左侧按钮；分享出去的页面进入后不显示左侧返回按钮；点击返回按钮可以自行设置返回层级；字体颜色，背景颜色的设置；左侧按钮的深浅样式切换；使用自定义组件定义导航栏在小程序跟目
2021-06-24 17:52:32
2289
原创 微信小程序底部Tabbar增加角标显示
根据微信提供的API wx.setTabBarBadge进行角标的设置；api地址：https://developers.weixin.qq.com/miniprogram/dev/api/ui/tab-bar/wx.setTabBarBadge.html let cartNum = 2; //默认数据 if (cartNum.length != 0) { //设置角标 wx.setTabBarBadge({ index: 1, //第几个tab text: cart
2021-05-21 10:27:40
1546
原创 element-ui table组件动态渲染表头
第一种方式：利用插槽进行数据绑定//html文件<el-table :data="tableData" border> <el-table-column v-for="(item, i) in tableHeader" :key="i" :label="item"> <template slot-scope="scope"> {{ tableData[scope.$index][i] }} </tem
2021-04-26 10:06:14
1023
原创 video监听上次播放时间点下次进入后继续播放
最近被人问到如何打开视频播放接着上一次播放的时间点继续播放。由于之前只是采用最基本的视频播放或者利用第三方插件进行播放视频，根本没有考虑这么多；脑子里只有一个大概的想法但是不知道是否能实现所以就没有回答；后续抽空百度了下才发现自己当时的思路是正确的；下面直接上代码吧！//视频播放容器<video id="videoPlayer" width="100%" height="100%" loop controls :src="shareVideoLink"></video>.
2021-04-09 23:02:46
4986
1
原创 echarts实现地图下钻功能
很多时候我们需要通过地图进行数据的直观展示，并且展示下级省份、地市、区县的数据，这时我们就需要对地图进行下钻；（由于最近的项目使用的是贵州地图，所以文章中用贵州省进行演示！）首先我们要实现功能点有以下几点（如下图）：地图下钻功能；鼠标经过显示地图上数据,且默认能自动轮播各地区的数据；在地图上根据数据进行气泡标识；实现思路大概思路：1.先从后台请求会在地图上展示的数据；2.进行地图绘制，在地图绘制过程中我们就可以将下钻、气泡、数据轮播功能依次实现。具体操作如下：一：下载地图JSON.
2020-12-29 16:31:14
5291
4
原创 element-ui 时间选择器设置时间选择范围
针对element-ui时间选择器进行时间选择范围的控制，最终实现的效果如下图所示，灰色的区域为不能选择区域！<el-form-item label="日期：" prop="time"> <el-date-picker v-model="time" type="date" :picker-options="timeRange" placeholder="选择日期"></el-date-picker></el-form-item>export
2020-10-20 14:26:27
7879
3
原创 通过nvm切换node版本
nvm是一个nodejs版本管理工具，我们可以通过它来对nodejs的版本进行切换；一、下载安装：下载地址https://github.com/coreybutler/nvm-windows/releases，进入github地址后选择nvm-setup.zip(安装版不需要进行配置)。下载完成后运行安装文件nvm-setup.exe按照步骤一步步安装即可；二、使用：安装完成后打开CMD，在CMD中输入nvm，显示以下内容代表安装成功；常用命令：1.nvm list 查看..
2020-09-27 11:29:55
1954
原创 js获取当前时间 年、月、日、季度
var myDate = new Date();myDate.getYear(); //获取当前年份(2位)myDate.getFullYear(); //获取完整的年份(4位,1970-????)myDate.getMonth(); //获取当前月份(0-11,0代表1月)myDate.getDate(); //获取当前日(1-31)myDate.getDay(); //获取当前星期X(0-6,0代表星期天)myDate.getTime(); //获取当前时间(从1970.1.1开
2020-09-04 11:55:53
4729
原创 VUE防止按钮重复点击
1.新建plugins.jsimport Vue from 'vue'// 在vue上挂载一个指量 preventReClickconst preventReClick = Vue.directive('preventReClick', { inserted: function (el, binding) { console.log(el.disabled) el.addEventListener('click', () => {
2020-08-10 15:34:14
1717
1
原创 常用数组排序方法
冒泡排序方法获取第一个数字与第二个数字进行比较，如果第一个数字比第二个数字大 则与第二个数字交换位置var arr = [1, 9, 4, 50, 49, 6, 3, 2]; for(var i = 0; i<arr.length-1 ;i++){ for(var j = i+1 ;j<arr.length;j++){ var val1 = arr[i]; var val2 = arr[j]; if(val1 > val2){ .
2020-07-30 14:16:09
436
原创 VUE Vant框架开发移动端自适应问题处理
Vant组件库内部的组件样式都是以PX单位计算的尺寸。由于手机屏幕尺寸大小不一，所以我们一般在开发web移动端的时候不采用PX像素为单位设置宽高等。方式一：将px单位转换成rem单位布局1.下载lib-flexible插件npm i lib-flexible --save2.引入lib-flexible//main.js中引入import 'lib-flexible/flexible'3.安装px2rem-loadernpm install px2rem-loader4.配置px.
2020-06-21 17:58:11
6231
5
原创 解决VueRoter/element-ui路由报错Error: Avoided redundant navigation to current location的问题
在router>index.js文件中增加以下代码：const originalPush = VueRouter.prototype.push VueRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err)}
2020-06-18 15:04:15
1277
原创 vue循环从后台获取数据
最近在项目中有个功能涉及到了循环从后台获取数据，具体业务逻辑如下！1.首先通过后台获取一组数据；2.在每组数据里拿一个参数id用来请求另外一个接口；3.请求数据后对应的压入到首次请求回来的数组中在页面上进行渲染；解决方法：循环请求数据的时候需要将异步修改为同步，否则数据对应不上。//请求第一组数据 axios.post('http://xxxx.com', qs.stringify(Data) .then((resolve)=>{ //请求成功后拿到数据 //例如请求回来.
2020-05-19 18:03:42
4219
原创 layui表格重载后界面闪动解决方案
layui框架默认提供的table模块，使用该模块可以快速高效的完成表格数据的开发。但是最近在使用过程中发现了一些小问题。下面一起来看下吧！官方说明地址：https://www.layui.com/demo/table.html需要实现的具体需求如下图：上图中分为三个部分，我们要实现以下三个功能：1.根据关键词搜索出想要的数据展示出来；2.进入页面后加载默认数据；3.通过分页控制...
2020-03-27 16:01:27
7699
3
原创 element-ui 表格合并
最终要实现的效果：<template> <div> <el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px" > <el-...
2020-02-28 11:26:14
218
原创 keep-alive+vuex实现页面数据缓存
在使用VUE开发项目时，从列表页跳转到详情页后。每次返回会发现列表页都会进行重载。尤其是在列表页涉及到tab切换时，重载后用户还需要再次操纵切换。体验度大大降低。可以选用keep-alive 里的include+VUEX进行动态缓存如：从A>B>C页面时候，让页面刷新。从C>B>A时候让B禁止刷新。也就是需要将B页面存入缓存中。实现：首先需要在A/B/C各自的单页...
2020-01-14 18:12:19
1478
2
原创 js多图/单图上传显示
项目中经常会大量的使用到图片上传，之前涉及到的时候经常会在网上下载一些素材直接拿过来使用，但是随着项目的增多发现用的是各式各样的，导致非常混乱。所以抽空写了一个dom来梳理下图片上传的流畅以及单图和多图上传需要注意的点。多图上传多图上传，这里仅仅是做了前端的展示效果，实际项目中，多图上传应该是每次上传一张图片后向后台发送一次请求，后台返回img路径然后进行展现。为什么一定要传入后台在进行...
2019-12-15 12:58:13
604
原创 vue项目打包后首页空白
VUE项目在运行npm run build后会生产一个dist的文件夹，该文件夹里就是项目打包后的文件。但是当我们打开index.html文件后发现首页是空白的。出现这种情况主要是因为路径不正确导致导致，具体解决方案如下！1.在config文件夹里找到index.js修改build配置，如下图assetsPublicPath默认是"/"修改修改成"./"修改完成后我发现了首页可以正常打...
2019-12-06 10:39:42
686
1
原创 vue+element-ui 封装面包屑导航
面包屑导航在很多项目中都会大量的使用，所以我们最好将封装成组件用来调用。在刚开始封装的时候在网上也找了许多方法，但是发现大多的方法都比较臃肿，而且对于项目后期的维护造成了很大的工作量。最终还是自己封装了一个。1.新建bread.vue文件；<template> <div class="bread"> <div class="example-contai...
2019-12-05 10:16:35
3621
3
原创 js文字无缝滚动，间歇滚动
1.无缝滚动<div id="demo"> <ul id="demo1"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li>...
2019-11-28 13:48:53
321
原创 layui iframe父页面向子页面传递参数
在之前使用layui iframe弹窗时，之前最常使用的就是混合开发的方式，后台工程师会直接将url内带上参数然后打开页面。然后在去获取参数；那么如果前后端分离或者不使用url如何传递参数呢？1.封装打开弹窗方法//参数可以自己定义，但是url是必须要的！！function admin_show(title,url,ids,w,h){ if (title == null || t...
2019-11-22 14:49:50
2138
原创 echarts图标增加点击事件
给echarts增加点击事件； myMap.on('click', function (params) { //获得一个params对象； })echarts重载 ：页面变化时候echarts根据页面进行大小进行自适应window.addEventListener("resize", function () { myMap.resize();...
2019-11-06 18:05:22
1934
3
原创 js对象、数组转json json转数组对象
js对象转json字符串:JSON.stringify(obj)js数组转json字符串:JSON.stringify( arr );js对象数组转json:JSON.stringify( arr );json字符串转数组:JSON.parse( json);
2019-10-29 14:22:57
697
原创 js判断字符串中是否包含某个字符
//第一种: indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。如果要检索的字符串值没有出现，则该方法返回 -1。var str = "123";console.log(str.indexOf("3") != -1 ); // true//第二种：RegExp对象方法判断 test() 方法用于检索字符串中指定的值。返回 true 或 false。var ...
2019-10-29 13:29:42
1034
原创 es6变量解构赋值
ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。解构赋值在实际开发中可以大量减少我们的代码量，并且让我们的程序结构更清晰。数组的解构赋值：let [a,b]=['1','2'];console.log(a);//1console.log(b);//2//上面的代码表示，可以从数组中提取值，按照位置的对象关系对变量赋值。//需要注意数组模式和赋值模式需要统...
2019-10-27 14:40:50
178
原创 ES6转ES5
目前Chrome支持ES6新语法，但是有一些低版本的浏览器是不支持ES6的，那么我们就需要将ES6语法转换成ES5语法；1.** 建立工程目录： ** 先建立一个项目的工程目录，并在目录下边建立两个文件夹：src和distsrc：书写ES6代码的文件夹，写的js程序都放在这里。dist：利用Babel编译成的ES5代码的文件夹，在HTML页面需要引入的时这里的js文件。2.编写in...
2019-10-27 13:48:00
193
原创 Promise封装微信HTTP请求，解决微信小程序异步请求
通过Promoise封装微信小程序请求微信小程序的默认请求方式都是异步请求，这样就会导致在请求还没有执行完毕后，后边的方法直接执行了；我们可以通过请求成功后在进行下方的操作，例如：onload: function () { wx.request({ url: 'https://api', // 某个api接口地址 success: res => { ...
2019-10-16 20:44:03
760
2
原创 js防抖和节流
概念解释：函数节流：频繁触发但只会在特定的时间内执行一次；函数防抖：频繁触发但是只会在特定的时间内没有触发执行条件才执行一次；函数节流：函数节流最常用的方式就是在监听页面元素滚动时用到，因为滚动事件是一个高频触发的事件；示例代码：var canRun = true;document.getElementById("main").onscroll=function(){...
2019-10-16 18:51:23
128
原创 微信小程序解析html代码
在开发小程序的过程中后台给前台返回的数据，是通过富文本编辑的，这事我们就需要进行去解析HTML代码，在小程序里展示；下载插件地址：https://github.com/yinhaonan123/-使用方法：1.、首先将下载的wxParse文件夹放到根目录（如下图所示）；2、在需要显示解析内容的HTML页面进行引用；<import src="../../wxParse/...
2019-09-30 15:58:16
1857
原创 微信公众号开发—图片预览放大
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> <script> $(document).ready(function(){ var imgObj = $(".cont").find('img');/...
2019-09-24 21:18:47
760
原创 微信小程序webview打开页面返回问题
最近在做小程序的时候发现小程序进入webview页面里，在webview页面里有时会出现点击左上角返回，无法返回小程序。解决思路：通过微信浏览器监听返回按键和H5跳转小程序的方法。在webview嵌入的H5首页监听微信返回按键，直接从H5页面中去跳转到小程序内；//方法<script src="https://res.wx.qq.com/open/js/jweixin-1.3...
2019-09-18 13:14:34
8039
1
原创 微信小程序更改数组中的值
data:{profession: [{ id: 1, name: '学生', checked:true},{ id: 2, name: '职工', checked:false}],}现在要给profession里的职工checked修改成true;onLoad: function (options) {var That = this;var job = ...
2019-07-26 11:18:55
965
原创 微信小程序授权用户绑定手机号
微信小程序获取用户所绑定的手机号：大概逻辑：首先要进行wx.login进行授权登录，登录后获取encryptedData、iv、openid、session_key；然后将这些参数传送给，后台接受到参数后用参数进行解密，最终返回给前台；授权时需要通过button进行点击授权； <button open-type="getPhoneNumber" bindgetphonenumber="...
2019-07-09 19:26:40
7557
原创 微信小程序之小程序授权登录
微信小程序授权登录微信小程序更改了getUserInfo的接口，无法自动去弹出授权，所以在获取授权信息的时候需要根据button去进行获取；在首页文件中，编写一个获取授权的页面，在刚进入页面时，判断用户是否授权。如果没有授权则显示出授权的页面，否则直接显示页面；// 判断是否需要显示授权按钮<view wx:if="{{isHide}}"> <view wx:if...
2019-07-09 11:17:11
3077
7
原创 自定义单选按钮radio样式
表单中input[type="radio"]的样式非常不好看，而且在不同的浏览器中显示的效果也不同；我们可以采用input和label结合对页面的单选按钮进行样式修改html:<div class="female"> <input type="radio" id="female" class="ui-radio" name="sex" /> &...
2019-05-27 19:43:20
2345
原创 document.referrer 配合微信监听返回按钮优化用户体验
document.referrer是javascript提供的默认返回并刷新页面的方法；同时用document.referrer可以获取到上一个页面的url;那么具体如何使用呢？举个列子：我们在做商城的时候，会有地址列表页；如下图地址列表页，点击添加收货地址进入添加收货地址页面。当新的收货地址添加完毕后，我们要自动返回到这个页面并且刷新改页面数据；那么就可以用document.referr...
2019-05-27 19:17:49
570
原创 layui子页面数据改变刷新父页面
layui是一套非常适合搭建后台管理的UI框架，界面美观度非常高，且非常好用。但是在用的过程中发现了一些小坑，这个给大家分享下！如下图：点击父页面按钮，弹出框，在弹出框内输入完信息后，父页面内的数据需要主动刷新下；这里需要注意，由于使用框架本身的form监听提交事件，所以在提交成功后子页面会默认刷新下。导致用户体验很不好；解决方法：在form.on时间中增加return fa...
2019-04-15 20:11:15
10415
7
原创 JQ左右无缝滚动 js左右无缝滚动
JQ左右无缝滚动效果，JS左右无缝滚动jq无缝滚动效果具体实现代码<div id="slider"> <ul> <li>demo</li> <li>demo</li> <li>demo</li> <li>demo</li> </ul>&...
2019-03-25 16:12:15
2196
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人