标签：function isShow 工作 面向对象编程 滑动 input 日志 type listen
1.搜索连动事件
2.页面显示动作
3.没有数据返回需要一个空的无数据页面
4.事件触发，动态生成的元素绑定数据使用模板，在template中传入相应得到函数
123456 | 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() {}
- 先初始化头部配置 这是遗留问题 目前 需要减去 44px;
- 初始化内容高度app-content overflow-hidden 使他能在一页中显示
- 如果需要内容滑动的 直接在这里初始化iscroll中 滑动模块的高度.wrapper的高度
- 页面中其他元素以对象形式出现的需要重置
- 需要拿userInfo 拼接图片 另外getObjectFromSessition是异步的 需要一个回调函数
getUserinfo(function(){- 一般这里执行 loading()
})
- 一般这里执行 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; |
原文:大专栏 工作日志-面向对象编程
标签：function,isShow,工作,面向对象编程,滑动,input,日志,type,listen 来源： https://www.cnblogs.com/wangziqiang123/p/11657530.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。