1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <title>资讯</title>
    9.     <meta name="robots" content="noindex,nofollow">
    10.     <meta name="full-screen" content="yes">
    11.     <meta name="x5-fullscreen" content="true">
    12.     <meta name="x5-orientation" content="portrait">
    13.     <meta name="x5-page-mode" content="app">
    14.     <meta name="HandheldFriendly" content="true">
    15.     <meta name="format-detection" content="telephone=no">
    16.     <meta name="apple-mobile-web-app-capable" content="yes">
    17.     <meta name="apple-mobile-web-app-status-bar-style" content="white">
    18.     <meta name="viewport"
    19.         content="user-scalable=no,width=device-width,height=device-height,minimum-scale=1,maximum-scale=1,viewport-fit=cover">
    20.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    21.     <style>
    23.         a{
    24.             color: none;
    25.         }
    26.         .page{
    27.             width: 90%;
    28.             margin: 5%;
    29.         }
    30.         .item{
    31.             border-bottom: 1px solid #00000011;
    32.             margin: 10px auto;
    33.             display: flex;
    34.             height: 100px;
    35.         }
    36.         .cover{
    37.             width: 120px;
    38.             min-width: 120px;
    39.             height: 80px;
    40.             object-fit: cover;
    41.             border-radius: 5px;
    42.         }
    44.         .cover img{
    45.             width: 100%;
    46.             height: 100%;
    47.             border-radius: 5px;
    48.         }
    49.         .title{
    50.             height: 65px;
    51.         }
    52.         .info{
    53.             font-size: 12px;
    54.         }
    55.         .content{
    56.             width: 100%;
    57.         }
    65.         .icon {
    66.           width: 1em;
    67.           height: 1em;
    68.           vertical-align: -0.15em;
    69.           fill: currentColor;
    70.           overflow: hidden;
    71.         }
    75.         .footer[data-v-2c430d6e] {
    76.             height: 100%
    77.         }
    79.         .footer .a[data-v-2c430d6e] {
    80.             padding-bottom: constant(safe-area-inset-bottom);
    81.             padding-bottom: env(safe-area-inset-bottom);
    82.             margin-bottom: 55px
    83.         }
    85.         .footer footer[data-v-2c430d6e] {
    86.             display: -ms-flexbox;
    87.             display: flex;
    88.             position: fixed;
    89.             bottom: 0;
    90.             left: 0;
    91.             width: 100%;
    92.             height: 54px;
    93.             font-size: 12px;
    94.             z-index: 999;
    95.             background-color: #343c4c;
    96.             -ms-flex-pack: distribute;
    97.             justify-content: space-around
    98.         }
    100.         .footer footer .sty[data-v-2c430d6e] {
    101.             display: block;
    102.             font-size: 18px;
    103.             color: #bbbbbb;
    104.             padding-top: 9px
    105.         }
    107.         .footer footer .router-link-active a[data-v-2c430d6e] {
    108.             color: #ff2a2a;
    109.         }
    111.         .footer footer .router-link-active span[data-v-2c430d6e] {
    112.             color: #ff2a2a;
    113.         }
    115.         .footer footer .one[data-v-2c430d6e] {
    116.             width: 20%;
    117.             text-align: center;
    118.             line-height: 2;
    119.             text-decoration: none;
    120.             color: #bbbbbb
    121.         }
    123.         .footer .fade-enter[data-v-2c430d6e] {
    124.             opacity: .2
    125.         }
    127.         .footer .fade-leave[data-v-2c430d6e] {
    128.             opacity: 1
    129.         }
    131.         .footer .fade-enter-active[data-v-2c430d6e] {
    132.             transition: opacity .2s
    133.         }
    134.     </style>
    135. </head>
    136. <body>
    137.     <div class="page">
    138.         <div class="list">
    141.         </div>
    142.     </div>
    143. </body>
    144. <script>
    146.     let req = 0,page=1;
    149.     //上拉加载
    150.     $(window).scroll(function () {
    151.         var scrollTop = $(this).scrollTop(); //滚动条距离顶部的高度
    152.         var scrollHeight = $(document).height(); //当前页面的总高度
    153.         var clientHeight = $(this).height(); //当前可视的页面高度
    154.         if (scrollTop + clientHeight >= scrollHeight - 50) {
    155.             getContent();
    156.         }
    157.     })
    159.     function navigate(link){
    160.         window.location.href = link;
    161.     }
    163.     getContent();
    164.     function getContent(){
    166.         if(req === 1){
    167.             return false;
    168.         }
    169.         req = 1
    170.         $.ajax({
    171.             url:"/get_news?page="+page,
    172.             success:function(res){
    173.                 if(res.code === 0){
    174.                     res.data.forEach(e => {
    175.                         let html = '<div class="item" onClick="navigate('+e.link+');"><div class="content"><div class="title">'+e.title+'</div><div class="info"><span>'+e.date+'</span><span>作者</span><span style="float: right;padding-right: 8px;">'+e.read+'阅读</span></div></div><div class="cover"><img src="'+e.cover+'" alt=""></div></div>';
    176.                         $(".list").append(html);
    177.                     });
    179.                     req = 0;
    180.                     page = page+1
    181.                     if($(".list").height() < $(window).height()){
    182.                         getContent();
    183.                     }
    185.                 }else{
    186.                     alert('请求错误，请联系客服');
    187.                 }
    188.             }
    189.         })
    190.     }
    191. </script>
    192. </html>