本文作者:心月

YII2高级版框架搭建完整博客系统教程——轮播图组件功能

心月IT博客 03-18
YII2高级版框架搭建完整博客系统教程——轮播图组件功能摘要:文章创建、文章详情、文章列表都已经实现,接下来要做的是首页布局。首页布局的第一个任务是轮播图。这里我们同样用组件的形式来实现轮播图功能,然后通过组件调用的方式把轮播图挂到首页。

文章创建、文章详情、文章列表都已经实现,接下来要做的是首页布局。首页布局的第一个任务是轮播图。这里我们同样用组件的形式来实现轮播图功能,然后通过组件调用的方式把轮播图挂到首页。

1、创建自定义轮播图组件目录结构

创建自定义轮播图组件目录结构

2、轮播图组件类实现

<?php
namespace frontend\widgets\banner;

/**
 * 轮播图组件
 * Class
 * @package frontend\widgets\banner
 */

use yii\bootstrap\Widget;

class BannerWidget extends Widget
{
    public $items = [];

    /**
     * 初始化,如果items没有传值则使用默认设置banner
     */
    public function init()
    {
        if (empty($this->items)){
            $this->items = [
                [
                    'label'=>'demo',
                    'image_url'=>'/statics/images/banner1.jpg',
                    'url'=>['site/index'],
                    'html'=>'',
                    'active'=>'active',
                ],
                [
                    'label'=>'demo',
                    'image_url'=>'/statics/images/banner2.jpg',
                    'url'=>['site/index'],
                    'html'=>'',
                    'active'=>'',
                ],
                [
                    'label'=>'demo',
                    'image_url'=>'/statics/images/banner3.jpg',
                    'url'=>['site/index'],
                    'html'=>'',
                    'active'=>'',
                ],
            ];
        }
    }

    /**
     * 组件运行,把items数据渲染到组件views下的index
     * @return string
     */
    public function run()
    {
        $data['items'] = $this->items;

        return $this->render('index', ['data'=>$data]);
    }
}

banner组件类实现

3、组件数据渲染

<?php
use yii\helpers\Url;
?>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <?php foreach ($data['items'] as $k=>$list):?>
            <li data-target="#carousel-example-generic" data-slide-to="<?=$k?>" class="<?=(isset($list['active']) && $list['active'])?'active':''?>"></li>
        <?php endforeach;?>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner home-banner" role="listbox">
        <?php foreach ($data['items'] as $k=>$list):?>
            <div class="item <?= (isset($list['active'])&&$list['active'])?'active':'';?>">
                <a href="<?=Url::to($list['url'])?>"><img src="<?=$list['image_url']?>" alt="<?=$list['label']?>">
                    <div class="carousel-caption">
                        <?=$list['html']?>
                    </div>
                </a>
            </div>
        <?php endforeach;?>

    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>

组件数据渲染

4、首页调用banner轮播图组件

<?php

/* @var $this yii\web\View */

use frontend\widgets\banner\BannerWidget;

$this->title = '个人博客-首页';
?>
<div class="row">
    <div class="col-lg-9">
        <?= BannerWidget::widget()?>
    </div>
    <div class="col-lg-3"></div>

</div>

首页调用轮播图组件

如果不想用默认配置轮播图,可以<?= BannerWidget::widget()?>中的widget传数组参数,参数格式参照组件中的默认配置二维数组格式,里面的一个小一维数组代表一张轮播图,其中'active'=>'active'表示轮播图默认第一张显示:

[
                [
                    'label'=>'demo',
                    'image_url'=>'/statics/images/banner1.jpg',
                    'url'=>['site/index'],
                    'html'=>'',
                    'active'=>'active',
                ],
                [
                    'label'=>'demo',
                    'image_url'=>'/statics/images/banner2.jpg',
                    'url'=>['site/index'],
                    'html'=>'',
                    'active'=>'',
                ],
                [
                    'label'=>'demo',
                    'image_url'=>'/statics/images/banner3.jpg',
                    'url'=>['site/index'],
                    'html'=>'',
                    'active'=>'',
                ],
            ];

首页轮播图调用效果

首页轮播图组件调用效果

5、首页中文章列表同样可以通过调用之前写的自定义文章列表组件显示

<?php

/* @var $this yii\web\View */

use frontend\widgets\banner\BannerWidget;
use frontend\widgets\post\PostWidget;

$this->title = '个人博客-首页';
?>
<div class="row">
    <div class="col-lg-9">
        <!--轮播图-->
        <?= BannerWidget::widget()?>

        <!--文章列表-->
        <?= PostWidget::widget(['more'=>false])?>
    </div>
    <div class="col-lg-3"></div>

</div>

首页调用文章列表组件

显示效果:

首页轮播图和文章列表调用效果


文章版权及转载声明:

本文由 心月IT技术博客 博主整理于 03-18
若转载请注明原文及出处:https://www.xinyueseo.com/yii/196.html

分享到:
赞(
发表评论
快捷输入:

验证码

    评论列表 (有 1 条评论,人围观)参与讨论
    网友昵称:心月IT博客网友
    心月IT博客网友游客03-22回复
    写的很详细,点个赞