图片无限轮播
用在官网中的多张图片无限滚动播放的效果
dom结构要注意的是wrapper代表的展示部分,宽度1200px(根据设计来),inner是多张图片的实际宽度,图片要多来一份,因为图片是往左一直移动的。当第6张图片也移动出屏幕时后面要接上第一张图片,才能有无限循环的效果。
1234567891011121314151617<div class="life-wrapper"> <div class="life-wrapper-inner" ref="wrapperInner"> <img src="@/assets/partnerHome/shenghuo1.png" class="shenghuo-item" alt=""> <img src="@/assets/partnerHome/shenghuo2.png" class="shenghuo-item" ...
npm发布一个自己的包
做个简单的实例演示如何发布自己的npm包
1.创建一个包1.1 npm init创建一个项目根据提示可以配置入口文件为index.js(默认),配置git地址,等等,具体步骤略配置完生成一个package.json
1.2 在index.js编写自己的代码这里以一个转化时间戳为时间格式的字符串为例
123export function formatTime(time, format) { // 代码略}
1.3 项目创建完毕项目中必须有index.js及package.json,有这两个文件这个项目的雏形就有了。
2.发布这个包2.1 申请一个npm账号可以在npm官网创建账号 npm官网地址,或用命令npm adduser创建
2.2 黑窗口登录账号npm login
发布之前必须登录不然发到哪里? npm whoami 命令可以检验是否已经登录,如果已经登录无需重复登录。
2.3 黑窗口发布项目npm publish
完毕,到此处事情已经完成了。可以登陆官网看自己发的包
3.使用自己的npm包本人只试了在vue项目中如何使用自己的包
3.1 安装12n ...
H5微信内分享自定义标题图标
以下两图一个是默认的分享样式,一个是自定义的分享样式
在微信环境中分享一个H5,分享出来的卡片默认是没有文案和图标的。若想添加文案和图标需要借助微信的js-sdk
1.公众号的设置首先得有一个公众号,这个是前提。微信内分享的这个H5页面可以和公众号没有关系,但是自定义图标的这个功能相当于借助了公众号的能力。
1.1登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”按照提示下载校验文件放置到H5的域名根目录下,可在浏览器访问校验文件验证成功与否。
2.引入js文件<script></script>标签引入js文件即可
3.通过config接口注入权限验证配置主要参照微信js-sdk说明文档
12345678wx.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: '', // 必填,公众号的唯一标识 timestamp: , // 必填, ...
数据结构中的堆、栈、堆栈、队列
堆:在程序运行时,而不是在程序编译时,申请某个大小的内存空间。堆是程序程序运行时申请的内存空间,而栈只是一种使用堆的方法。
栈:也叫堆栈,先进后出,有栈底和栈顶的概念。
队列:一种特殊的线性表,只允许在表的前端进行删除,在表的后端进行插入。建立队列结构必须为其静态分配或动态申请一片连续的存储空间,并设置两个指针进行管理,一个对头指针front,一个对尾指针rear。先进先出。不会内存溢出。
参考文章:https://www.cnblogs.com/guoxiaoyan/p/8664150.html
h5调用原生app的方法
分安卓和IOS,安卓可以直接调用,iso需要通过桥来调用
12345678910111213var u = navigator.userAgent;if(u.indexOf('Android') > -1 || u.indexOf('Adr') > -1){ //android终端 let appData = window.android.原生方法(参数); if (appData) {//返回值 }}else if(!!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)){ //ios终端 utils.setupWebViewJavascriptBridge((bridge)=>{ bridge.callHandler('原生方法',参数, function (response) { // response返回值 }); })}
ISO的 ...
input输入框限制输入数字
利用input方法限制输入框只能输入限制范围内的数字
123456789101112<!-- 只能输入数字 --><el-input v-model="abc" @input="abc=abc.replace(/\D/g,'')"></el-input><!-- 只能 0~100.00之间的 两位小数 --><el-input v-model="minProportionValue" @input="minProportionValue = formatTwoDecimal(minProportionValue, 100)"></el-input>
1234567891011121314151617181920212223242526/** * 不超过某个值的正数,小数位数最多两位 * @value * @maxNumber 最大值 * @isIncludeMax true不能输入max ...
微信小程序获取用户手机号
有个前提是小程序得是企业帐号,个人帐号没有开放这个能力。
用button组件获取手机号,比较简单,记录一下避免遗忘。
1<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">获取手机号</button>
1234567891011121314151617181920212223getPhoneNumber(e) {// 这个回调返回的手机号是加密的,需要调后台解密 // 先拿openid util.getOpenId().then(openId => { let params = { encryptedData: e.detail.encryptedData, iv: e.detail.iv, openid: openId, loginSysName: "APPLETS_HAOFANG&q ...
vue的H5项目px转vw
看了一些博客几乎都是互相抄袭,用了很多不知道是什么作用的插件。其实px转vw只用了一个核心插件postcss-px-to-viewport,安装该插件,然后在根目录新建postcss.config.js做一下配置,在项目中就可以随意写px了。webpack会将px自动转换为vw。
12345678910111213module.exports = { plugins: { "postcss-px-to-viewport": { viewportWidth: 750, // (Number) The width of the viewport. viewportHeight: 1334, // (Number) The height of the viewport. unitPrecision: 3, // (Number) The decimal numbers to allow the REM units to grow to. ...
js消抖(debounce)与节流(throttle)
节流:如果一个函数持续的频繁的触发,那么让他在一定的时间间隔后再触发。感觉就像是过安检,人多的时候隔一段时间放进去几个。
消抖:如果一个函数持续的触发,那么只在它结束过一段时间只执行一次。像是两个人的对话,A在不停的balabala,如果他说话有停顿,但是停顿的时间不够长,就认为他没有说完,当停顿的时间足够长才认为A说完了,然后B开始回答。输入联想是消抖,当输入停顿时间足够长再去查询,如果连续输入(停顿时间短)就不去调接口。
消抖和节流都是某个行为持续的触发,不同之处在于是要优化到减少他的执行次数还是优化到只执行一次。
123消抖<input onkeyup="keyupHandle(event)">节流<input onkeyup="keyupHandle2(event)">
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162// 消抖fun ...
git每次拉代码都需要输密码?
sourcetree每次拉代码都需要输密码?在.git目录有个config文件,在路径前配置下用户名和密码
12345678910[core] repositoryformatversion = 0 filemode = true bare = false logallrefupdates = true ignorecase = true precomposeunicode = true[remote "origin"] url = http://用户名:密码@url.git fetch = +refs/heads/*:refs/remotes/origin/*
vscode每次拉代码都需要输密码?在code打开推送的代码目录并打开终端输入以下代码
1git config --global credential.helper store
一般来说执行完上述命令,第一次推送需要再次填一次账号密码,之后就不需要了