使用Swiper幻灯片组件
-
将幻灯片图片地址保存到数据库中,表定义如下
$table->increments('id'); $table->timestamps(); $table->string('title')->comment('标题|input'); $table->string('url')->comment('链接|input'); $table->text('pic')->comment('图片|image'); $table->integer('click')->comment('查看次数|input'); $table->tinyInteger('enable')->default(1)->comment('状态|radio|1:开启,2:关闭');
-
自定义Blade标签
在服务提供者的boot方法中使用自定义的TapService,用于对Blade标签进行注册
其中,TapService方法如下
<?php
namespace Modules\Artical\Services;
use Blade;
use function foo\func;
class TagService
{
// boot中使用 (new TagService())->make()
public function make()
{
$this->slide();
}
public function slide()
{
Blade::directive('slide', function ($expression) {
$expression = $expression ?: '["height"=>"300px"]';
$php = <<<php
<div class="swiper-container">
<div class="swiper-wrapper">
<?php
\$params = $expression;
\$data = \Modules\Artical\Entities\Slide::where('enable',1)->get();
foreach(\$data as \$field):
echo '<div class="swiper-slide">
<a href="'.\$field['url'].'"><img src="'.\$field['pic'].'"/></a>
</div>';
endforeach;
?>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<style>
.swiper-container {
width: 100%;
height:<?php echo \$params['height'];?>px;
}
.swiper-container img{
width:100%;
height:<?php echo \$params['height'];?>px;
}
</style>
<script>
var mySwiper = new Swiper ('.swiper-container', {
loop: true,
autoplay:true,
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 如果需要滚动条
scrollbar: {
el: '.swiper-scrollbar',
},
})
</script>
php;
return $php;
});
}
}
使用了此定界符,方便插入html标签
<<<php
php;
当定界符中使用<?php ?>
并在之中又使用了变量时
变量前需要追加反斜杠,以及引用的class也要反斜杠(全局声明)
\$data = \Modules\Artical\Entities\Slide::where('enable',1)->get();
闭包函数传递变量的时候,要先在PHP标签中把变量赋值给带斜杠的变量
\$params = $expression;
-
之后就可以直接使用自己定义的
@slide
标签了 -
当想创建
@category @endcategory
标签包裹html时,同样可以用这种方法,例如:
public function category() {
// 定义循环开始标签
Blade::directive('category', function ($expression) {
$expression = $expression ?: '[]';
$php = <<<php
<?php
\$paraments = $expression;
\$data = \Modules\Artical\Entities\Category::get()->toArray();
\$data = (new \Houdunwang\Arr\Arr)->channelList(\$data, 0, " ", 'id');
foreach(\$data as \$field):
?>
php;
return $php;
});
// 定义循环结束标签
Blade::directive('endcategory', function () {
return '<?php endforeach; ?>';
});
}