- 博客(55)
- 收藏
- 关注
RSS订阅原创 uni-app app.vue中 onLaunch请求接口 异步导致首页取不到数据
但因为getOpenId方法是ajax异步的 所以首页显示了 可能getOpenId方法还没执行完，首页可能就会取不到openid。在首页中判断openid是否存在，不存在则定义一个app.globalData.loginCallback 回调方法。this.globalData.loginCallback则不需要在this.globalData中定义。注意：this.globalData是app.vue中的一个全局变量，直接在app.vue页面中定义的。目前我这边是使用了两种方法。
2023-04-21 13:45:34
1494
1
原创 el-date-picker的default-time和picker-options冲突
el-date-picker的default-time和picker-options冲突
2022-10-21 18:00:13
1147
原创 element ui el-select修改样式
el-select修改el-date-picker修改el-table修改el-dialog修改另外：要想只修改一部分的页面的话，封装这个组件的时候
2022-06-27 20:00:55
2570
1
原创 vue使用echarts饼图和柱状图
vue最后不要直接操作dom，所以我这里选择使用ref注意： 修改颜色的时候，最后不要使用透明，很容易鼠标悬浮后，就bar消失闪烁要带透明度就用rgba
2022-06-13 11:02:53
458
原创 el-select 默认选中
<el-form-item label="接收对象" prop="receiveObject"> <el-select placeholder="请选择接收对象" style="width: 100%" v-model="queryParam.receiveObject"> <el-option v-for="item in objectSelectOptions" :key="item.value" :label="item.l
2022-05-26 10:47:35
1761
原创 el-upload上传文件
<el-upload :disabled="addType===false" :action="url + '?p=' + this.ruleFormCode" class="upload-demo" :limit="1" list-type="picture" :file-list="fileList" :on-success="handleUpdate" :before-upload="handleBefore" :headers="headers">
2022-05-20 14:04:25
771
原创 el-pagination分页
<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryCondition.page" :page-sizes="[10, 20, 30, 40]" :page-size="queryCondition.limit" layout="total, sizes, prev, pager, next,..
2022-05-20 11:49:21
177
原创 el-option点击事件
<el-select v-model="queryAdd.teamId" placeholder="请选择班组名称" style="width: 100%;"> <el-option @click.native="handleSelectTeam(item)" v-for="item in teamOptions" :key="item.teamId" :label="item.teamName" :value="item.teamId">
2022-05-19 16:48:44
3582
原创 el-table中，后端返回0或1，渲染页面
<el-table-column align="center" label="在离场状态" width="100" prop="entryExitType"> <template slot-scope="scope"> {{ scope.row.entryExitType === '1' ? '在场' : '' }} {{ scope.row.entryExitType === '0' ? '离场' : '' }} </template>
2022-05-18 11:06:22
745
原创 el-table使用forEach将时间戳转换成YYYY-mm-dd
新建一个js文件export default { dateFormat(date, fmt = 'YYYY-mm-dd') { if(date == null){ return '' } if('number' == typeof date || 'string' == typeof date){ date = new Date(date * 1) } let ret; const opt = { "Y+": da
2022-05-18 11:02:09
588
原创 vue使用过滤器将时间戳格式化时间
使用moment插件格式化。如果写成方法的话，则每个页面都要写这个方法。所以还有一种，定义全局过滤器，将时间戳格式化在main.js中定义Vue.filter('dateFormat', (dateStr, pattern) => { if(dateStr) { return moment(Number(dateStr)).format(pattern) } else return ''})我这里做了一下判断，如果后端给的是null或者是空字符串，则页面显示是空字符串，这样就不会显示
2022-04-26 11:53:26
2039
原创 css实现悬浮
悬浮在底部width:100%position:fixed;bottom:0;但是这样下面列表多的话，最后一个列表会被挡住当然还有解决办法position: sticky;bottom: 0;效果：
2022-04-20 16:53:01
3067
原创 uni-app中使用moment
npm install moment --save在main.js中引入并挂载import moment from 'moment';Vue.prototype.$moment = moment;使用：YYYY-MM-DD转成时间戳this.$moment(YYYY-MM-DD).valueOf()时间戳转成YYYY-MM-DDthis.$moment(e).format('YYYY-MM-DD')注意：时间戳要number类型的！！如果后端给你的是字符串格式的。直接用字符串是转不
2022-04-20 09:34:46
7830
原创 uni.app中阻止事件冒泡的应用场景
需求是：点击这个卡片跳转到二级页面，点击工人数，跳转到另一个二级页面。这两个二级页面是不一样的就相当于点击父元素和子元素，跳转的二级页面是不同的；https://uniapp.dcloud.io/tutorial/vue-basics.html#eventhandler这里有详细的介绍但是我发现，在uni-app里面。我直接给<u-card>这个组件设置是不可以的。但是可以嵌套一个<view>标签中设置<view @click.stop="looks"> .
2022-04-19 15:16:38
436
原创 vue中this.$nextTick()的用法
将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它，然后等待DOM更新。我在开发的过程中，有一个页面，需要根据不同角色去判断显示页面。相当于两个页面，根据不同角色去判断显示。但是我一开始把两个页面封装成了两个组件。当调用接口的时候。就只能使用created()去调用接口。但是这个页面有二级页面。在二级页面修改状态之后，返回一级页面的时候。一级页面需要重新请求接口。这时就很尴尬，用created()只有页面加载第一次的时候，才会调用，我从二级页面返回一级页面时，并不会重新调用接口。。。如果
2022-04-18 18:29:13
1101
原创 element ui使用日期选择器组件。开始时间和结束时间分开传递给后端
<el-date-picker v-model="timeFrom" @change="setTime" :clearable="false" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker&g.
2022-04-14 17:29:06
4640
原创 Invalid prop: custom validator check failed for prop “pagination“.
额。。因为后端返回的问题。前端这个组件已经给写死了正常后端接口返回是这样的报错就是因为这个接口，后端返回的没有list。所以让后端把接口改一下就可以了。
2022-04-02 16:54:44
1771
原创 antd中表格加bordered后出现的一个空列表问题
<s-table bordered ref="irrigationWaterTable" size="default" :rowKey="(record) => record.id" :columns="columns" :data="loadData" showPagination="auto" :pagination="{ showTotal: (total) =.
2022-03-30 15:18:47
581
原创 uview2.0 uni-forms校验失败提示信息语
<uni-forms :rules="loginRules" :modelValue="loginFrom" validateTrigger="bind"> <uni-forms-item label="账号" name="account"> <uni-easyinput type="text" v-model="loginFrom.account" placeholder="请输入账号" /> </uni-forms-item> &
2021-12-02 17:02:45
1812
原创 uni-app使用md5加密
npm install js-md5 -D出现这个就表示安装成功了这main.js中引入，并挂载import md5 from 'js-md5'Vue.prototype.$md5 = md5在页面或者组件中调用this.$md5('')
2021-11-23 16:38:48
4399
原创 uni-app修改checkout默认样式
//checkbox的样式 checkbox .uni-checkbox-input{ border-radius: 50px !important; transform: scale(0.7) !important; border-color: rgb(233, 180, 97) !important; /* background-color: rgb(233, 180, 97) !important; */ color: rgb(233, 180, 97) !important;
2021-11-05 09:56:15
339
原创 uni-app开发h5点击跳转到h5，微信小程序跳转到h5
<image class="tvcBu" @click="toUrl" mode="aspectFit" src="../../static/img/button.png" ></image>点击跳转，并传递urlexport default { data() { return { url: '' } }, methods: { toUrl() { uni.navigateTo({ url: '../
2021-10-19 16:55:58
2336
原创 微信小程序swiper，修改滑动动画时长和点击进去默认显示的页面
点击不同的图片，进入swiper页面，显示到对应的item上我使用了current属性第一个页面向第二个页面传递，对应的id<image class="cxyr-icon {{big_icon == 1?'big':''}}" data-id="1" src="{{chen_icon}}" bindtap="toDetail"></image>toDetail: function (e) { var id = e.currentTarget.dataset.id;
2021-10-18 15:25:36
2333
原创 微信小程序，视频播放，隐藏默认播放控件
微信原生写<video src="" autoplay="{{true}}" controls="{{false}}" loop="{{true}}" enable-progress-gesture="{{false}}" object-fit="cover"></video>一定要加两个花括号！！！不然不生效！！！！用uni-app的话<video id="tvcVideo" class="tvcVideo" src="" loop :auto
2021-10-15 15:16:53
941
原创 微信小程序原生，引入animated动画库
https://blog.csdn.net/swx999/article/details/116662852
2021-10-14 14:27:42
527
原创 uni-app swiper组件，修改指示点位置
/deep/ .uni-swiper-dots{ position: absolute; bottom: 110rpx!important; }
2021-10-14 14:19:59
3420
2
原创 uni-app开发h5，用微信浏览器打开，视频自动播放
https://blog.csdn.net/qq591840685/article/details/109032295?utm_medium=distribute.wap_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-4.wap_blog_relevant_pic&depth_1-utm_source=distribute.wap_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefa
2021-10-14 14:16:49
2387
原创 uni-app开发h5,去掉顶部导航栏
单页面去掉导航栏在pages.json中添加"navigationStyle":"custom", "app-plus":{ "titleView":false }全局去掉导航栏
2021-10-11 16:39:34
1680
原创 uni-app开发h5，打开h5自动播放视频
使用标签，加上autoplay属性并没有用出于用户体验，节省流量的考虑，移动端禁止自动播放；使用过模拟用户点击操作，等等方法，并没有用。参考https://www.mzwu.com/article.asp?id=4411优酷页面打开后视频不自动播放，需用户点击按钮才开始播放，B站解决方法和优酷一样，爱奇艺页面打开后视频自动开始播放，但声音需用户手工开启，所以暂时不要去想什么hack的方法了，有办法这些大厂早用了，还是老老实实引导用户手工点一下吧。所以，加上静音播放属性muted，就可以打开h5自
2021-10-11 16:32:30
3558
2
原创 vue使用$refs动态修改style，设置样式
在h5中，可以直接使用this.$refs.indexChart.$el.style.display='none'但是我打包运行成微信小程序，就会报错TypeError: Cannot read property ‘$el’ of undefined目前解决办法，暂时没找到这几个是我百度尝试使用$refs改变样式，都没有生效，所以h5推荐使用第一种！！！！简单粗暴！！！！！// that.$refs.indexChart.setAttribute("class","vi")//that.$r
2021-10-10 17:13:50
19164
2
原创 微信小程序背景音乐，iOS静音键也可以播放
看官方文档使用wx.getBackgroundAudioManager()接口，obeyMuteSwitch属性可以设置。但是上个开发使用的是wx.createInnerAudioContext()用wx.getBackgroundAudioManager()时，在模拟器调试不支持。所以还是用了wx.createInnerAudioContext()但是看官方文档上，没有obeyMuteSwitch这个属性。。我就试了一下，结果是可以的const music = wx.createInnerAudi
2021-09-26 18:16:26
729
原创 微信小程序scroll-view实现swiper
最近公司的一个需求，说swiper做的轮播图不流畅，所以我用了scroll-view实现下<scroll-view enhanced="true" bindscroll="scroll" scroll-x show-scrollbar scroll-into-view="{{toIndex}}" style="width: 100%; white-space: nowrap; height: 100%; padding-top: 10%;" > <block wx:for
2021-09-26 17:57:28
611
原创 uni-app引入Animate.css动画库
1.下载css文件下载地址. http://www.haorooms.com/uploads/example/Animatecss/我尝试用 npm install animate.css --save 尝试了之后，发现好像没用，后面直接下载Animate.css文件，放在项目中，可以正常使用2.在app.vue中引入@import url("./common/animate.css’");3.使用An animated elementAn animated element我发现用hov
2021-09-18 13:12:04
901
原创 Vue项目中，引用图表echarts.js
vue项目安装和配置在这里就不说了项目配置好后npm install echarts --save安装好之后，会出现echarts版本号在main.js中引入import * as echarts from ‘echarts’;// 基于准备好的dom，初始化echarts实例Vue.prototype.$echarts = echarts;引入好之后，在vue文件中 运行之后，就会显示出来了...
2021-09-10 01:46:49
407
原创 配置axios拦截器一些坑(一）
之前写过一个vue的路由守卫和axios的拦截器，但是会有一些报错，一直没解决，今天解决了，记录一下报错版本报错信息配置请求拦截器的时候，添加请求头时，不能直接进行修改，不然就会修改不成功，而且一直报错，所以复制一个对象，通过复制的对象进行修改。这样就可以了，奥利给！！！...
2021-09-08 00:33:44
501
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人