自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(103)
  • 收藏
  • 关注

原创 win7台式机解决插入耳机没有声音以及显示麦克风未插入的解决方法

win7台式机解决插入耳机没有声音以及扬声器显示未插入的解决方法

2022-09-28 08:40:21 1950 1

原创 前端菜鸟从入门到放弃

最近收到很多小伙伴的私信,遗憾的告诉大家我已于2022年3月4号离职,并且之后没再从事前端开发工作,现在就职于一家网络公司,但是没干技术相关的事情,如果后续能够接触到技术方面的问题,会持续更新的,感谢大家的支持。也想告诉许多新入行的前端小伙伴,当你感觉到困难时,再坚持坚持,熬过去了也就那么回事,不要学我哦!...

2022-07-01 10:24:56 590 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 2711 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 1568

原创 微信小程序数组遍历方法之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 4346

原创 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 562

原创 微信小程序前端电话号码脱敏展示

<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 1570

原创 css实现实心三角形

示例如下:<view class="triangle"><!-- 用伪类实现向上的箭头 --> <view class="word desc1">我爱学习</view> <!-- 用伪类实现向下的箭头 --> <view class="word desc2">我爱工作</view> <!-- 用伪类实现向左的箭头 --> <view class="word desc3">我爱生活<

2021-11-26 10:57:16 734

原创 微信小程序下拉触底分页功能实现

初始数据: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 444

原创 微信小程序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 3841

原创 微信小程序之加载更多(分页加载)实例

1.业务需求:列表滚动到底部时,继续往上拉,加载更多内容2.必传参数:(1)page: 1 //第几次加载(2)limit: 5//每次加载的显示数据条数(3)total: null //需要返回数据的个数3.其他参数:根据接口的传所需参数4.实现原理:当第一次访问接口时,传递三个必备参数和其他参数(需要搜索的字符串)给后台,后台返回第一次数据过来。在请求成功的的回调函数中,判断返回的数据是否>0,是,则取出数据,渲染视图层,并把“上拉加载”显示在列表底部;否,则没有数据可取,并把“没

2021-11-19 14:27:14 2107 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 411

原创 如何把一段逗号分割的字符串转换成一个数组?

后端小伙伴传给我的数据格式为而我前端是一个数组处理方法就是用split这样就能像数组一样正常显示了

2021-11-01 10:53:25 219

原创 mac版vpn连接错误解决

错误描述:创建一个文件sudo vim /etc/ppp/options然后在文件中输入:plugin L2TP.pppl2tpnoipsec保存退出之后,再连接就可以了

2021-10-29 10:46:15 8665 1

原创 升级开发者工具后调试器Storage和AppData目录找不见解决方法

1.调试-打开调试目录-插件目录2.将inspector文件夹删除,在重启一下微信开发者工具就好了

2021-10-23 14:27:57 653

原创 微信小程序字符串截取方法

后端大佬传给我的数据格式为: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 2174

原创 微信小程序手写弹窗

我要实现的效果是如果有档案详情,跳到详情页面,如果没有,则弹框提示:<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 443

原创 微信小程序页面跳转方式

今天我先来记录一下一个分包下的页面之间的跳转第一种方式:如下代码所示为一个双层嵌套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 501

原创 小程序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 8097

原创 商家信息展示模板开发

<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 156

原创 微信小程序手写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 1146 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 2545

原创 微信小程序中实现列表渲染(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 2270

原创 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 801

原创 谷歌浏览器点击网页任何一段文字都会出现光标问题解决

今天闹了一个乌龙,在我们开发的网页上,点击任何一段文字都会出现一个光标,最开始我以为是我css那个属性设置的问题,搞了好久才发现是浏览器设置的问题!!!,害得大佬头发又掉了几根,实在不好意思呢,哈哈哈,那怎么让那个讨厌的光标消失呢,很简单,关闭 使用文本光标浏览网页路径(chrome系的浏览器):设置>高级>无障碍>使用文本光标浏览网页...

2021-09-28 19:39:39 9318 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 2585 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 2460 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 534

原创 echarts图表坐标轴文字换行显示

var handleTimeOption = { color: ['#ED5565', '#FFCE54', '#5D9CEC'], tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, legend: { textStyle: { color: '#FFFFFF' // 图例

2021-09-08 20:19:56 5146

原创 动态获取表格高度

<div ref="tableBox" class="contentShow" style="height:100%"> <Table class="data-c" :columns="leftDataColumns" :data="leftData" :height="tableHeight" ></Table&gt.

2021-09-06 09:59:11 465

原创 使用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 1397

原创 基于echarts实现的平滑曲线图

option = { color: ['#FF9B9A', '#FFD097', '#5FD77E', '#72E1FF', '#A886FF', '#56ABFF'], tooltip: { trigger: 'axis' }, legend: { data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'] }, grid: { ...

2021-09-01 20:43:22 2098 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 537

原创 解决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 747

原创 基于echarts的柱状堆积图和折线图的实现

var carbonOption = { color: ['#3bc4fd', '#c3a1f9', '#e5984b', '#23c85a', '#fb7d80', '#62b2b7','#c19e08','#fb8137'], legend: { data: ['电力', '钢铁', '造纸', '电网', '化工', '建材', '有色', '石化'], top: 'top', .

2021-08-19 19:10:44 429

原创 jquery实现全选功能

话不多说,直接上代码:html代码: <div class="item-box"> <div class="item-title"> <div class="titleBox"> <span>行业</span> </d

2021-08-19 19:06:16 284

原创 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 445

原创 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 1281

原创 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 1172

原创 双坐标轴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 1413

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除