运营推广移动端开发
1.适配原理
宽的适配：flexible.js适配，是根据屏幕的宽度计算根标签的大小进行适配，
高的适配：
- 需要用vh,vh在静态页面好用，vh是根据屏幕的可视高度计算的，当页面中有输入框时vh的页面会受到挤压，如下图
- 用百分比
2.移动端布局
- 如果有按钮，最好让ui设计到一个层级上不要用相对定位，固定定位，因为软键盘弹起会顶起按钮，按钮会遮挡内容。
- 尽量少用相对定位固定定位，因为不能滚动，在小屏上无法解决适配问题。
3.安卓软键盘引起的问题
1.软键盘打开会顶起页面，造成页面超出，输入框被遮挡问题。
解决方案：用resize事件监听窗口的高度变化，根据窗口变化调整页面样式高度。
// 定义一个函数来处理窗口大小变化时的逻辑
function checkViewportSize() {
// // 获取当前窗口的高度
var windowHeight = window.innerHeight;
// 更新窗口高度记录
initialWindowHeight = windowHeight;
}
// 记录初始窗口高度
var initialWindowHeight = window.innerHeight;
// 初始化时调用一次，确保页面加载时也能记录初始窗口高度
checkViewportSize();
// 监听窗口大小变化事件，并在事件发生时调用处理函数
window.addEventListener('resize', checkViewportSize);
2.软键盘弹起按钮被顶起问题
解决方式：根据窗口变化，让按钮显示隐藏
// 定义一个函数来处理窗口大小变化时的逻辑
function checkViewportSize() {
// 获取当前窗口的高度
var windowHeight = window.innerHeight;
// 判断当前窗口高度是否小于之前记录的高度
if (windowHeight < initialWindowHeight) {
// 可能是软键盘弹起导致的高度变小，执行你需要的逻辑
console.log('软键盘弹起，可视区域变小');
// 例如隐藏特定元素或调整布局
$('.tabBox').hide()
} else {
// 可能是软键盘收起导致的高度变大，执行其他逻辑
console.log('软键盘收起，可视区域恢复');
// 例如显示特定元素或恢复布局
$('.tabBox').show()
}
// 更新窗口高度记录
initialWindowHeight = windowHeight;
}
// 记录初始窗口高度
var initialWindowHeight = window.innerHeight;
// 初始化时调用一次，确保页面加载时也能记录初始窗口高度
checkViewportSize();
// 监听窗口大小变化事件，并在事件发生时调用处理函数
window.addEventListener('resize', checkViewportSize);
4.ios软件盘打开页面留白问题。
解决方案：输入框失焦window.scrollTo(0, 0);
$('#staffCode').blur(function () {
setTimeout(() => {
window.scrollTo(0, 0);
}, 100);
})
5.上拉加载
实现原理：
scrollTop：滚动视窗的高度距离window顶部的距离，它会随着往上滚动而不断增加，初始值是0，它是一个变化的值
clientHeight:它是一个定值，表示屏幕可视区域的高度；
scrollHeight：页面不能滚动时也是存在的，此时scrollHeight等于clientHeight。scrollHeight表示body所有元素的总长度(包括body元素
自身的padding)
判断是否滚动到底部的公式：scrollTop+clientHeight>=srcollHeight
触发上拉加载的时机：
1.滚动到底部=》scrollTop+clientHeight>=srcollHeight
2.滚动条不在顶部=》scrollTop！==0
3.不在刷新，
4.不在加载
5.没加载完
$('#middle').scroll(function () {
var content = this
// 内容的总高度
contentHeight = content.scrollHeight
// 可视区域的高度
viewportHeight = content.clientHeight
// 当前滚动的位置
scrollTop = content.scrollTop;
scrollBottom = contentHeight - (scrollTop + viewportHeight);
// 判断是否在顶部
var atTop = scrollTop === 0;
// 检查是否滚动到底部
// 这里的2作为一个阈值，可以根据需要调整
if (scrollBottom <= 100 && scrollBottom >= 0 && !isLoading && !isRefreshing && !atTop && !allDataLoaded) {
// 到达底部，可以执行加载更多数据的操作
console.log("到达底部");
getItemList();
}
});
示例：
var page = 1;
var size = 10;
var isRefreshing = false;
var isLoading = false;
var allDataLoaded = false;
//调用：
$('#list').html('');
page = 1;
allDataLoaded = false
getBuildList()
function getItemList() {
if (isLoading && isRefreshing && allDataLoaded) return
isLoading = true;
$('#loading').show();
$('#noData').hide();
var result = '';
if (xhr) {
xhr.abort();
}
xhr = $.ajax({
url: getAuthorizedGroup,
type: 'post',
async: true,
data: {
"staffCode": staffCode,
"page": page,
"size": size
},
dataType: 'json',
success: function (res) {
if (res.status == 1) {
if (res.data.status == 1) {
let items = res.data.rows.map(i => {
return {
...i,
buildCount: i.buildCount == -1 ? '全部电站' : i.buildCount + ' 个'
};
});
var arrLen = items.length;
if (arrLen > 0) {
for (var i = 0; i < arrLen; i++) {
result += drawHtml(items[i]);
}
page++;
if (arrLen < 10) {
$('#loading').hide();
$('#noData').show();
}
} else {
$('#loading').hide();
allDataLoaded = true; // 所有数据已加载完毕
if (page == 1) {
result = `<div class='imgBox'><img src="./img/noActivity.png" alt="未找到推广活动"></div>`
} else {
$('#noData').show();
}
}
} else {
alert(res.data.msg)
}
} else {
alert(res.data)
}
$('#list').append(result);
isLoading = false;
},
error: function (xhr) {
console.log("
标签：function,false,h5,xhr,window,开发,var,scrollTop,心得
From： https://www.cnblogs.com/hxy--Tina/p/18316687