wuhui_zzw
/
wyyl
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

!103 Fix that the slideshow module swiper plugin cannot be loaded for the first time 

* Fix that the slideshow module swiper plugin cannot be loaded for the first time
This commit is contained in:
pushuo 2023-05-17 06:22:46 +00:00 committed by Edward Yang
parent 2fd52c1761
commit 0bd592b648
2 changed files with 55 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
resources/beike/shop/default/js/common.js vendored
View File

@ -3,7 +3,7 @@
* @link https://beikeshop.com
* @Author pu shuo <pushuo@guangda.work>
* @Date 2022-09-09 19:16:39
* @LastEditTime 2023-02-13 09:26:05
* @LastEditTime 2023-05-17 13:49:44
*/
export default {
@ -129,4 +129,35 @@ export default {
+ ',width=' + iWidth + ',innerWidth=' + iWidth + ',top=' + iTop + ',left=' + iLeft
+ ',toolbar=no,menubar=no,scrollbars=auto,resizeable=no,location=no,status=no');
},
// 判断 js 插件是否加载，如果未加载则往页面添加 script 标签
loadScript(url, callback) {
// 判断页面中是否已经存在指定的 js 插件
if (!document.querySelector(`script[src="${url}"]`)) {
// 创建一个新的 script 标签
const script = document.createElement('script');
script.src = url;
// 将 script 标签添加到 head 标签中
document.head.appendChild(script);
// 监听 js 插件加载完成事件
script.onload = function () {
callback && callback();
}
} else {
callback && callback();
}
},
// 判断 css 插件是否加载，如果未加载则往页面添加 link 标签
loadStyle(url) {
// 判断页面中是否已经存在指定的 css 插件
if (!document.querySelector(`link[href="${url}"]`)) {
// 创建一个新的 link 标签
const link = document.createElement('link');
link.href = url;
link.rel = 'stylesheet';
// 将 link 标签添加到 head 标签中
document.head.appendChild(link);
}
}
}

50
themes/default/design/slideshow.blade.php
View File

@ -1,8 +1,3 @@
@push('header')
<script src="{{ asset('vendor/swiper/swiper-bundle.min.js') }}"></script>
<link rel="stylesheet" href="{{ asset('vendor/swiper/swiper-bundle.min.css') }}">
@endpush
<section class="module-item {{ $design ? 'module-item-design' : ''}}" id="module-{{ $module_id }}">
@include('design._partial._module_tool')
@ -10,9 +5,10 @@
<div class="swiper module-swiper-{{ $module_id }} module-slideshow">
<div class="swiper-wrapper">
@foreach($content['images'] as $image)
<div class="swiper-slide">
<a href="{{ $image['link']['link'] ?: 'javascript:void(0)' }}" class="d-flex justify-content-center"><img src="{{ $image['image'] }}" class="img-fluid"></a>
</div>
<div class="swiper-slide">
<a href="{{ $image['link']['link'] ?: 'javascript:void(0)' }}" class="d-flex justify-content-center"><img
src="{{ $image['image'] }}" class="img-fluid"></a>
</div>
@endforeach
</div>
<div class="swiper-pagination slideshow-pagination-{{ $module_id }}"></div>
@ -22,26 +18,26 @@
</div>
<script>
new Swiper ('.module-swiper-{{ $module_id }}', {
loop: '{{ count($content['images']) > 1 ? true : false }}', // 循环模式选项
autoplay: true,
pauseOnMouseEnter: true,
clickable :true,
bk.loadStyle('{{ asset('vendor/swiper/swiper-bundle.min.css') }}');
bk.loadScript('{{ asset('vendor/swiper/swiper-bundle.min.js') }}', () => {
new Swiper ('.module-swiper-{{ $module_id }}', {
loop: '{{ count($content['images']) > 1 ? true : false }}', // 循环模式选项
autoplay: true,
pauseOnMouseEnter: true,
clickable :true,
// 如果需要分页器
pagination: {
el: '.slideshow-pagination-{{ $module_id }}',
clickable :true
},
// 如果需要分页器
pagination: {
el: '.slideshow-pagination-{{ $module_id }}',
clickable :true
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.slideshow-btnnext-{{ $module_id }}',
prevEl: '.slideshow-btnprev-{{ $module_id }}',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.slideshow-btnnext-{{ $module_id }}',
prevEl: '.slideshow-btnprev-{{ $module_id }}',
},
})
})
</script>
</section>
</section>