HeDaD2020030401总结

发布于 2020-03-05  17 次阅读


归类:游戏类种树互动H5

游戏流程:注册账号→进入游戏→浇水,除霾,阳光;帮好友照料→积攒能量→排行榜

知识点巩固:

1.引入字体库:
@font-face {
  font-family:"华康圆体W7";
  src:url('../font/华康圆体W7(P).TTF');
}

2.解决ios系统input框弹出无法收回var heights = $(window).height();
$(“input”).focus(function() {
$(“body”).height(heights);
});
$(“input”).blur(function() {
$(“body”).height(heights);
setTimeout(() => {
const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
window.scrollTo(0, Math.max(scrollHeight – 1, 0));
}, 100);
});

3.禁止body上下滑动,允许需要滑动区域可滑动
var overscroll = function(el) {
el.addEventListener(‘touchstart’, function() {
var top = el.scrollTop,
totalScroll = el.scrollHeight,
currentScroll = top + el.offsetHeight
if(top === 0) {
el.scrollTop = 1
} else if(currentScroll === totalScroll) {
el.scrollTop = top – 1
}
})
el.addEventListener(‘touchmove’, function(evt) {
if(el.offsetHeight < el.scrollHeight)
evt._isScroller = true
})
}
overscroll(document.querySelector(‘.rankList’));//允许滚动的区域
overscroll(document.querySelector(‘.friendList’));//允许滚动的区域
document.body.addEventListener(‘touchmove’, function(evt) {
if(!evt._isScroller) {
evt.preventDefault()
}
})

4.给动态生成元素添加点击事件
$(‘div’).on(‘click’,’p’,function(){
//$(this) 这时指 p
})

5.ajax获取的数据 调用千万不要马虎,项目中 data.Remark
多加了一层 写成 data.Message.Remark,浪费了时间

6.一定不要为了给设计省时间,让自己陷入纠结,明明一个按钮可以让代码简介明了的操作,
硬是写成了判断是否击,添加class名,移除class的骚操作

7.flex布局


七零八落,丢三落四