summer_my_sunshine-优快云博客

工具：wps1.首先一般人都是没有安装VBA宏插件的，此时我们就需要先下载并安装一个wps VBA宏插件，安装成功后;（直接百度搜索下载并安装即可，网上很多，示例如下）安装插件成功后，需要关闭wps再打开，就可以看到宏已经安装成功；2.安装VBA插件成功后，按住ALT+F11，在出现的界面点击工具栏插入》模块；3.在出现的弹窗粘贴下面代码段；Sub copybat() Dim i, j, k, m, r As Integer Dim n, tota...

2021-11-04 18:14:21 4018 2

原创微信小程序适配iphoneX，XR，12的底部安全区域（底部小黑条）

问题描述：在项目页面开发过程中，有些页面的按钮是需要固定在页面底部的（比如电商项目的确认订单页）；如果直接设置bottom:0，那么在iphonex，xr，12等机型，就会出现下面左图的问题，按钮区域距离底部太近了，用户体验就会很差，按钮也不好点击。解决思路：为了适配所有的手机机型，我们需要获取到底部小黑条的高度，给固定在底部的view设置padding-bottom，增加高度；（有些手机默认是没有底部这个区域的，没有的话padding-bottom就设置为0）解决方法：1.首先，..

2021-08-03 15:47:41 7481 4

原创简述微信小程序this.setData({a:1}) 与 this.data.a=1的区别

在微信小程序里面，通过//数据绑定与更新this.setData({ a:1})与// 数据绑定this.data.a = 1这两种方式都可以改变a的值，但是他们本质的区别就是setData会更新wxml前端页面绑定的数据信息，但是this.data.a = 1则不会。所以什么时候使用setData，什么时候使用数据赋值this.data.a = 1呢？很简单，在需要更新前端页面数据的时候，必须使用setData；而只是想修改变量的值，无关页面的数据绑定，..

2021-07-30 17:52:23 444 1

原创微信小程序回填函数this指向问题的解决方法

onLoad (options) { wx.showModal({ success(){ console.log(this)//undefined this.setData({ postList }) } }) }如上述代码，直接在回填函数里面写this.setData是会报错的，原因是此时在回填函数里面this返回的值是undefined；解决方案有2种：1.使用that指代thi.

2021-07-30 17:38:39 598

原创微信小程序多页面共用一个数据globalData，并及时同步更新各页面的数据的做法

使用场景：比如有A、B、C 三个页面都有收货地址这么一个数据，这个收货地址的数据源是一样的，而这3个页面都可以独立修改收货地址。在其中一个页面修改收货地址后，另外两个页面的收货地址数据也要同步更新。因为小程序里globalDta存储的是全局对象，多个页面使用到的数据我们就放到这里面了。1.需要先在app.js里定义全局变量：App({ globalData: { //收货地址 receivingAddress:{ latitude:23.12463, //纬度

2021-07-21 15:03:13 7343

原创微信小程序实现自定义导航菜单搜索栏

先附上效果图，要达到的效果就是如图所示，把原型的导航菜单去掉，换成对应的搜索栏。其实还是做法还是比较简单，首先讲一下实现的原理（原理明白实现起来就容易了）： 1.先隐藏微信小程序自带的导航菜单； 2.自定义导航菜单样式，并设置固定定位于顶部；接下来讲实现的具体步骤并附上代码：1.先隐藏微信自带的导航菜单，在页面custom.json文件加上自定义导航栏的代码段（在单独设置的页面加，不要在app.json文件加，否则会影响全部的页面），如下：{ ...

2021-07-16 15:49:21 5276

转载微信小程序如何使用阿里巴巴字体图标iconfont？

1.从阿里巴巴字体图标库网站下载iconfont字体文件；2.打开Transfonter字体转换网站，需要将刚刚下载的iconfont文件里面的ttf文件转换成base64位编码的文件；步骤：上传ttf文件→勾选Base64 encode→再下载文件；3.经过刚刚2个步骤，会得到2个文件夹： ①找到第2个步骤所得的文件夹里面的stylesheet.css文件，复制里面的内容粘贴到app.wxss文件； ②找到第1...

2021-07-15 18:10:23 2090

原创微信小程序component的用法

1.先在根目录底下创建一个components文件夹，再在components文件夹底下创建一个组件文件夹及component，如我的组件文件夹取名product-popup，指的是商品规格弹窗；2.接下来写component父子组件传参的用法；component子组件：product-popup.wxml<view wx:if="{{isShow}}"> <view bindtap="close">关闭</view></vi...

2021-06-30 17:22:02 6776 4

转载 ES6常用数据处理方法

1. forEach()接收一个方法，该方法可传入三个参数，第一个为数组的一个元素，第二位为该元素的下标，第三个为原数组。遍历数组并使用传入参数方法，无返回值。除非循环结束或报错终止，否则forEach方法无法跳出循环。let array = [1,2,3,4];array.forEach((item, index, array) => {　　console.log(item);});forEach会遍历数组, 没有返回值, 不允许在循环体内写return, 不会改变原来数组的

2021-05-05 23:25:07 1211

原创 VUE过滤器filter的用法

比如有时候我们想让某个数值，保留一位小数展示，就可以使用过滤器，超级方便，用法如下：第1步，定义过滤器filters：<script>export default { name: 'SupplierDetailPopup', data () { return{ distance: 5 } } filters: { // 保留一位小数 keepOnePoint (value) { const tempVal

2021-04-29 17:22:53 169

原创 vue 替换路由地址参数（动态修改路由参数）

在项目中，比如进入我的订单页面，订单页面有不同的几个菜单，如：待付款、待发货、待收货、待收货等；我们想要实现从不同的菜单点击进入订单详情页，再返回订单列表的时候，还是定位在之前对应的菜单，这时候就需要用到替换路由参数。我们可以在执行点击菜单的时候，就替换掉路由地址的参数，以便于之后返回该订单列表的时候，还是定位在对应的菜单项。替换路由地址参数，代码执行如下：this.$router.replace({ name: 'Orders', params: { tabId: index } })

2021-04-26 17:29:06 15890

原创移动端下拉刷新时报错[Intervention] Unable to preventDefault inside passive event listener due to target being

移动端项目在下拉刷新时，报错[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See <URL>解决办法：在style全局样式添加* {touch-action: pan-y;}， pan-y表示启用单指垂直平移手势(上下滑动事件)。* { touch-action: pan-y;}...

2021-04-26 16:58:38 217

原创 vue-devtools的安装方法

1.到github下载（注意有时候会下载不了，我也是试过了好多次，才终于下载成功，而且下载的时候速度也比较慢）：git clone https://github.com/vuejs/vue-devtools2.下载完成后，进入vue-devtools目录，并切换分支：cd vue-devtools可看到当前的分支显示为dev分支，接着切换到master主分支：git checkout master执行完后可看到当前已切换至master分支；3.安装依赖包：npm in

2020-11-17 22:30:28 281 1

原创 vue项目使用better-scroll实现移动端上拉加载更多、下拉刷新效果，并进行封装处理

1.封装的组件 MyScrollMore.vue代码如下：<template> <div ref="wrapper"> <slot></slot> </div></template><script type="text/ecmascript-6">import BScroll from 'better-scroll'export de

2020-06-17 19:40:40 768

原创清除input在谷歌浏览器下的默认背景色

//清楚input在浏览器下的背景色input:-webkit-autofill { transition:background-color 5000s ease-in-out 0s;}

2020-05-27 14:45:49 559

原创 vue项目中如何使用字体图标，简单清晰明了！

1.登录阿里巴巴图标库官网，创建一个自己的项目，并将对应的svg图片添加或上传到对应的项目中，如下图所示：2.点击【下载至本地】按钮，将文件夹下载下来；3.在项目中src/assets目录下创建一个文件夹iconfont，将第二步中下载下来的文件粘贴到iconfont文件夹去（注意只需要引入对应的样式及图标字体即可，大家也可根据自己项目的使用情况引入对应的文件）：4.在main.js中引入字体图标样式：import './assets/iconfont/iconfont.cs.

2020-05-26 19:05:17 628

转载 vue-cli3.0项目将px转换成rem，已适配移动端页面，超好使！最后的步骤才是最重要的！

1.安装插件postcss-plugin-px2rem；npm i postcss-plugin-px2rem --save -dev2.在vue.config.js中配置。这里需要说明一点，网上搜的一堆教程都强调应该增加remUnit来设置rem的计算标准。但是其实在新版后，这个值换成了rootValue这个。例如你设计稿为750的宽度标准，那么这里的值设置为75则可。module.exports = { //px转rem的配置（postcss-plugin-px2r.

2020-05-25 17:04:27 1031

原创 element-ui树形表格实现多层级嵌套，原来这么简单！

多层级效果图，点击自动收缩：话不多说，附上代码，此次代码示例全部为静态数据；1.表格数据如下图 <el-table :data="tableData1" style="width: 100%" row-key="id" :tree-props="{children: 'children', hasChildren: 'hasChildren'}"> <el-table-column prop

2020-05-25 16:12:24 13380 3

原创 vue项目中如何使用svg图片，超级简单粗暴的方法！（我的是vue-cli 3.0，亲测有效）

1.安装插件npm i vue-svg-icon -D2.在main.js文件中，引入import Vue from from 'vue'import Icon from 'vue-svg-icon/Icon.vue' //引入svg插件 Vue.component('icon', Icon) //注册svg插件3.将svg文件放到 src/svg 目录下（此目录暂时不能设置）4.在对应需要用到svg的组件中，直接使用（name属性的值为svg文件的文件名）<ico

2020-05-25 11:36:47 3226

原创 IOS中移动开发input弹出输入法后position:fixed;失效的问题解决

点击input时：focus事件触发,将fixed布局的元素改为absolute,使元素不再浮在屏幕上;document.getElementsByClassName('product-content')[0].style.position = 'absolute'失去焦点时：blur事件触发,再改为fixed布局,还原即可。document.getElementsByClassN...

2020-03-24 11:29:46 411

转载 VUE项目axios请求时，显示loading

1.在src目录下的main.js文件中，引入：import axios from 'axios';import Mint from 'mint-ui';Vue.use(Mint);2.axios发起请求时，显示loading：// axios发起请求时，显示loadingaxios.interceptors.request.use((config) => { Mi...

2020-01-13 17:21:43 2615

原创微信小程序template模板的使用

一、新建一个模板文件template，里面创建template.wxml和template.wxss文件；1.template.wxml文件外层要加上template标签，还有加上name名称：<template name="postItem"> <view class="post-container"> <view class="post-au...

2019-12-28 10:56:17 386

原创 webstorm修改文件，webpack-dev-server不会自动编译刷新

在setting里面设置一下，真的就解决了！原因应该是因为webstorm的保存，会在临时文件夹中创建一个文件用来保存（好像触发实际文件的变更），所以我们要在setting中勾掉这个设置：...

2019-12-04 22:19:20 539 1

原创使用js重写confirm弹窗，支持回调函数，弹窗出现时页面不可滑动/滚动

因项目需要，自己网上找了一些代码然后再完善了一些，增加了弹窗出现时不可滑动/滚动，可自定义弹窗的标题、内容、按钮文字等，无需jquery，引入jquery是为了测试，代码如下：<!DOCTYPE html><head> <meta charset="utf-8"> <meta name="viewport" content="wi...

2019-11-05 14:37:15 2456

原创 vue项目中，使用mint-ui的picker实现省市区三级联动，并且编辑时选中默认值（封装成独立的组件）

具体代码如下：1.首先创建一个provinceData.js文件，用于存储省市区的数据，provinceData.js内容如下；// 所有省市区数据const listAddress = [ { 'city': [{ 'area': ['东城区', '西城区', '崇文区', '宣武区', '朝阳区', '丰台区', '石景山区', '海淀...

2019-09-02 22:13:55 1212 1

原创 vue项目中，在watch监听函数里监听多个参数的做法

比如想要监听一个对象里面的多个值变化，然后去执行函数，则需要配合computed来使用：1.定义的data如下：data(){ return { getParm : { keyWord : this.$route.query.searchVal ||'', page : 1, proId : this.$route.qu...

2019-08-06 19:42:06 4786

原创在做VUE项目时遇到的问题及解决办法：使用路由跳转页面时传参的两种方法，以及这两种方法的综合使用

一、使用path和query，使用该方式跳转的页面在路径中会携带query中的参数，这种方式重新加载页面后参数依然存在；1.通过router-link进行跳转：<router-link to="{path:'/search-list-all',query:{searchVal:searchInfo}}"></router-link>2.使用$router方式跳...

2019-08-06 12:12:40 1171 1

原创在做VUE项目时遇到的问题及解决办法：点击不同的标题加载不同的组件，使用路由去切换组件时，第一次进入这个页面没有默认显示的子组件

如上图所示，点击【免费注册】按钮，进入到注册页面，我在注册页面区分个人账户和企业账户，点击对应的标题显示对应的子组件，但是发现刚进入页面的时候，是图2那样子，并没有默认选中显示的子组件。原来是因为定义注册页的路由时缺少重定向redirect指向默认的子组件。【免费注册】按钮定义的路由：<router-link to="/register" class="login-other-...

2019-08-02 00:01:05 1598

原创在做VUE项目时遇到的问题及解决办法：创建的vue项目找不到文件.babelrc，无法做到按需加载mint-ui组件库

一、在使用vue-cli创建项目时，其实安装vue-cli有两种方法：1.使用命令： npm install -g vue-cli2.使用命令：npm install -g @vue/cli第一种安装vue-cli的方法是搜索出来的很多人常用的方法，第二种方法我是在慕课网上3小时速成 Vue2.x 核心技术这个视频学到的。我在安装过程中发现，这两种安装方法是互斥的，即使用命令安装后，只...

2019-08-01 22:57:51 11571 6

原创解决在chrome浏览器下 input的autocomplete="off"失效，导致的自动填充问题

1.将密码框的type写成text；2.添加onfocus="this.type='password'"，聚焦后将当前输入框类型改为password，这样子在页面加载时就不会自动填充（不过如果进入页面就先点击密码框还是会自动填充，但是输入账号后再输入密码则不会）；3.如下：<input type="text" class="test" id="test" placeholder="请输...

2019-06-13 18:29:42 1819

转载 JDK的安装与环境变量配置图文教程

工具/原料JDK1.7.0WIN7方法/步骤1、安装JDK 选择安装目录安装过程中会出现两次安装提示。第一次是安装 jdk ，第二次是安装 jre 。建议两个都安装在同一个java文件夹中的不同文件夹中。（不能都安装在java文件夹的根目录下，jdk和jre安装在同一文件夹会出错）如下图所示2、（1）安装jdk 随意选择目录只需把默认安装目录 \java ...

2019-06-11 16:54:10 254

转载修改滚动条样式及修改placeholder样式

1.修改滚动条样式： .con{ width: 200px; height: 200px; border: 1px solid #ddd; overflow-y: scroll; margin: 120px auto...

2019-03-28 15:19:43 381

jquery分页插件

空空如也