工作日志-面向对象编程

1.搜索连动事件

2.页面显示动作

3.没有数据返回需要一个空的无数据页面

4.事件触发，动态生成的元素绑定数据使用模板，在template中传入相应得到函数

var config = {    userId:'.../'    show:function() {        //这里添加方法    }}

如何解决移动端input输入值触发拼音键入事件

1234567891011121314

var cpLock = true;input.addEventListener('input',function(){    //监听input的输入事件    if(cpLock){        //执行函数    }})document.addEventListener('compositiononstart',function(){    //开启中文    cpLock = false;})document.addEventListener('compositiononend',function(){    cpLock = true; })

IScroll的移动问题

首先 iscroll有很多版本普通版 prop版无限版。。。
new IScroll(‘.querySelector’)

固定样式

1234	div class = 'wrapper' div id = 'scroll' ul ---> 这是滑动得到元素 li

滑动原理

id = scroll 的高度需要超过 wrapper的高度才能滑动其中的元素要不然不能滑动

只用prop版的IScroll才能监听到‘onscroll’事件
它会计算 id = scroll中每一的高度来生成 maxScrollY 赋值给id 中的translateY
IScroll中的new出的对象的方法

myScroll.scrollTo(x,y,time,easzing);
myScroll.slideDown
myScroll.refresh() –>在动态生成的元素加入到内部后需要刷新已重新计算滑动高度
让一个元素居中
flex布局
- display:flex;justify-content:center; align-items:center;

页面写法

一般先写一个function init() {}
1. 先初始化头部配置这是遗留问题目前需要减去 44px;
2. 初始化内容高度app-content overflow-hidden 使他能在一页中显示
3. 如果需要内容滑动的直接在这里初始化iscroll中滑动模块的高度.wrapper的高度
4. 页面中其他元素以对象形式出现的需要重置
5. 需要拿userInfo 拼接图片另外getObjectFromSessition是异步的需要一个回调函数
  getUserinfo(function(){
  1. 一般这里执行 loading()
    })

//初始化页面
init();

input输入框获取焦点问题

div 包裹一个input标签里面一个delete标签
点击delete标签时 input.val(‘’) 置空 input.focus() –>会有问题
当点击div时会触发 input的focus()很bug
iscroll 如果每次生成生成列表的时候 new IScroll iscroll的click事件为true 生成的click事件会叠加在下次执行的时候多次执行

以面向对象的形式写网页

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118

var config = {    page:1,    node:$('.content'),    mask:$('.mask'),    _isShow:false,    data:{        "0001":"最新发布",        "0005":"车龄最短"    },    get isShow() {        return this._isShow;    },    set isShow(val) {        this._isShow = val;     },    listen:{},    //利用对象监听  同一函数触发时的多个操作    addEvent:function(type,fn) {        if(typeof this.listen[type] == 'function' && Array.isArray(this.listen[type]))  {             this.listen[type].push(fn);        }else {            this.listen[type] = [];            this.listen[type].push(fn);        }    },    fireE:functon(type){        if(typeof this.listen[type] == 'function' && Array.isArray(this.listen[type]))  {             for(var i =0;i<this.listen[type].length;i++) {                 this.listen[type][i]();             }        }    },    removeE:function(type,fn) {        if(typeof this.listen[type]) {            //循环type中 所有事件 删除原来的            for(var i = 0 ;i < this.listen[type].length;i++) {                if(this.listen[type][i] === fn) {                    this.listen[type].splice(i,1);                }            }        }    },    //加入一些dom操作方法    showDelet:function() {        //显示删除按钮    }    refresh:function(data) {        this.data = [];        this.page = 1 ;        this.node.html('');    },    //定义模版    pushHtml:function() {        var page = this.page;        var template = _.template(this.temp.html(),{data:data,page:page,token:token,userId:userId})    },    //动态生成的元素再追加事件    setNode:function() {        this.node.html(val);        this.addListen(this.page)    },    addListen:function(page) {        $('[page=page'+page+']').off('click).on('click',function(){            var id = $(this).data('id');        })        myScroll.refresh();    },}var orderByList = {    list:$('.header'),    mask:$('.mask'),    select:$('.select'),    showSelect:function() {        this.list.hide();        this.list.mask();        this.select.show();    }}//封装方法function loadData(putData,cb,caller) {    AladdingTools.request('post',AppInter..,putData,function(data){        if(data=='001') {            typeof cb === 'functionn' && cb();        }    })}function getSessionData(cb,called) {    AladdinTools.getObjectFromSession(config.searchKey,function(data){        cb&&typeof cb === 'function'&& cb.call(called,data);    })}function bindEvent() {    1.  设置左箭头返回键    2.  设置右箭头返回键    3.  其他}function load() {    myscroll的一些设置}function init() {    //定义页面高度    pageHeight = document.body.clientHeight - 44 ;    $('.app-content').height(pageHeight);    $('.iscroll-content').height(pageHeight - 50);    getUserInfo(function(){        load(funtion(){            bindEvent;        })    })}//get 和 set 的用法get --> config.isShow; -->false;set --> config.isShow = true;调用  config.isShow  -->true;

下一篇：面试题

原文:大专栏工作日志-面向对象编程

来源：https://www.cnblogs.com/wangziqiang123/p/11657530.html

标签

iscroll