- 博客(27)
- 收藏
- 关注
RSS订阅原创 Vue使用element-ui table实现多级表头设置不同背景色
首先，我们要了解table表头行列是怎么排序的，我画了一个简单的图标注一下，其中坐标表示（rowIndex, columnIndex），这里要特别注意红色的坐标，表示每一行的起始坐标。以下是使用我的思路实现的效果，当然，网上也有很多大牛分享的能实现效果的帖子，这里主要是针对和我一样小白的菜狗做一个思路整理，知其所以然才能应对不同的需求。以上步骤是简化版，明白了其中的道理，我们就可以实现更复杂的样式了，下面分享一下我一个比较复杂的实际需求涉及的完整代码。红框为一级，蓝框为二级，绿框为三级。
2024-08-16 17:45:38
787
原创 Angularjs实现用户长时间未操作自动退出登录
在入口文件中，设置一个定时器（退出登录），再添加一个全局的点击事件监听函数，当用户有了点击操作后，重置定时器，如果用户长时间未操作，则执行定时器中的退出登录操作。1、在AngularJS的根控制器（myAppController）中，使用$document服务注册一个全局点击事件的监听器。2、添加一个定时器，定时器内是退出登录的操作，每当监听到用户点击后，重置定时器。当用户超过半小时未操作页面，自动退出登录。
2023-08-23 17:03:19
906
原创 echarts 饼图标签过多导致显示不全
先看一下缺失效果：可以看到，紫色和红色的数据是没有显示出来的，这是因为标签过多导致标签重叠了，只要让重叠的标签显示出来就可以了,配置里面加上hideOverlap:false ... series: [ { labelLayout: { hideOverlap: false } } ]下面是加上以后的效果图：...
2022-05-25 17:42:35
5056
原创 关于uniapp小程序在苹果手机会出现的问题
笔记1、uni-app 底部安全距离问题参考uni-app底部安全距离遮挡以及底部tabbar距离// ios底部安全距离-padding.savepadding{ padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); box-sizing: content-box;}// ios底部安全距离-bottom.savebottom
2022-02-25 13:11:07
3476
原创 关于uniapp微信小程序上使用uCharts图表不随着页面滚动的问题
我的一个页面有多个图表，还有v-if控制显示的两个地图，一开始页面滚动时，部分图表会固定住不随着页面滚动。自己查了一些资料，也问了一些人，折腾了几天都没有检查出问题，突然想到canvas2d这个属性，在属性描述中是为了解决层级才要加上的，自己的页面并没有层级问题，于是就把所有的canvas2d属性删掉了（默认就是false了），奇迹般的问题就解决了。应该是canvas2d开启后导致图表层级变高了，页面会出问题，所以这个属性要慎用啊。...
2021-11-02 11:02:05
3434
8
原创 uni-app微信小程序上使用ucharts地图时踩过的一些坑
地图注意事项1、使用的地图json文件从http://datav.aliyun.com/tools/atlas/下载后不要随意修改，改下城市名称（不想显示全称的可以改一下）就差不多了，不然会引发后续一系列问题（我就是嫌地图文件太大，怕加载慢所以在网上找了一份简洁的，但是被教做人最后还是乖乖用回最初的）2、不要在scrollView里使用地图！不要在scrollView里使用地图！不要在scrollView里使用地图，当然如果你用了没问题就当我没说，如果获取不到正确的currentIndex，那就是scr
2021-10-29 17:35:25
3889
15
原创 git下载uniapp+vk-unicloud前端项目后如何下载vk-unicloud插件
安装步骤1、首先进入uniapp插件市场下载插件，注意这里一定要选择client端的，不确定的自己往下找找是不是2、使用HBuilderX导入插件，然后在导入后新建的项目里找到以下文件夹，复制到你自己的项目对应位置：...
2021-10-15 11:09:19
461
原创 uniapp+echarts微信小程序实现中国地图
uniapp+echarts微信小程序实现中国地图前言需求问题1、按原文章步骤下载文件，没有map文件2、地图没有颜色3、tooltip文本渲染无法解析html标签前言该功能实现主要借鉴文章链接：https://www.freesion.com/article/19181219532/这里只做补充一些本人遇到的问题，可以先去看原文章需求这是我要实现的功能，因为原文章不能完全满足，所以自己再这里再做一下补充1、中国地图的展示2、颜色的深浅随着数据的大小形成一个梯度3、点击时出现提示框4、显示
2021-10-12 13:55:40
1939
4
原创 uni-app 用scroll-view实现横向滚动
前端小白的uni-app艰难学习之路实现首先是效果图下面是布局代码：<view class="bookshelf"> <view class="title"> <text>在读</text> <text class="icon icon-next fr"></text> ...
2019-06-06 14:44:56
26768
3
原创 uni-app 关于自定义标题栏时状态栏高度在不同手机的适配问题
前端小白的uni-app艰难学习之路解决在自定义标题栏时，虽然可以自由定义标题栏内容了，但我们通常又会面临着状态栏也一起塌陷的情况，在普通的手机上我们通过官方提供的css变量–status-bar-height来设置，下面是官方给出的解决办法在注意里也提到了微信小程序环境下iPhoneX是需要判断机型来设置高度的/* iPhone X in portrait & landscap...
2019-06-04 17:46:18
22585
原创 uni-app 关于微信小程序分享，app微信聊天界面和朋友圈分享
前端小白的uni-app艰难学习之路微信小程序分享实现微信小程序分享和app内微信分享小程序分享很简单，我们通过button的open-type属性<!-- #ifdef MP-WEIXIN --> <button class="share-btn" open-type="share">立即分享</button> <!-- ...
2019-05-31 19:02:04
25503
5
原创 uni-app修改头像并上传头像资源到服务器
前端小白的uni-app艰难学习之路功能要实现从本地相册或拍照获取图片，然后传给后台，后台返回保存后的图片地址实现这里首先我们要了解，通过uni-app提供的chooseImage接口返回的是图片的临时路径，除了你自己的项目里，其他任何地方都没办法查看图片的，这显然是不行的，我的解决办法是通过chooseImage接口获取临时路径，然后用了插件把图片转成base64格式，然后传给后台，后台...
2019-05-31 18:48:40
11633
3
原创 uni-app 超简单原理实现小说阅读分页功能
前端小白的uni-app艰难学习智力原理用到的主要原理有：分页原理利用高度截取后台传过来的数据内容利用高度实现完美分割在uni-app中，有这样一个接口通过它我们可以获取一些元素信息，比如宽高，下面是我需要获取的东西：<view class="content-text" id="box" :style="{height: boxHei...
2019-05-25 18:46:41
9063
2
原创 关于uni-app真机运行时遇到的坑
前端小白的uni-app艰难学习之路问题因为开发的项目要求是要在小程序，Android都要能够运行，平时写页面时在小程序上检查够用了，但是一旦和后台数据对接时，就会发现一个微信开发者工具已经不能满足我们了，就好比登录的时候，想要第三方登录，但是微信开发者工具只支持微信登录，浏览器根本不支持该接口，那么我们就必须要有一个Android平台了，看了模拟器的安装流程后，当然是果断的选择真机调试啦。当...
2019-05-18 11:19:09
29813
2
原创 使用uni-app的checkbox-group自定义不超过5个的多选
前端小白的uni-app艰难学习之路问题在开发过程中，我遇到了这样一个功能，用户只能选择不超过5个的选项，看似简单的功能，但却花了我大量的逻辑关系才勉强做出来，功能是实现了，但是代码看着比较繁琐，不过我实在找不到更好的办法了，如果有路过的大神有更好的办法希望可以不吝赐教解决1、先写布局<checkbox-group class="content-class" @change="ch...
2019-05-08 19:03:56
7503
9
原创 在uni-app写获取验证码倒计时
前端小白的uni-app艰难学习之路方法其实要实现这个功能原理非常简单，就是setInterval+setTimeout+clearInterval结合使用，首先在data里定义一个变量second，初始值为60，然后在setInterval里执行每秒减1的操作，setTimeout在60秒后执行clearInterval清除定时器的操作，话不多说，先上代码：getCode: functio...
2019-05-08 18:23:38
7091
2
原创 js聊天页面加载或刷新自动跳转到页面底部
问题在开发过程中，我接到这样一个功能，写一个聊天页面，要求页面加载或刷新后页面跳转到底部。在经过一系列百度以后，发现一个看似比较简单且靠谱的方法，即加上下面的代码块：<script> window.onload = function () { window.scrollTo(0, document.body.scrollHeight) }</sc...
2019-05-07 13:22:59
2976
原创 uni-app如何动态绑定背景图片资源
前端小白的uni-app艰难学习之路问题有时候我们需要一个功能就是背景颜色需要随着传入的图片改变而改变，这时我们肯定是不能把背景图片的引入放在css里面了，那么就只有想着怎么去动态引入它解决其实想通了也是非常简单的，首先我们想到的应该是给需要添加背景图的元素绑定style属性，然后给background-image绑定值，然后就要注意了，我们在style表里写的时候都是用url(‘图片路径...
2019-04-30 10:39:57
14283
5
原创 uni-app如何解决微信小程序给图片设置固定宽高但发生变形的问题
前端小白的uni-app艰难学习之路问题在开发过程中我发现，有时会遇到明明图片宽高设置的是相同的值，但在运行后图片却并没有显示出相对应的效果，反而看起来宽高非常不成比例，如以下示例：最终效果：可以看到，这并不是我们想要的结果，经过我反复调试，最后发现想要达到我们预期的效果（宽高相等即为正圆或正方形）也是非常简单的！解决第一步： 我们需要给图片加一个父view组件（一开始我也是没有...
2019-04-04 13:05:13
10898
5
原创 uni-app如何在写微信小程序时调用getLocation接口获取用户位置信息
前端小白uni-app的艰难学习之路授权配置开发过程中，需要在unpackage>>dist>>dev>>mp-weixin>>app.json中加入如下配置：这是因为微信小程序从2019年1月14日起新提交发布的版本若未填写地理位置用途说明，则将无法正常调用地理位置相关接口注意！上面的配置是非常关键的一步！调用授权接口首先需要调用un...
2019-03-30 19:01:02
17300
原创 uni-app打包成微信小程序后再开发运行时微信开发者工具没反应
前端小白的uni-app框架的艰难学习之路问题打包过的uni-app项目，想要继续开发，却发现一直都提示编译完成，而微信开发者工具也没有反应，不像未打包之前保存即刷新，这个问题我困扰了许久，后来终于发现了问题所在解决我们在打包成功以后，项目下的unpackage文件夹下的dist文件夹下会多出一个build文件夹，不知道大家刚开始接触uni-app的时候有没有发现，这个文件夹在打包之前是没...
2019-03-30 12:28:21
20110
4
原创 在uni-app中使用vuex
新建文件在项目的根目录下新建一个store文件夹，然后在文件夹下新建一个index.js文件引入vue,vuex在新建的index.js下引入vue和vuex，具体如下：然后在main.js中注册：做完这些操作你就可以在uni-app中愉快地使用vuex使用定义常量，然后导出，具体使用方式可以去看vuex使用方法，这里就简单说一下然后就是在其他文件中使用了我一般是在页面...
2019-03-26 11:19:12
14194
2
原创 解决 引用 bootstrap 报错dropdown.js:154 Uncaught TypeError: Bootstrap's dropdowns require Popper.js
bootstrap艰难学习之路问题根据这句报错我们可以知道是需要一个叫Popper.js的文件，于是上网查了一下，发现很多人都遇到过这个问题，有的人说是jQuery.js文件与bootstrap.min.js文件引用顺序导致的，不过我检查了自己的引用顺序，并没有问题，然后又看到了一个人给的解决办法，使用npm install --save Popper.js 命令下载解决使用npm ins...
2019-03-22 16:29:01
3760
原创 uni-app底部导航tabBar的使用
uni-app的艰难学习之路step1—学习官网说明：官网>配置>page.json>tabBarstep2—使用1、在pages中新建文件2、在pages.json文件里写配置代码{"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages { "pa...
2019-03-19 14:01:15
97687
13
原创 如何在uni-app中引入iconfont图标
如何在uni-app中引入iconfont图标step1在iconfont中找到你要的图标，这里和vue其他地方引用的步骤一致，如果是第一次使用iconfont请自行百度使用方法，因为我一直使用的在线链接方式引入，所以这里也只介绍这种方式引入uni-appstep2把下面的代码放在app.vue里面 /* icon图标 */ @font-face { font-family...
2019-03-19 09:55:57
12838
8
原创 用原生js实现轮播图自适应
一些说明这是我根据网上的一位大牛分享的代码进行了一些改动，这是大牛的分享：http://www.cnblogs.com/LIUYANZUO/p/5679753.html因为客户需求，我需要让轮播图宽度为100%，并且随着浏览器视窗的改变而改变，即需要达到宽度自适应的效果写博客主要是为了防止自己长时间不用而忘记，另外也想给同是小白的朋友们一些可供参考的资料，我已经给出了全部代码，希望需要的朋友...
2019-03-11 12:03:29
3495
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人