一个简单的大转盘
点击按钮调接口，当返回奖品index时，使转盘转出相应的角度。动效是利用了transition过渡动画。当奖品是固定的时候，就少了绘制奖品转盘的步骤。否则得绘制奖品转盘。
dom123456<div class="turn-wrapper"> <!-- 转盘 --> <div class="panel" :style="rotateStyle"></div> <!-- 指针 --> <div class="pointer" @click="rotateHandle"></div></div>
js1234567891011121314151617181920212223242526272829303132333435363738394041424344454647export default { computed: { // 核 ...
图片拖住滚动(vue指令实现)
适用于内容超出展示范围，出现滚动条，但是不拖动滚动条而是拖内容让其移动的场景。利用了dom的scrollTo方法
dom12345678<div class="yule-wrapper" v-move> <img src="@/assets/partnerHome/yule1.png" class="yule-item" alt=""> <img src="@/assets/partnerHome/yule2.png" class="yule-item" alt=""> <img src="@/assets/partnerHome/yule3.png" class="yule-item" alt=""> <img src="@/assets/partnerHome/yule4.png" cla ...
图片无限轮播
用在官网中的多张图片无限滚动播放的效果
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方法限制输入框只能输入限制范围内的数字
el-input限制只能整数123<!-- 只能输入数字 --><el-input v-model="abc" @input="abc=abc.replace(/\D/g,'')"></el-input>
el-input限制只能两位小数（限制不超过100的两位小数）12345<!-- 只能 0～100.00之间的 两位小数 --><el-input v-model="minProportionValue" @input="minProportionValue = formatTwoDecimal(minProportionValue, 100)"></el-input>
1234567891011121314151617181920212223242526272829/** * 不超过某个值的正数，小数位数最多两位 * @value * @maxNumb ...
微信小程序获取用户手机号
有个前提是小程序得是企业帐号，个人帐号没有开放这个能力。
用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. ...