个人中心
gpt4 book ai didi

javascript - 如何使用纯javascript在静态页面中制作无限页面滚动效果

转载 作者：搜寻专家 更新时间：2023-10-31 20:36:20 25 4
gpt4 key购买 nike

我在网上搜索过，主要是使用 jquery 和一些库来搜索。我想知道我们如何使用纯javascript来制作像twitter一样的无限页面滚动效果而不必包含任何库(这里我把搜索php和html代码作为引用，我想在搜索结果中实现效果。我使用 laravel 作为后端)。而我才刚刚开始学习javascript，请把我当成一个10岁的男孩。谢谢

//HTML

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Risky Jobs - Search</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

   <div class="searchWrapper">
      <form action="<?php echo $_SERVER['PHP_SELF'] ?>" method='get' >
        <input type="search" name="search">
      </form>
   </div>

   <h3>Risky Jobs - Search Results</h3>

</body>
</html>

//PHP

function build_query($user_search, $sort){
    $search_query = "SELECT * FROM posts";

    $clean_search = str_replace(',',' ',$user_search);
    $search_words = explode(' ', $clean_search);
    //to  become a array

    $final_search_words = array();
    if(count($search_words) > 0){
        foreach($search_words as word){
            if(!empty($word)){// there are circustances that the user input two or more blank so it will result to a blank result
                $final_search_words[] = $word;


            }
        }
    }



    // Generate a WHERE clause using all of the search keywords
    $where_list = array();
    if(count($final_search_words) > 0){
        foreach($final_search_words as $word){
            $where_list[] = "content Like '%$word%'";
        }
    }
    $where_clause = implode(' OR ', $where_list);

    //Add the keyword WHERE clause to the search query
    if(!empty($where_clause)){
        $search_query .= " WHERE $where_clause";
    }




    // Sort the search query using the sort setting
    switch ($sort) {
        // Ascending by title
        case 1:
            $search_query .= " ORDER BY title";
            break;
        // Desending by title  
        case 2:
            $search_query .= " ORDER BY title DESC";
            break; 

        // Ascending by created_at
        case 3:
            $search_query .= " ORDER BY created_at";
            break;
        // Descending by created_at
        case 4:
            $search_query .= " ORDER BY created_at DESC";
            break;     
        default:
            // No sort setting provided, so don't sort the query
            //break;
    }

    return $search_query;

} //END OF build_query() FUNCTION


// This function builds heading links based on the specified sort setting

function generate_sort_links($user_search, $sort){
    $sort_links = '';

    switch ($sort) {
        case 1:
            $sort_links .= '<li><a href = "' . $_SERVER['PHP_SELF'] . '?usersearch=' . $user_search . '&sort=2">Title</a></td><td>Description</li>';
            $sort_links .= '<li><a href = "' . $_SERVER['PHP_SELF'] . '?usersearch=' . $user_search . '&sort=4">created_Time</a></td><td>Description</li>';
            break;
        case 3:
            $sort_links .= '<li><a href = "' . $_SERVER['PHP_SELF'] . '?usersearch=' . $user_search . '&sort=4">created_Time</a></td><td>Description</li>';
            $sort_links .= '<li><a href = "' . $_SERVER['PHP_SELF'] . '?usersearch=' . $user_search . '&sort=2">Title</a></td><td>Description</li>';
            break;

        default:
            $sort_links .= '<li><a href = "' . $_SERVER['PHP_SELF'] . '?usersearch=' . $user_search . '&sort=3">created_Time</a></td><td>Description</li>';
    }

    return $sort_links;

}//end of  generate_sort_links




 // This function builds navigational page links based on the current page and the number of pages
function generate_page_links($user_search, $sort, $cur_page, $num_pages) {
    $page_links = '';

    // If this page is not the first page, generate the "previous" link
    if($cur_page >1){
      $page_links .= '<a href="' . $_SERVER['PHP_SELF'] . '?usersearch=' . $user_search . '&sort=' . $sort . '&page=' . ($cur_page - 1) . '"><-</a> ';
    }else{
        $page_links .= '<- ';
    }

    // Loop through the pages generating the page number links
    //loop through all the pages
    for($i = 1; $i <= $num_pages; $i++){
        if($cur_page == $i){
            $page_links .= ' ' . $i;
            //if current page, get rid of the url
        }else{
            $page_links  .= ' <a href="' . $_SERVER['PHP_SELF'] . '?usersearch=' . $user_search . '&sort=' . $sort . '&page=' . $i . '"> ' . $i . '</a>';
            //if not current page, add the url to make it point to next page or previous page
        }

    }


    //// If this page is not the last page, generate the "next" link
    if($cur_page < $num_pages){
        $page_links .= ' <a href="' . $_SERVER['PHP_SELF'] . '?usersearch=' . $user_search . '&sort=' . $sort . '&page=' . ($cur_page + 1) . '">-></a>';
        //if not last page, make -> have a url and can point to the previous one
    }else{
        $page_links .= ' ->';
    }


    return $page_links;

}//end of generate_page_links function




 // Grab the sort setting and search keywords from the URL using GET

 $sort = $_GET['sort'];
 $user_search = $_GET['usersearch'];

 //// Calculate pagination information
 $cur_page = isset($_GET['page']) ? $_GET['page'] : 1;
 $result_per_page = 5;// number of results per page
 $skip = (($cur_page -1) * $results_per_page);


 // Start generating the search results
 echo '<div class="filter">';
 echo generate_sort_links($user_search, $sort);
 echo '</div>';

 // Connect to the database
  require_once('dbinfo.php');
  $dbc = mysqli_connect(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME);


  // Query to get the total results 
  $query = build_query($user_search, $sort);
  $result = mysqli_query($dbc, $query);

  $total = mysqli_num_rows($result);
  $num_pages = ceil($total / $results_per_page);

  // // Query again to get just the subset of results
  $query = $query . " LIMIT $skip, $results_per_page";
  //limit 10,5 means skip the 10 and return 5  
  //$skip = (($cur_page -1) * $results_per_page);

  $result = mysqli_query($dbc, $query);
  while ($row = mysqli_fetch_array($result)) {
    echo '<div class="search_item">';
    echo '<div>' . $row['title'] . '</div>';
    echo '<div>' . $row['created_at'] . '</div>';
    echo '<div>' . substr($row['content'], 0,300) . '</div>';
    echo '</div>';//end of search_item wrap
  }


   // Generate navigational page links if we have more than one page
  if($num_pages >1 ){
    echo generate_page_links($user_search, $sort, $cur_page, $num_pages);
  }

  mysqli_close($dbc);

最佳答案

在这里你可以找到一个简单的无限滚动的方法:

JS:

var callback = function test() {

    // Log how the height increases to the console
    console.log(document.getElementById('infinite').style.height)

    // equivalent to $('#infinite') in jQuery
    var el = document.getElementById('infinite');
    var newHeight = document.getElementById('infinite').offsetHeight + 200;

    // Update the height property of the selected element
    el.style.height = newHeight + 'px';
}

window.addEventListener('scroll', callback, false);

基本上是添加一个附加到滚动的事件监听器，因此，每次我们滚动时，都会触发该函数并增加元素的 height 属性。

您只需要一个 div 作为:

<div id='infinite' style='height: 2000px'></div>

这是一个 fiddle

希望对您有所帮助:)

关于javascript - 如何使用纯javascript在静态页面中制作无限页面滚动效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34180971/

25 4 0
文章推荐： javascript - 如何将 php 值从当前页面传递到弹出页面(外部)
文章推荐： 当前用户不可写 channel "pear.php.net"的 php_dir
文章推荐： php - file_get_contents 与 Lumen
文章推荐： php - 返回对象数组的数组
搜寻专家
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com