Laravel 简单实现Ajax滚动加载

开发H5项目的时候我们总是需要用到下拉滚动刷新的方式加载页面。这里用 Laravel 实现一下，直接上代码：

创建模型

这里我们不妨创建一个 文章（Post）模型， 并且生成测试数据 50 条吧。

php artisan make:model -m

模型Post.php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Post extends Model
{

    public $fillable = ['title','description'];

   
}

迁移文件

use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreatePostTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->increments('id');
            $table->string('title');
            $table->text('description');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::drop("posts");
    }
}

测试数据 ModelFactory.php

$factory->define(App\Post::class, function (Faker\Generator $faker) {
    return [
        'title' => $faker->sentence,
        'description' => $faker->paragraph,
    ];
});

填充

call(UsersTableSeeder::class);
        factory(App\Post::class, 50)->create();
    }
}

路由

Route::get('my-post', 'PostController@myPost');

控制器

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Http\Requests;
use App\Post;

class PostController extends Controller
{

    public function myPost(Request $request)
    {
        $posts = Post::paginate(6);  

        if ($request->ajax()) {
            $view = view('data',compact('posts'))->render();
            return response()->json(['html'=>$view]);
        }

        return view('my-post',compact('posts'));
    }

}

视图文件 resources/view/my-post.php

    
    
    
    




    
Laravel 分页滚动加载
    

    

        @include('data')
    



    
![](./loader.gif)加载更多……

resources/view/data.php

@foreach($posts as $post)

    
{{ $post->title }}
    
{{ str_limit($post->description, 400) }}

    

        Read More
    

    


@endforeach

效果：

image