- 博客(103)
- 收藏
- 关注
RSS订阅原创 前端菜鸟从入门到放弃
最近收到很多小伙伴的私信，遗憾的告诉大家我已于2022年3月4号离职，并且之后没再从事前端开发工作，现在就职于一家网络公司，但是没干技术相关的事情，如果后续能够接触到技术方面的问题，会持续更新的，感谢大家的支持。也想告诉许多新入行的前端小伙伴，当你感觉到困难时，再坚持坚持，熬过去了也就那么回事，不要学我哦！...
2022-07-01 10:24:56
608
1
原创 echarts重写图例点击事件
<div class="acountEchart"> <!-- 图例tab --> <ul class="tabWrap"> <li v-for="(item, index) in legendList" :key="index" :class="!item.active ? 'noBgcolor' : ''" @click="tabCilck(item)">{{ item.tab }}</
2022-02-10 18:37:25
2756
1
原创 Vue页面将获取的姓名和手机号脱敏展示
// 将姓名和手机号脱敏 formatStr() { if (this.formList.name && this.formList.name.length == 2) { this.name = this.formList.name.slice(0, 1) + "*"; } else if (this.formList.name && this.formList.name.length > 2) { co
2022-01-14 10:10:22
1600
原创 微信小程序数组遍历方法之forEach
// 获取单位id和名称 getCheckInfo() { const _data = { communityCode:'', registerType:'1' } Api.request({ url: Api.api.PARTY_MEMBERS_REPORT, data: _data,method: 'POST'}).then(res => { if (res.code == 0) { const result = res.data if(result
2022-01-01 20:04:34
4380
原创 vue由A页面向B页面跳转并传参
A页面：<div> <div class="benrenReport" @click="goFormPage('self')"> <span class="tianbaoren marginLeft">本人填报</span> </div> <div class="benrenReport" @click="goFormPage('other')"> <span class="tianbaoren marginLef
2021-12-27 17:06:13
588
原创 微信小程序前端电话号码脱敏展示
<wxs module="phone">var toHide = function (array) { var mphone = array.substring(0, 3) + '****' + array.substring(7); return mphone;}module.exports.toHide = toHide;</wxs><view class="textStyle"> {{phone.toHide(it
2021-12-03 09:33:54
1608
原创 css实现实心三角形
示例如下：<view class="triangle"><!-- 用伪类实现向上的箭头 --> <view class="word desc1">我爱学习</view> <!-- 用伪类实现向下的箭头 --> <view class="word desc2">我爱工作</view> <!-- 用伪类实现向左的箭头 --> <view class="word desc3">我爱生活<
2021-11-26 10:57:16
751
原创 微信小程序下拉触底分页功能实现
初始数据：data: { pageNum: 1, list: [], totallPages: '' },接口调用：getList(){const that = thisApi.request({url: xxx + `?page=${that.data.pageNum}&limit=10`}).then(resp => { if (resp.code == Api.conf.success) { const result = resp.data
2021-11-22 11:41:02
465
原创 微信小程序input自动聚焦后placeholder文字位置上移
问题：这个问题出现的原因是给input上面给了上下的padding或者margin值解决方法是给input给height和line-height代码如下：<view class="searchView"> <image class="backImgStyle" src="{{imageUrl}}/epacSearch/backIcon.png" bindtap="backPage"></image> <input class="se
2021-11-21 10:42:48
3942
原创 微信小程序之加载更多（分页加载）实例
1.业务需求：列表滚动到底部时，继续往上拉，加载更多内容2.必传参数：（1）page: 1 //第几次加载（2）limit: 5//每次加载的显示数据条数（3）total: null //需要返回数据的个数3.其他参数：根据接口的传所需参数4.实现原理：当第一次访问接口时，传递三个必备参数和其他参数（需要搜索的字符串）给后台，后台返回第一次数据过来。在请求成功的的回调函数中，判断返回的数据是否>0，是，则取出数据，渲染视图层，并把“上拉加载”显示在列表底部；否，则没有数据可取，并把“没
2021-11-19 14:27:14
2127
2
原创 微信小程序实现tab切换
代码如下： <view class="tabWarp"> <view wx:for="{{tabList}}" wx:key="index" class="tabList {{currentIndex == index ? 'activeStyle': ''}}" bindtap="tabClick" data-index="{{index}}">{{item}}</view> </view> <view class="tabConWa
2021-11-03 11:15:52
426
原创 mac版vpn连接错误解决
错误描述：创建一个文件sudo vim /etc/ppp/options然后在文件中输入：plugin L2TP.pppl2tpnoipsec保存退出之后，再连接就可以了
2021-10-29 10:46:15
8754
1
原创 升级开发者工具后调试器Storage和AppData目录找不见解决方法
1.调试-打开调试目录-插件目录2.将inspector文件夹删除，在重启一下微信开发者工具就好了
2021-10-23 14:27:57
681
原创 微信小程序字符串截取方法
后端大佬传给我的数据格式为：yyyy-MM-dd HH:mm:ss，我需要展示的是yyyy-MM-dd,所以做如下转换：<view class="item" wx:for="{{testList}}" wx:key="this"> <text>{{subData(item.checkTime)}} <wxs module="subData"> module.exports = function (v
2021-10-19 21:17:58
2209
原创 微信小程序手写弹窗
我要实现的效果是如果有档案详情，跳到详情页面，如果没有，则弹框提示：<view class="chronicDisease"> <view wx:for="{{documentList}}" wx:key="index" data-url="{{item.src}}" bindtap="pageJumpClick" class="documentCon"> <text>{{item.label}}</text> <text&
2021-10-09 20:29:08
453
原创 微信小程序页面跳转方式
今天我先来记录一下一个分包下的页面之间的跳转第一种方式：如下代码所示为一个双层嵌套list,每个对应一个要跳转的页面<view class="medicalReport_con"> <view class="list_con" wx:for="{{list}}" wx:for-index="index" data-url="{{item.url}}" bindtap="pageJumpClick"> <view class="listItem" wx:for=
2021-10-09 16:42:10
534
原创 小程序van-tabs组件运用以及小程序vant tab组件解决文字过多显示不全的问题
代码如下：<view class="con"> <van-tabs swipeable animated tab-class="tab-box" title-active-color="#A6894E" color="#DFBF7D"> <van-tab title="{{item.tabsName}}" wx:for="{{fatherList}}" wx:key="index" wx:for-index="index" class="tab"> &l
2021-10-09 15:47:43
8144
原创 商家信息展示模板开发
<view class="sjList-box" wx:for="{{merlist}}" wx:key="this"> <image class="leftCon-box" src="{{item.src}}"> </image> <view class="rightCon-box"> <view class="labelOne"> <view class="merName">{{i
2021-10-08 16:24:28
169
原创 微信小程序手写select下拉框
实现代码如下： <view class="fenlei"> <!-- 下拉框 --> <view class="select_box"> <view class="select" catchtap="selectTaps"> <text class="select_text">{{selectDatas[indexs]}</text> <image class="sel
2021-10-08 11:29:48
1171
1
原创 微信小程序form表单中button按钮、input框样式修改
<form catchsubmit="formSubmit" catchreset="formReset"> <view class="weui-cell__bd" style="margin: 30rpx 0"> <text class="label">学生姓名</text> <input class="weui-input" name="学生姓名" placeholder="请输入" pla..
2021-10-06 16:55:29
2575
原创 微信小程序中实现列表渲染（wx:for）
我们经常在vue页面中用v-for语句来实现列表渲染，那在微信小程序wxml页面中也可以用类似于v-for作用的语句wx:for来实现列表的渲染，如下所示：在wxml页面中： <view class="list_box listTwo"> <view class="item" wx:for="{{listTwo}}" wx:key="label"> <view class="icon_bg"> <im
2021-10-03 21:42:37
2293
原创 echarts自适应问题
在开发时，echarts适应问题解决 <div class="echartBox"> <div id="taskReport"></div> </div> <script src="dist/js/lib/jquery/jquery-3.3.1.min.js"></script> <script src="dist/js/lib/echarts/echarts-4.2.1.min.js"></sc
2021-09-30 18:04:32
822
原创 谷歌浏览器点击网页任何一段文字都会出现光标问题解决
今天闹了一个乌龙，在我们开发的网页上，点击任何一段文字都会出现一个光标，最开始我以为是我css那个属性设置的问题，搞了好久才发现是浏览器设置的问题！！！，害得大佬头发又掉了几根，实在不好意思呢，哈哈哈，那怎么让那个讨厌的光标消失呢，很简单，关闭 使用文本光标浏览网页路径（chrome系的浏览器）：设置>高级>无障碍>使用文本光标浏览网页...
2021-09-28 19:39:39
9596
6
原创 vue实现循环滚动列表
注意：需要给父容器一个height和:data='Array’和overfolw:hidden;左右滚动需要给ul容器一个初始化 css width。先来介绍该组件的用法：1.安装命令：cnpm install vue-seamless-scroll --save2.main.js文件中作为全局组件引入import scroll from 'vue-seamless-scroll'Vue.use(scroll)<vue-seamless-scroll :data="listDat
2021-09-16 16:33:34
2604
1
原创 解决css transform和animation不能同时生效的问题
在同一个类上同时使用transform和animation是不能生效的，解决方法是给该类外面再包一层，在外面的类上添加animation效果，在里面的类上添加transform效果<div class="jiant"><div> <i class="jaintou"></i></div><div> <i class="jaintou"></i></div></div> .jia
2021-09-14 10:20:07
2494
1
原创 纯css实现外层图标旋转的动画效果
为了能够提高日常的开发效率，将自己的每一个小收获都记录下来，下次再遇到这样的需求就可以复用啦！！！代码如下： <div class="suc-rotate"> <div class="rotate-bg"></div> <i class="icon"></i> </div>css代码：.suc-rotate { position: relative; .rotate-bg { position: abso
2021-09-14 10:00:52
550
原创 echarts图表坐标轴文字换行显示
var handleTimeOption = { color: ['#ED5565', '#FFCE54', '#5D9CEC'], tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, legend: { textStyle: { color: '#FFFFFF' // 图例
2021-09-08 20:19:56
5190
原创 动态获取表格高度
<div ref="tableBox" class="contentShow" style="height:100%"> <Table class="data-c" :columns="leftDataColumns" :data="leftData" :height="tableHeight" ></Table>.
2021-09-06 09:59:11
476
原创 使用iview的Carousel 走马灯组件时，echarts图表无法自适应宽度问题解决
在我实现轮播含有echarts图表的页面时出现了，当从别的页面回到轮播效果的页面时，echarts无法自适应宽度，刷新一下之后，显示正常。解决方法就是在echarts上面加上v-if(v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。)代码如下： <Carousel v-model="value1"> <CarouselItem> <div class="demo-carousel">
2021-09-03 15:12:23
1426
原创 基于echarts实现的平滑曲线图
option = { color: ['#FF9B9A', '#FFD097', '#5FD77E', '#72E1FF', '#A886FF', '#56ABFF'], tooltip: { trigger: 'axis' }, legend: { data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'] }, grid: { ...
2021-09-01 20:43:22
2128
1
原创 分段仪表盘echarts
option = { series: [{ type: 'gauge', startAngle: 180, endAngle: 0, min: 0, max: 0.99, splitNumber: 3, // itemStyle: { // normal: { // borderWidth:30, //
2021-09-01 17:48:39
555
原创 解决iview的modal弹窗里面echarts图表宽高不能自适应的问题
<div @click="newPopup">打开弹窗</div> <!-- 弹窗 --> <Modal v-model="newPopup" :mask-closable="false" :scrollable="true" :transfer="false" class="accept-modal-common" > <tem
2021-08-27 15:35:03
768
原创 基于echarts的柱状堆积图和折线图的实现
var carbonOption = { color: ['#3bc4fd', '#c3a1f9', '#e5984b', '#23c85a', '#fb7d80', '#62b2b7','#c19e08','#fb8137'], legend: { data: ['电力', '钢铁', '造纸', '电网', '化工', '建材', '有色', '石化'], top: 'top', .
2021-08-19 19:10:44
450
原创 jquery实现全选功能
话不多说，直接上代码：html代码： <div class="item-box"> <div class="item-title"> <div class="titleBox"> <span>行业</span> </d
2021-08-19 19:06:16
300
原创 vue页面实现tab切换并渲染两种状态时的图片
html代码： <ul class="dataCon_tab"> <li v-for="(item, index) in tabList" :key="index" :class="tabCurrentIndex === index ? 'active' : ''" @click="tabOnClickTab(index)" > <img :src="
2021-08-05 18:26:55
461
原创 v-for循环嵌套
html代码：<div class="cardWrap marginBottom"> <div v-for="(item, index) in catalogList" :key="index" class="cardItem" > <div class="labelTitle"> <i class="icon"></
2021-08-04 18:24:46
1297
原创 vue页面实现锚点定位
html代码： <div class="loggincao-show" @scroll="scrollEvent"> /****目录部分***/ <ul class="titless"> <li v-for="(titleItems,index) in titleList" :key="index" :class="titleOnIndex === index ? 'active' : ''" @click="jump(index)">{{
2021-08-04 18:12:02
1200
原创 双坐标轴echarts
var featureOption = { tooltip: { trigger: 'axis', confine: true, axisPointer: { type: 'line', lineStyle: { color: '#fda797', type: 'dashed' } } }, grid: { top: '18%', left: '8%', right: '8
2021-07-22 11:49:45
1428
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人