在移动端,没有分页功能,上拉加载包含着分页功能
- better-scroll 是作用在最外层容器上,只处理第一个子元素,其它的元素都会被忽略。
- 父元素的高度或宽度没有第一个子元素大
- 父元素需要使用overflow: hidden;
<style>
.wrapper {
width: 100%;
height: 666px;
background: #ccc;
overflow: hidden;
}
.main {
width: 100%;
height: 1200px;
}
.p {
height: 200px;
background: plum;
}
</style>
<body>
<div class="wrapper">
<div class="main">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
</div>
</div>
<script src="better-scroll.js"></script>
<script>
let wrapper = document.querySelector(".wrapper")
let scroll = new BScroll(wrapper);
</script>
</body>
- 使用 mui 框架的
mui命令: mscroll || mpull
<div class="mui-scroll-wrapper" id="scroll">
<div class="mui-scroll">
</div>
</div>
mui.init({
pullRefresh: {
container: "#scroll",
up: {
contentrefresh: "正在加载...",
contentnomore: '没有更多数据了',
callback: getList
}
}
});
router.post('/api/getList', function(req, res, next) {
let page = req.body.page;
let pageSize = req.body.pageSize;
let style = req.body.style;
mongo.find(db, tablist, {"style": style}, (result) => {
if (!result) {
res.json({
code: 0,
mes: "查询失败!"
})
} else {
res.json({
code: 1,
mes: "查询成功!",
data:result
})
}
},{
skip:(page - 1) * pageSize,
limit:pageSize,
sort:{
"price": -1,
}
})
});
if (data.length === 0) {
mui('#wrap').pullRefresh().endPullupToRefresh(true);
} else {
mui('#wrap').pullRefresh().endPullupToRefresh(false);
mui("#wrap").pullRefresh().refresh(true);
}