2021年12月14日
swiper7-33. 添加函数开启监听轮播图的各种事件(点击，滑动...)
摘要： 1 <template> 2 <div class="swiper mySwiper"> 3 <div class="swiper-wrapper"> 4 <div class="swiper-slide">Slide 1</div> 5 <div class="swiper-slide">Slid 阅读全文
posted @ 2021-12-14 06:40 sky-su 阅读(1299) 评论(0) 推荐(0)
swiper7-32. 双击图片放大
摘要： 1 <template> 2 <div 3 style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff" 4 class="swiper mySwiper" 5 > 6 <div class="swiper-wrap 阅读全文
posted @ 2021-12-14 06:39 sky-su 阅读(681) 评论(0) 推荐(0)
swiper7- 30. 开启轮播图片懒加载
摘要： 1 <template> 2 <div 3 style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff" 4 class="swiper mySwiper" 5 > 6 <div class="swiper-wrap 阅读全文
posted @ 2021-12-14 06:38 sky-su 阅读(484) 评论(0) 推荐(0)
swiper7-31. 设置轮播图的容器自动适应内容的高度
摘要： 1 <template> 2 <div class="swiper mySwiper"> 3 <div class="swiper-wrapper"> 4 <div class="swiper-slide">Slide 1</div> 5 <div class="swiper-slide">Slid 阅读全文
posted @ 2021-12-14 06:38 sky-su 阅读(452) 评论(0) 推荐(0)
swiper7-29. 轮播图上放文字，轮播图成为背景
摘要： 1 <template> 2 <div 3 style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff" 4 class="swiper mySwiper" 5 > 6 <div 7 class="parallax- 阅读全文
posted @ 2021-12-14 06:37 sky-su 阅读(964) 评论(0) 推荐(0)
swiper7-28. history 历史记录导航，即每张轮播图都有url，可以返回，但是在vue中不行
摘要： 1 <template> 2 <div class="swiper mySwiper"> 3 <div class="swiper-wrapper"> 4 <div data-history="1" class="swiper-slide">Slide 1</div> 5 <div data-his 阅读全文
posted @ 2021-12-14 06:36 sky-su 阅读(222) 评论(0) 推荐(0)
swiper7-27. 切换页面是浏览器的网址会有所变化，就像锚点一样
摘要： 1 <template> 2 <div class="swiper mySwiper"> 3 <div class="swiper-wrapper"> 4 <div data-hash="slide1" class="swiper-slide">Slide 1</div> 5 <div data-h 阅读全文
posted @ 2021-12-14 06:35 sky-su 阅读(117) 评论(0) 推荐(0)
swiper7-26. 轮播图下面加缩略图，并且无限滚动
摘要： 1 <template> 2 <div class="swiper-twenty-eight"> 3 <div 4 style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff" 5 class="swiper myS 阅读全文
posted @ 2021-12-14 06:34 sky-su 阅读(632) 评论(0) 推荐(0)
2021年12月13日
02. 高德地图添加多一个图层
摘要： 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>02高德地图添加多一个图层</title> 6 <style type="text/css"> 7 html, 8 body { 9 height: 100%; 阅读全文
posted @ 2021-12-13 12:04 sky-su 阅读(728) 评论(0) 推荐(0)
2021年12月12日
swiper7-25. 轮播图下面添加一个缩略图
摘要： 1 <template> 2 <div class="swiper-twenty-seven"> 3 <div 4 style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff" 5 class="swiper myS 阅读全文
posted @ 2021-12-12 18:07 sky-su 阅读(304) 评论(0) 推荐(0)