- 博客(143)
- 收藏
- 关注
RSS订阅原创 vue项目中通过v-for循环动态添加后台返回的事件
一.现有一种业务需求，前端的某个元素添加点击事件，但事件是后台返回的（不确定），需要动态添加，下面是具体思路：1.假定后台返回数据为如下格式：list: [ { name: '李寻欢', kungFu: '小李飞刀', method: "foo('林诗音')" }, { name: '楚留香', kungFu: '踏雪无痕', method: "foo1('夜姬')" }, {
2022-01-27 12:02:12
1135
原创 Mac上NVM 安装与使用教程
Mac上NVM 安装与使用教程什么是NVM?安装NVMNVM常用的命令什么是NVM?nvm全名node.js version management，它是一种nodejs的一种版本管理工具，用于管理或者切换自己电脑上的nodeb版本安装NVM方法1：brew install nvm ，采用该方法通常会很慢方法2：curl-o-https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh|bash安装完成后，输入nvm,就
2022-01-27 11:48:34
4101
1
原创 Mac如何连接远程服务器
确认你的电脑打开了远程连接的许可：选择系统偏好设置->选择共享->点击远程登录不然会出现以下报错：ssh: connect to host localhost port 22: Connection refused使用密码连接服务器ssh 服务器用户名(root)@服务器的ip地址 -p 端口号回车输入密码，就ok了使用’rsa‘ 私钥文件连接服务器首先对Mac来说，正确的道路应该是对方针对Mac生成适配的“rsa”私钥文件和“rsa.pub”公钥文件，然后对方先把公钥
2022-01-27 11:23:56
10567
原创 【webpack5】入门打卡
webpack是一个打包模块化javascript的工具，它会从入口出发，识别出源码中的模块化导入语句，递归的找出入口文件的所有依赖，将入口和其所有的依赖打包到一个单独的文件中，是工程化，自动化思想在前端开发中的提现。
2022-01-08 12:14:56
690
原创 代码管理平台云效Codeup使用以及构建流水线
代码托管平台很多，比如 GitHub，GitLab, 比较火，但是毕竟是国外的，GitHub 2018年被Microsoft以75亿美元收购，已与政治挂钩，已限制了许多受美国制裁的国家的开发者账户，未来不排除对中国的开发者限制的可能性。GitLab可以搭建到自己的服务器上，但是对于新手来说有难度。国内的代码托管平台也有很多比如阿里云-云效Codeup、百度效率云、华为开源平台、码云、码市、coding等，有一些也没有用过，优缺点不做对比，但是个人优先推荐阿里云-云效Codeup，非常适合新手同样适合老鸟.
2021-12-17 10:37:08
5960
原创 小程序文本水平走马灯效果
<navigator url="/packages/pack-A/pages/sets/log/log" class='notice-wrap align-items' wx:if="{{sys_notice && appTheme.is_audit == 0 }}"> <icon class="marquee-icon"></icon> <view class="marquee-con align-items"> .
2021-12-14 20:33:06
155
原创 js时间日期
//获取上个月第一天和最后一天var nowdays = new Date();var year = nowdays.getFullYear();var month = nowdays.getMonth();if(month==0){ month = 12; year = year-1; }if(month<10){ month = '0'+month; } var myDate = new Date(year,month,0); va
2021-11-29 10:12:01
576
原创 js的几种常用排序方法
冒泡排序依次比较两个相邻的元素，如果前一个数比后一个数大时就交换位置，比较晚第一轮最后一个元素是最大的元素，所以就不需要在比较最后一个元素了var arr = [1, 2, 5, 7, 9, 22, 40]for(var i=0; i<arr.length-1; i++){ for(var j=0; j<arr.length-i-1; j++) { if (arr[j] > arr[j+1]) { var temp = arr[j]
2021-11-19 15:01:40
2455
转载 JS 监听浏览器标签页显示隐藏
APIdocument.hidden判断页面是否隐藏的布尔值。页面隐藏包括 页面在后台标签页中 或者 浏览器最小化document.visibilityState只读属性）, 返回document的可见性，4个值：1.hidden：文档处于背景标签页或者窗口处于最小化状态，或者操作系统正处于 ‘锁屏状态’2.visible：此页面在前景标签页中，并且窗口没有最小化3.prerender：页面在屏幕外执行预渲染处理 document.hidden 的值为 true4.unloaded：
2021-10-13 14:50:51
401
原创 vue sku没库存置灰
返回已有库存组合好的<template> <div class="shop"> <div>{{title}}</div> <div v-for="(item,index) in goodsTypeList" :key="item.id" class="shop-item"> <div class="item-name">{{item.name}}</div>.
2021-09-07 19:21:04
575
原创 微信小程序车辆品牌选择
格式比较类似于之前的城市选择，但是之前的城市选择格式有些太过繁琐了，然后看到了一篇比较好的处理方式，是采用节点查询的方法来找到左侧字母的定位，而且页面上的渲染也简单了很多页面的实现效果WXML<block wx:for="{{list}}"> <view class='letter' id="letter{{index}}">{{index}}</view> <view class='item' wx:for="{{item}}" wx:for-
2021-09-01 11:16:17
600
1
原创 微信小程序swiper组件切换+个人资料展示
这篇文章的主题就是swiper啦，不过swiper在真机上有个不好的点就是页面切换时会有闪烁回弹的感觉，不知道如何处理，希望有知道如何处理的小伙伴可以给出一些指导意见。那还是先来看看正常的切换吧，这篇主要是为了记录swiper的前后边距的使用。先看一下常用的一些属性这些属性还是比较常用的看一下演示效果WXML<view style="height:{{maxHeight}}px" class='page'><!-- 参数详见 https://developers.wei
2021-09-01 11:13:10
527
原创 微信小程序六位密码框的实现
项目中有需要提现输入的密码框，首先来看一下效果WXML<view class='password-input-box' style='margin-top:200rpx;'> <view class='input' bindtap='getFocus'> <view wx:for="{{Length}}" wx:key="item" class='input-content'> <input value="{{Value.lengt
2021-09-01 11:06:13
773
原创 小程序表格
实现效果1WXML<view class="table"> <view class="tr bg-w"> <view class="th">head1</view> <view class="th">head2</view> <view class="th ">head3</view> </view> <block wx:for="{{listDat
2021-09-01 11:03:38
98
原创 小程序城市选择
最近遇到了一个新的需求，就是在项目中添加城市选择，小程序的城市选择也不是什么难点，网上也有很多的demo，主要是数据格式的不同，总结了一下，基本上属于两种结构。大部分demo都是引入所有的城市，大家在选择测试的时候可能觉得并不方便，所有我把数据抽取了部分出来，大家尝试后可以再对所有城市的数据进行封装，在网络上搜索的话基本上分为两种数据格式，多数如下第一种所示，第二种是根据接口需要更改的格式，同时前端也会使用两种不同的数据格式去渲染。第一种 citys: [ { "A": [
2021-09-01 10:58:57
1365
原创 小程序模拟表格-可左右滑动
遇到一个需求，就是需要在一个页面进行多家商店的价格比价，所以就需要表格有左右滚动的效果，最终的效果如下图所示首先说一下数据，因为左侧是一个单独的列表，原本是从接口拿的数据，接口右侧返回的数据是按照左侧的列表数量对应返回的，所以内容方面大家可以根据自己的需要添加。然后再说一下这个页面的布局，虽然是一个表格，但是我是划分成两部分，左侧是固定的，左侧的最上面我放了一个空的view来占位，右侧是可滑动的，因为要求边框和每个view绝对的对齐，所以样式方面需要格外注意，右侧的数据列表如果缺少部分数据，是会影响
2021-09-01 10:51:28
578
1
原创 微信小程序px和rpx之间的转换
由于在微信小程序中，所有屏幕的宽度均为750rpx，因此可以进行如下转换：rpx转px:var px = rpx / 750 * wx.getSystemInfoSync().windowWidth;px转rpx:var rpx = px * 750 / wx.getSystemInfoSync().windowWidth;
2021-09-01 10:22:08
2512
原创 vue 组件开发到发布到npm全流程
前言在做前端开发的过程中，有很多重复的代码，尤其是vue项目，不同项目之间相互拷贝代码实在太麻烦了。这里研究一下，如何将自己的代码打包发布到npm，方便以后直接npm install 再次使用。账号准备发布到npm，是需要账号的，首先可以先去https://www.npmjs.com/去注册一个账号，注意记住用户名和密码。插件构建一：搭建vue项目封装vue的插件用webpack-simple比较合适，vue init webpack-simple 二：创建组件在src 目录下创建lib 文
2021-08-27 11:07:50
611
原创 手动封装on事件在Vue中的作用 防重复点击
以下代码实现的是“防重复点击”效果main.js中设置：Vue.prototype.$on = function (event, func) { let previous = 0 let newFunc = func if (event === 'click') { newFunc = function () { const now = new Date().getTime() if (previous + 1000 <= now) {
2021-08-17 11:29:14
135
原创 Less适配设备屏幕
//适配主流设备十几种@adapterDeviceList:750px,720px,640px,540px,480px,424px,414px,400px,384px,375px,360px,320px;//设计稿尺寸@psdWidth:750px;//预设基准值@baseFontSize:100px;//设备的种类@len:length(@adapterDeviceList);//适配函数.adapterMixin(@index) when ( @index > 0){ @me
2021-08-16 17:32:36
205
原创 Vue 自定义全局消息框组件
消息弹框组件，默认3秒后自动关闭，可设置info/success/warning/error类型Message.vue<template> <transition name="fade"> <div class="message" :class="type" v-if="visible"> <i class="icon-type iconfont" :class="'icon-'+type"></i> <
2021-08-16 17:27:05
394
原创 Vue 使用 axios 或者 vue-router 配置页面加载动画
以下介绍两种方法1.使用 axios 配置全局中当发生 ajax 请求时，显示一个加载动画，当 ajax 请求结束后，隐藏加载动画2.使用 Vue-router 实现当页面跳转时有一个加载动画方式一 配置 axios 实现加载动画第一步：在 App.vue 文件中添加你的加载动画组件 或者 HTML，因为加载动画是全局的，所以应该放在 App.vue ,下面示例中我用的是 mint-ui 里面的spinner,然后通过Vuex this.$store.state.loading 来控制，该加
2021-08-16 16:15:35
879
原创 vue监听浏览器返回
监听返回mounted () { if (window.history && window.history.pushState) { // 向历史记录中插入了当前页 history.pushState(null, null, document.URL); window.addEventListener('popstate', this.goBack, false); }},destroyed () { wind.
2021-08-16 15:58:51
233
原创 Vue3.x 前后端通信进行对所有请求和响应都进行AES加密（密文形式）附SHA1加密
无论是开发原生的APP还是webapp还是PC端的软件,只要是前后端分离的模式，就避免不了调用后端提供的接口来进行业务交互。网页或者app，只要抓下包就可以清楚的知道这个请求获取到的数据，这样的接口很容易造成数据泄露，爬虫工程师要抓你的数据简直轻而易举。因为之前公司的接口没有进行加密处理，导致数据泄露，现被要求项目所有的交互与响应都变为密文。如下图实现效果。代码安装crypto-jsnpm install crypto-js在根目录下的src创建util文件夹、文件夹下aes.js与r.
2021-08-16 15:37:41
1788
原创 vue3.x 二次封装axios
1.安装axios依赖npm i axios -S2.创建一个utils文件，和一个api文件，在前者下面创建一个request.js的文件。该文件中引入axiosimport axios from “axios”;3.开始操作： /** * 封装axios */import axios from 'axios' //引入axios的第三方插件import { Message} from 'element-ui' //按需引入ui插件import { config} fro
2021-08-04 22:37:41
918
转载 详解瀑布流布局的5种实现方式及object-fit
最近项目中需要处理与图片相关的布局，不得不说图片这玩意真想要得到完美的展示效果还真是要费些力气。因为图片的尺寸或者比例各不相同。所以想要不同尺寸的图片有好的显示效果，你就需要找到适合的方式。而且图片往往是不可或缺元素。毕竟一图胜千言，有时候图片能给带来非常好的效果。比如我们每天都会使用的表情包，它往往能够表达出我们无法用文字描述的信息，还比如我们经常在公众号里看到的漫画虽然短短几个字，但是却能够让我们看的不亦乐乎。当然如果我们做图片网站的，那图片的处理就是绕不开的话题了。因对图片的处理经验不多，所以就
2021-07-15 14:39:00
438
原创 小程序瀑布流布局
// list.wxml列表<import src ="/template/cardList/cardList2.wxml"/><block> <view id="left"> <view class="list-index list-index-{{plType}}" wx:for="{{ leftList }}" wx:key="key"> <navigator url="/pages/Main/pages/detail.
2021-07-15 14:24:36
787
1
原创 vue瀑布流布局
vue版如图：// 安装组件vue-waterfall2npn install vue-waterfall2 -S// main.js 注册使用组件import waterfall from 'vue-waterfall2'Vue.use(waterfall)// list.vue// 说明下：width/单个列表的宽度，gutterWidth/左列表距右侧的边距（博主这里的动态赋值操作可忽略，因为是为了做示例项目的全端适配）<template> <waterfall
2021-07-15 14:21:59
433
转载 JS中的几种循环和跳出方式
https://blog.csdn.net/u014399368/article/details/82862444
2021-05-12 17:30:04
676
1
原创 自定义小程序表格组件带多选功能
<!-- wxml分页组件 --><scroll-view scroll-x="{{false}}"> <view class="table {{border?'border':''}}"> <view class="th" > <view class="td {{item.type === 'checkbox'?'td-80':'td-200'}}" wx:for="{{cloumns}}" wx:key="index"&g
2021-04-13 22:06:56
325
原创 自定义小程序分页组件
<!-- wxml分页组件 --><view class="page_div"> <view class="page_sum">共{{pagetotal}}页 当前{{currentPage}}页</view> <view class="page_prev" bindtap="prevFn">上一页</view> <view class="page_number_div"> <view class="p
2021-04-13 22:03:27
339
原创 Koa2 百度富文本编辑器 ueditor 的 配置使用
一、 Ueditor 介绍UEditor 是由百度 web 前端研发部开发所见即所得富文本 web 编辑器，具有轻量，可定制， 注重用户体验等特点，开源基于 MIT 协议，允许自由使用和修改代码。官网：http://ueditor.baidu.com/第三方 sdk：http://ueditor.baidu.com/website/thirdproject.html二、 Koa 中使用 koa2-ueditor安装 Koa2 的 koa2-ueditor： npm install koa2-
2021-04-04 20:01:51
243
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人