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

最新推荐文章于 2024-07-23 14:19:38 发布

this_ITBoy

最新推荐文章于 2024-07-23 14:19:38 发布

阅读量9.3k

点赞数 1

分类专栏：原创文章标签：分页 JS

本文链接：https://blog.csdn.net/this_ITBoy/article/details/51981334

版权

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

摘要由CSDN通过智能技术生成

本项目是基于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