SUI的无限下拉和分页效果的实现

最新推荐文章于 2024-08-10 07:58:20 发布

原创

最新推荐文章于 2024-08-10 07:58:20 发布 · 9.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#分页 #JS

本文介绍了如何在SUI.js框架基础上实现无限下拉和分页效果。通过改造SUI的infinite函数，结合getData方法获取不同页面数据，实现了每次下拉加载新一页的内容。主要涉及HTML布局和JavaScript异步数据处理。

本项目是基于template.js模板和SUI.js框架实现的，无限下拉在SUI框架里面也会有模拟，不过仅仅只是模拟，实际运用的话每次下拉的数据都是同一页的，要实现分页的效果就需要对其进行改造了。话不多说，直接上代码：

html代码：

<!DOCTYPE html>-
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>兔兔团</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
    <link rel="stylesheet" href="../../css-sui/base.css">
    <link rel="stylesheet" href="../../css-sui/shop/product-list.css">
</head>
<body>
<div class="page-group">
    <div class="page page-current">
        <header class="bar bar-nav headerBar">
            <a class="button button-link button-nav pull-left" href="fullCutHall.html" data-transition='slide-out' external>

最低0.47元/天解锁文章