移动端 —— better-scroll

better-scroll 是作用在最外层容器上，只处理第一个子元素，其它的元素都会被忽略。父元素的高度或宽度没有第一个子元素大父元素需要使用overflow: hidden;<style>.wrapper {width: 100%;height: 666px;backgrou...

chase…

311人浏览 · 2019-04-14 19:59:08

chase… · 2019-04-14 19:59:08 发布

在移动端，没有分页功能，上拉加载包含着分页功能

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">
		<!--这里放置真实显示的DOM内容-->
	</div>
</div>

//先初始化
mui.init({
	pullRefresh: {
		container: "#scroll", //待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
		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);
}