1.搜索连动事件
2.页面显示动作
3.没有数据返回需要一个空的无数据页面
4.事件触发，动态生成的元素绑定数据使用模板，在template中传入相应得到函数
1 2 3 4 5 6 |
var config = {
userId:'.../'
show:function() {
//这里添加方法
}
}
|
- 如何解决移动端input输入值触发 拼音键入事件
1 2 3 4 5 6 7 8 9 10 11 12 13 14
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’)
- 固定样式
1 2 3 4
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事件会叠加 在下次执行的时候多次执行
以面向对象的形式写网页
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 |
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
时间： 2024-07-30 07:43:47