方法一：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="reset.css"/>
<style type="text/css">
body{
font-size: 0.16rem;
}
li{
height: 2rem;
display: flex;
align-items: center;
justify-content: center;
list-style: none;
}
.disnone{
display: none;
}
.padd-g {
padding: 0.1rem 0;
}
#qiehuan .button {
font-size: 0.18rem;
border-bottom: 0.01rem solid #50D7ED;
color: white;
}
#qiehuan .wubutton {
font-size: 0.14rem;
border: 0;
color: #A0A0A0;
}
#qiehuan{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 0.4rem;
background: black;
}
#zuixing{
font-size:0.14rem;
color: #CCCCCC;
margin-left: 0.55rem;
}
.fixed {
position: fixed;
top: 0;
z-index: 100;
width: 100%;
background: #000000;
}
</style>
</head>
<body>
<div id="list">
<div id="qiehuan">
<span id="tuanjian" class="button padd-g">推荐 </span>
<span id="zuixing" class="padd-g">最新</span>
</div>
<ul class="list">
<li>sede1</li>
<li>sede2</li>
<li>sede3</li>
<li>sede4</li>
<li>sede5</li>
<li>sede6</li>
<li>sede7</li>
<li>sede8</li>
<li>sede9</li>
</ul>
<ul class="list2 disnone">
<li>sede11</li>
<li>sede22</li>
<li>sede33</li>
<li>sede44</li>
<li>sede55</li>
<li>sede66</li>
<li>sede77</li>
<li>sede88</li>
<li>sede99</li>
</ul>
</div>
<script src="../layer/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function resetWidth() {
// 兼容ie浏览器 document.body.clientWidth
var baseWidth = document.documentElement.clientWidth || document.body.clientWidth;
// console.log(baseWidth);
// 默认的设置是375px(ip6)的根元素设为100px, 其他的手机都相对这个进行调整
document.documentElement.style.fontSize = baseWidth / 375 * 100 + 'px'
}
resetWidth();
window.addEventListener('resize', function () {
resetWidth();
})
// 推荐和最新切换
$("#qiehuan").on("click","#tuanjian,#zuixing",function(){
document.documentElement.scrollTo(0,0)
for(var i=0; i<$("#qiehuan").children().length; i++){
$($("#qiehuan").children()[i]).addClass("wubutton")
$($("#qiehuan").children()[i]).removeClass("button")
}
$(this).addClass("button")
$(this).removeClass("wubutton")
$(".list").toggleClass("disnone");
$(".list2").toggleClass("disnone");
if(end == 2 && $(this).prop("class")=="disnone"){
end = 1;
}
})
//下拉加载更多
var times = 1;
var times2 = 1;
var end = 1;
var end2 = 1;
var flexd = 1;
$(document).scroll(function(){
var tops = $(document).scrollTop();
var height = $(document).height();
var offsetHeight = $(window).height();
// console.log('tops',tops,'height',height,'offsetHeight',offsetHeight);
if(tops >320 && flexd==1){
flexd = 0
$("#qiehuan").addClass("fixed")
}
if(tops < 320 && flexd==0){
flexd = 1
$("#qiehuan").removeClass("fixed")
}
if(tops+offsetHeight<height-150){
if(end==2){
end=1
}else if(end2==2){
end2=1
}
}
// 下拉加载
if(tops + offsetHeight > height - 100 && end ==1 && $(".list2").attr("class") =="list2 disnone"){
var htmlstr = ""
end = 0
if(times<5){
for (m = 0; m < 10; m++) {
htmlstr +=`<li>sede${times*10+ m}</li>`
}
$(".list").append(htmlstr)
times++
end=2
}else{
alert("没有更多了")
end = 2
}
}
if(tops + offsetHeight > height - 100 && end2 ==1 && $(".list").attr("class") =="list disnone"){
var htmlstr = ""
end2 = 0
if(times2<5){
for (m = 0; m < 10; m++) {
htmlstr +=`<li>sede${times*100+ m}</li>`
}
$(".list2").append(htmlstr)
times2++
end2=2
}else{
alert("没有更多了")
end2 = 2
}
}
})
</script>
</body>
</html>
方法二：
<script src="js/iscroll.js"></script>
<link rel="stylesheet" href="css/pullToRefresh.css">
<script src="js/pull2.js"></script>
var list1pagenum =1;
var list2pagenum =1;
var userid = getUserid();
//下拉加载更多
<div id="wrapper" >
<ul class="listCont" id="challenge">
<li class="top">
<div style="height: 2.25rem;"><p id="challengeName" class="f26 jc-center" style="padding-top: 0.9rem;"></p></div>
<div id="desc" class="f12 aoa" style="position: relative; padding: 0.15rem 0.15rem 0 0.15rem;">
<span class="describe wenzi">6666666
</span>
<img class="iconimg16 updownScale isadd" src="images/miaoka1/ar1745@2x.png"/>
</div>
<div id="qiehuan" class="fcc">
<span id="tuanjian" class="button padd-g">最热 </span>
<span id="zuixing" class="f14 aoa padd-g mg-l-55">最新</span>
</div>
</li>
<li id="detaliList1" data-id="001"></li>
<li id="detaliList2" class="disnone" data-id="001"></li>
</ul>
</div >
$(function(){
getlist(list2pagenum,1);
getlist(list1pagenum,0);
})
refresher.init({
id:"wrapper",
pullDownAction:Refresh,
pullUpAction:Load
})
function Refresh(){
//Action.loading(true);
wrapper.refresh();
}
function Load(){
//Action.loading(true);
if($('#detaliList1').hasClass('disnone')){
getlist(list2pagenum,1);
}else {
getlist(list1pagenum,0);
}
}
