叮咚帮项目记录

2016-08-15

[TOC]

jade

文档

http://www.nodeclass.com/api/jade.html

https://segmentfault.com/a/1190000000357534

模板继承

关键语法：extends block append prepend

Jade 支持通过 block 和 extends 关键字来实现模板继承。即在一个文件中定义页面结构模板，可在另一文件中继承该结构，也可通过append，prepend进行前后追加。

Mixins

关键语法：mixin +(define)

在一个文件中可定义多个被页面重复使用的代码块，然后通过调用使用，当有页面元素有变动时，可实现全部页面的修改。
具体语法：

无变量
basic.jade

mixin link
  ...
mixin head
  ...
mixin sidebar
  ...
mixin mask
  ...
mixin paging
  ...

backPC.jade

include ./basic.jade
body.page-body
    include ./basic.jade
    +head
    div.main-content
      +sidebar
      div.content.col-lg-10(style="width:81.5%!important;")
        table.table.table-bordered.table-striped(style="width:100%!important")
          thead
            tr
              th 序号
              th 状态
              th 来信人
              th 手机号
              th 时间
              th 问题简介
              th 身份
          tbody.dataBody
        +paging

有变量（暂无使用，但重构时可能会用到）
basic.jade

mixin pets(pets)
  ul.pets
    - each pet in pets
      li= pet

index.jade

1
2
3

include ./basic.jade
...
+pets(mouse)

变量引用

关键语法：#{}

略

点击穿透问题

问题描述：给某元素绑定touch事件时，会同时触发该元素之下的元素的一些事件。

解决方案：在事件内添加代码

1	e.preventDefault();

该方法将通知Web浏览器不要执行与事件关联的默认动作（如果存在这样的动作）。

iphone点击延迟问题

问题描述：由于iphone手机需要一定时间判断是否使用手势，所以上触发点击事件时会有大约300ms的延迟。

解决方案：

1. zepto中加入[touch模块](https://github.com/madrobby/zepto/blob/master/src/touch.js#files)<br>
2.将click改成touchstart
<br>

多选框全选／取消全选问题

问题描述：全选事件只能触发一次
解决方案：将attr换成prop

// 功能：全选
$(document).on('click','.check-btn',function(){
    // console.log($('input[id^="cbtest"]').attr())
    $('input[id^="cbtest"]').prop('checked',true)
});

// 功能：全不选
$(document).on('click','.cancel-check',function(){
    // console.log($('input[id^="cbtest"]').attr())
    $('input[id^="cbtest"]').prop('checked',false)
});

attr与prop区别：属性可自定义时使用attr，反之使用prop。

上拉刷新问题

问题描述：文档上拉时触发事件
解决方案：

1.引入dropload.js
2.js中引入代码

$('body').dropload({
        scrollArea : window,
        domUp : {
                domClass   : 'dropload-up',
                domRefresh : '<div class="dropload-refresh">↓下拉刷新-订单状态</div>',
                domUpdate  : '<div class="dropload-update">↑释放更新-订单状态</div>',
                domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中-订单状态...</div>'
            },
        domDown : {
                domClass   : 'dropload-down',
                domRefresh : '<div class="dropload-refresh"></div>',
                domLoad    : '<div class="dropload-load"><span class="loading"></span></div>',
                domNoData  : '<div class="dropload-noData"></div>'
            },
        loadUpFn : function(me){
              curPage = 1;
              tasksQuery();
              me.resetload();

        },
        loadDownFn : function(me){
            me.resetload();
            $('.dropload-down').hide();//隐藏下拉，保留上拉
        },
        threshold : 50,
        distance:20
    });

聊天框自动变化问题

预期效果：文本增加时，textarea的高度也随之增加，增加到一定值内滚动显示；聊天内容发出后内容清空，文本框还原大小。

解决方案：

html：

1	<textarea id="textarea"></textarea>

js：

var addHandler = window.addEventListener?
function(elem,event,handler){elem.addEventListener(event,handler);}:
function(elem,event,handler){elem.attachEvent("on"+event,handler);};

var dd = function(id){return document.getElementById(id);}

function autoTextArea(elemid){
    //新建一个textarea用户计算高度
    if(!dd("_textareacopy")){
        var t = document.createElement("textarea");
        t.id="_textareacopy";
        t.style.position="absolute";
        t.style.left="-9999px";
        document.body.appendChild(t);
    }
    function change(){
        dd("_textareacopy").value= dd(elemid).value;
        dd(elemid).style.height= dd("_textareacopy").scrollHeight+dd("_textareacopy").style.height+"px";
    }
    addHandler(dd("textarea"),"propertychange",change);//for IE
    addHandler(dd("textarea"),"input",change);// for !IE
    dd(elemid).style.overflow="hidden";//一处隐藏，必须的。
    dd(elemid).style.resize="none";//去掉textarea能拖拽放大/缩小高度/宽度功能
}

addHandler(window,"load",function(){
    autoTextArea("textarea");
});

自动定位至聊天窗口底部

预期效果：打开聊天窗口或发送消息后，自动定位至最后一条消息，即聊天窗口底部。

解决方案：

1	$('.chat-cell').scrollTop($('.chat-cell')[0].scrollHeight);

点击查看大图问题

预期效果：

当图片高度小于设备高度时垂直居中显示图片，背景黑色；
当图片高度大于设备高度时滚动显示。

解决方案：

    let imgUrl = $(this).attr('src');
    $('.full-img').attr('src',imgUrl);
    $('.rDialog-mask3').show();
    $('.full-img').show();
    // alert($('.full-img').height());
     // alert(window.innerHeight);
    if($('.full-img').height()>window.innerHeight){
        $('.full-img').css('position','static');
        $('.full-img').css('overflow','scroll');
        $('.full-img').css('top','0');
        // alert('over')
    }else{
        $('.full-img').css('position','fixed');
        $('.full-img').css('overflow','hidden');
        var x=$('.full-img').offset();
        // alert(x.height);
        var top = (window.innerHeight - x.height)/2;
        // alert(top);
        $('.full-img').css('top',top + 'px');
        // alert($('.full-img').height());
        // alert(window.innerHeight);
    }
});
<!--退出全屏-->
$(document).on('touchstart','.full-img-div,.full-img,.rDialog-mask3',function(){
    $('.rDialog-mask3').hide();
    $('.full-img').hide();

});

提示框规范

预期效果：

当弹出框时间未定义时默认1000ms；
当弹出框时间有定义时使用定义时间。

解决方案

function setAlert(str,timeAlert){
    if(typeof(timeAlert) == 'undefined'){
        timeAlert = 1000;
    }
    $('.alert-modal').html(str);
    $('.alert-modal').fadeIn();
    setTimeout(function(){
         $('.alert-modal').fadeOut();
    },timeAlert);
}

验证特殊字符输入

预期效果：当输入特殊字符时提示；

解决方案：

function stripscript(s) {
    var pattern = new RegExp("[特殊字符]")
        var rs = "";
    for (var i = 0; i < s.length; i++) {
        rs = rs + s.substr(i, 1).replace(pattern, '');
    }
    return rs;
}

数据搜索

预期效果：

输入时进行检索；
支持模糊查找；
搜索速度尽量快。

解决方案：

// 功能：搜索

var createLi = function(index){
    $('.schoolUlSelect').append('<li class="querySchool">'+schoolSearch[index].school+'</li>')
}

  var removeLi = function(index){
    $('.schoolUlSelect').eq(i).remove();
  }

  var emptyLi = function(){
    $('.schoolUlSelect').empty();
  }
  
  var preVal = $('.search-input')[0].value;
  $('.search-input')[0].oninput = function(){
    var nextVal = $('.search-input')[0].value;
    if(preVal.length == 0){//判断是否为首次输入
      emptyLi();
      if(schoolSearch.length == 0){
        $.post('/school/getSchool', function (data) {
          schoolSearch = data;
          $.each(schoolSearch,function(i,item){
            if(item.school.indexOf(nextVal) > -1){
              createLi(i);
            }
          });
        });
      }else{
        $.each(schoolSearch,function(i,item){
          if(item.school.indexOf(nextVal) > -1){
            createLi(i);
          }
        });
      }
    }else{
      if(nextVal.length > preVal.length){ //键盘继续输入
        $.each($('.querySchool'),function(i,item){
          if(item.html().indexOf(nextVal) == -1){
            $('.querySchool').eq(i).remove();
          }
        });  
      }
    }
    
  }

类名	释义
schoolUlSelect	搜索结果面板
querySchool	每条数据
search-input	输入框

原生JS轮播图

预期效果：使用原生JS进行图片轮播

解决方案：


// 轮播
var box=document.getElementById('box');
var uls=document.getElementsByTagName('ul');
var imgs=uls[0].getElementsByTagName('li');
var btn=uls[1].getElementsByTagName('li');
var i=0; //中间量，统一声明；
var index = 0;
var play=null;
// console.log(box,uls,imgs,btn);//获取正确

//图片切换, 淡入淡出效果我是用（transition: opacity 0.8s linear）做的,不纠结、简单 在css里面
function show(a){        //方法定义的是当传入一个下标时，按钮和图片做出对的反应
  for(i=0;i<btn.length;i++ ){
    btn[i].className='';    //很容易看懂吧？每个按钮都先设置成看不见，然后把当前按钮设置成可见。
    btn[a].className='current';
  }
  for(i=0;i<imgs.length;i++){ //把图片的效果设置和按钮相同
    imgs[i].style.opacity=0;
    imgs[a].style.opacity=1;
  }
}
//切换按钮功能，响应对应图片
for(i=0;i<btn.length;i++){
  btn[i].index=i;  //不知道你有没有发现，循环里的方法去调用循环里的变量体i，会出现调到的不是i的变动值的问题。所以我先在循环外保存住
  btn[i].onmouseover=function(){
    show(this.index);
    clearInterval(play); //这就是最后那句话追加的功能
  }
}

//自动轮播方法
function autoPlay(){
    play=setInterval(function(){ //这个paly是为了保存定时器的，变量必须在全局声明 不然其他方法调不到 或者你可以调用auto.play 也许可以但是没时间试了
    index++;
    index>=imgs.length&&(index=0);//可能有优先级问题，所以用了括号，没时间测试了。
    show(index);
  },4500)
}
autoPlay();//马上调用，我试过用window.onload调用这个方法，但是调用之后影响到了其他方法，使用autoPlay所以只能这样调用了

//div的鼠标移入移出事件
box.onmouseover=function(){
  clearInterval(play);
};
box.onmouseout=function(){
  autoPlay();
};
//按钮下标也要加上相同的鼠标事件，不然图片停止了，定时器没停，会突然闪到很大的数字上。 貌似我可以直接追加到之前定义事件中。

滚动至特定位置固定

预期效果：菜单栏滚动至页面上方时固定住，向下滚动时自动释放。
解决方案：

// 滚动监听
$(document).on('scroll',function(){
  if($('body').scrollTop() >= $('.list').height()){
    $('.tab').css({
      'position':'fixed',
      'top':'0',
      'width':'100%',
      'z-index':3
    });
    $('.task-list,.money-list').css({
      'position':'fixed',
      'top':$('.tab').height()
    });

  }else{
    $('.tab').css({
      'position':'static',
      'width':'100%'
    });
    $('.task-list,.money-list').css({
      'position':'absolute',
      'top':'auto'
    });

  }
});

| 类名 | 释义 |
| – | – |
| list | 菜单栏上方元素 |
| tab | 菜单栏 |
| task-list | 二级菜单栏 |
| money-list | 二级菜单栏 |

iphone无法触发点击事件问题

问题描述：JS绑定点击事件时，iphone无法触发

解决方案：
给绑定的元素添加css属性

1	cursor:pointer;

点击出现蓝框问题

问题描述：点击元素时出现蓝框

解决方案：
给绑定元素添加css属性

1 2	outline:none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0);

隐藏滚动条

预期效果：内容超出时滚动，滚动条隐藏

解决方案

element::-webkit-scrollbar{  
    width: 5px;  
    height: 5px;  
    background-color: #fff;  
}  
  
/*定义滚动条轨道 内阴影+圆角*/  
element::-webkit-scrollbar-track{  
    // -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);  
    border-radius: 10px;  
    background-color: #fff;  
}  
  
/*定义滑块 内阴影+圆角*/  
element::-webkit-scrollbar-thumb{  
    border-radius: 10px;  
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);  
    background-color: #fff;  
}

头像

问题描述：使头像正常显示完全，不水平或竖直压缩
解决方案：
jade

1 2	div.head-picture-t div.head-picture-div(style="background-image: url('#{msgRecord[i].fromUserHeadimgurl}')")

css

.head-picture-t{
	width: 1.2rem;
    height: 1.2rem;
    overflow: hidden;
}
.head-picture-div{
	width: 100%;
    height: 100%;
    background-position: center;
    background-size: auto 1.2rem;
    background-repeat: no-repeat;
    border-radius:0.2rem; 
    margin: auto;
	// background-image: url('1.jpg');
}

快捷键设置

预期效果：使用键盘快捷键触发事件
解决方案

下载依赖

1	$ npm install hotkeys-js

引入文件

1	import hotkeys from 'hotkeys-js';

引用

hotkeys('enter',function(event,handler){
    event.preventDefault();
    event.stopPropagation();
	//触发函数

});

详情见文档