插件源码
源码面前没秘密,这个文章记录牛逼的插件的实现原理
除此之外
- wx.sdk改动查看【微信公众号sdk】笔记
- vue源码查看前面笔记
zepto.weui.js
- 这个有许多好用便捷的插件
- 要实现设置考勤时间业务,但没找到日期选择器只选择时分的api代码,需要使用picker实现,不能用datetimePicker,但是picker没有提供切除初始化冒号【:】的功能,也没有提供修改时间后重写到输入框上带上冒号【:】
- 看了下源码,需要自己改进一下
// 1996 行
var inputValue = $this.val();
if(params.value === undefined && inputValue !== "") {
+ if(params.parse){
+ params.value = params.parse(inputValue)
+ }else{
params.value = (params.cols && params.cols.length > 1) ? inputValue.split(" ") : [inputValue];
+ }
}
// 1424(不需要改动,但可以看出自己可以传一个formatValue函数)
if (p.input && p.input.length > 0) {
$(p.input).val(p.params.formatValue ? p.params.formatValue(p, p.value, p.displayValue) : p.value.join(' '));
$(p.input).trigger('change');
}
// formatValue函数应该怎么写,找一下官方怎么写
// 3278 ,往下找format
formatValue: function (p, values, displayValues) {
return self.params.format(p, values, displayValues);
}
// 3383,把这个复制了就行
format: function (p, values) { // 数组转换成字符串
return p.cols.map(function (col) {
return col.value || col.content;
}).join('');
}
- 就加了上面4行代码
<input class="weui-input" id="name" value="1997-06-06" type="text" readonly="">
$("#name").picker({
title: "选择年月",
cols: [
{
textAlign: 'center',
values: carr(00,23)
},
{
divider: true, // 这是一个分隔符
content: ":"
},
{
textAlign: 'center',
values: carr(00,59)
}
],
// 改为就支持了这个功能
parse:function(str){
return str.split(":")
},
// 跟3383写一样就行
formatValue: function(p){
return p.cols.map(function (col) {
return col.value || col.content;
}).join('');
},
onChange: function (picker, values, displayValues) {
console.log(values);
}
});
操作指引
- 第一次进入某app或者某页面时的操作指引怎么实现的
- 弄一个黑色的蒙版,把需要用户操作的dom设置css
position: relative;
z-index: 10;
- 比黑色蒙版高,就能显示到蒙版上,并且不会破坏原dom结构,事件也没有消失
- 然后判断dom的大小和位置后再空白的位置提示操作就行
best-scroll.js
- 著名仿系统原生滚动事件插件
- 最长用于禁用页面的滚动事件的地图上的弹窗
// 原理是使用js模拟原生的滚动时间,甚至模拟了惯性的滚动效果
// BScroll.prototype._end是正常的移动结束执行,然后在函数内计算惯性方向和惯性时间,执行 this.scrollTo(newX, newY, time, easing);
// 在 BScroll.prototype.scrollTo 里判断了是不是有time参数,如果有执行 this._animate(x, y, time, easing.fn);
// 在 BScroll.prototype._animate 里用 requestAnimationFrame 循环的执行step()
// step 通过判断惯性时间结束,内部是执行 me._translate(newX, newY, newScale); 这个方法才是真正的修改dom的tramform的值
var oScroll = new BScroll(".wrap", {
probeType: 2,
//下拉刷新:可以配置顶部下拉的距离(threshold) 来决定刷新时机以及回弹停留的距离(stop)
//这个配置用于做上拉加载功能,默认为 false。当设置为 true 或者是一个 Object 的时候,可以开启上拉加载
pullUpLoad: {
threshold: 10
},
mouseWheel: { // pc端同样能滑动
speed: 20,
invert: false
},
useTransition:false // 防止iphone微信滑动卡顿
});
oScroll.on("scroll",function(top){
console.log(top)
});
oScroll.on("pullingUp",function(){
//alert('已到最底部');
console.log('加载ajax数据');
oScroll.finishPullUp();//可以多次执行上拉刷新
});
// 新数据加载后需要执行这个
// oScroll.refresh();
后续会继续补充