Swiper滚动图片显示当前图片是第几张图片

Posted 2023-04-09

滑动到下一张图片时数字变为2/40,求大神解答。

参考技术A /*单个切换的幻灯片 s*/
.banner
position: relative;
overflow: hidden;

.banner-publicHt
height: 396px;

.img-box
display: inline-block;
width: 100%;

.swiper-slide
text-align: center;
font-size: 36px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: left;
-ms-flex-pack: left;
-webkit-justify-content: left;
justify-content: left;
-webkit-box-align: left;
-ms-flex-align: left;
-webkit-align-items: left;
align-items: left;

.banner .swiper-slide img
width: 100%;

.banner .swiper-pagination-bullet-active
background: url("/img/off.png") no-repeat;

.banner .swiper-pagination-bullet
background: url("/img/on.png") no-repeat;

.banner .swiper-container-horizontal>.swiper-pagination
left: 160px;

.num-check
position: absolute;
right: 0;
bottom: 0px;
background-color: #000;
opacity: 0.7;
width: 100%;
height: 50px;
z-index: 998;

.num-choose
position: absolute;
right: 5%;
bottom: 0px;
color: #FCFBFB;
font-size: 22px;
display: inline-block;
width: 90%;
height: 50px;
line-height: 50px;
z-index: 999;
text-align: right;

/*单个切换的幻灯片 e*/

<div class="banner banner-publicHt">
<!--单个幻灯片 s-->
<div class="swiper-container banner-publicHt">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a class="img-box" href="javascript:void(0);">
<img class="banner-publicHt" src="../swiper/img/banner1.jpg">
</a>
</div>
<div class="swiper-slide">
<a class="img-box" href="javascript:void(0);">
<img class="banner-publicHt" src="../swiper/img/banner2.jpg">
</a>
</div>
<div class="swiper-slide">
<a class="img-box" href="javascript:void(0);">
<img class="banner-publicHt" src="../swiper/img/banner2.jpg">
</a>
</div>
<div class="swiper-slide">
<a class="img-box" href="javascript:void(0);">
<img class="banner-publicHt" src="../swiper/img/banner2.jpg">
</a>
</div>
<div class="swiper-slide">
<a class="img-box" href="javascript:void(0);">
<img class="banner-publicHt" src="../swiper/img/banner2.jpg">
</a>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination" style="display: none;"></div>
<div class="num-check">
<p class="num-choose">
<span class="checkLength"></span>
/
<span class="allImgLength"></span>
</p>
</div>
</div>
<!--单个幻灯片 e-->
</div>
$(function()
$(".checkLength").html(1);
/*单个切换的幻灯效果*/
var swiper = new Swiper('.banner .swiper-container',
pagination: '.banner .swiper-pagination',
paginationClickable: true,
spaceBetween: 30,
/*每隔5秒就进行一次图片切换*/
autoplay:5000,
// direction: 'vertical',
/*用户操作之后（swipes,arrow以及pagination 点击）autoplay不会被禁掉*/
autoplayDisableOnInteraction:false,
onSlideChangeStart: function(swiper)
$(".checkLength").html(swiper.activeIndex+1);

);
/*获取图片长度*/
var imgAllLength = $(".swiper-slide .banner-publicHt").length;
console.log(imgAllLength);
$(".allImgLength").html(imgAllLength);

/*图片报错或者为空的时候默认现在这张图片*/
$(".banner-publicHt").on('error',function()
$(this).prop('src','../swiper/img/banner1.jpg');
)
)

小程序 - 图片列表显示lazyload效果

在做一个短视频平台，涉及到的都是一些列表模块。因为小程序没有提供lazyload api，所以只能自己写一个了。。。

开发涉及 <scroll-view></scroll-view>滚动机制及queryMultipleNodes方法。

html：

1 <swiper-item class=‘slider-swiper‘ style=‘height:100%‘>
2   <scroll-view scroll-y=‘true‘ style="height:100%" lower-threshold=‘200‘ bindscroll="view_scroll" bindscrolltolower=‘scrollHandler‘>
3  <block wx:for="{{star_list}}">
4      <view class=‘video‘>
5              <image src=‘{{index < lazyIndex  ? item.photo.thumb : "/assets/img/default_img.jpg"}}‘ />  //如果当前图片索引小于lazyIndex则使用默认图片
6               </view>
7     </block>
8   </scroll-view>
9 </swiper-item>

js:

 1 // 获取列表到顶部的距离
 2   queryMultipleNodes: function () {
 3     var query = wx.createSelectorQuery()
 4     query.select(‘#lazyStarts‘).boundingClientRect()
 5     query.selectViewport().scrollOffset()
 6     query.exec(function (res) {
 7       fixedHei = res[0].top // 获取列表到顶部的距离
 8     })
 9   },
10   //  理解思路：获取可视区域。距离顶部的距离减去固定高度(导航、轮播、话题)。除播映列表高度，从而获取到index,由index设置列表lazyload
11   view_scroll: function (e) {
12     let cls = this;
13     wx.getSystemInfo({
14       success: function (res) {
15         wHeight = res.windowHeight
16       },
17     })
18     if (parseInt(e.detail.scrollTop) > parseInt(wx.getStorageSync(‘shei‘))) {
19       wx.setStorageSync(‘shei‘, e.detail.scrollTop); //设置缓存，用于在二次打开后，去除lazyload效果
20       let scrollTop = (e.detail.scrollTop) - fixedHei; //滚动的高度减去列表到顶部的距离，间接的得到列表滚动距离
21       let lazy_index = Math.ceil((scrollTop / 303.6)); //通过滚动的距离除上每张图片的高度，从而获取当前列表的index
22       cls.setData({
23         lazyIndex: lazy_index + 2 //用于设置index延迟，可根据自己的情况修改
24       })
25     }
26   },

效果：