1.模拟下商品详情页的点击大图效果
2.活动到最后一张继续滑动查看图文详情页
3.为了做出轮播的效果 引入swiper插件
问题1
- 首先可以在商品详情页通过id创建一个swiper,点击进入大图模式后,即在原页面上面添加一个遮罩层,在遮罩层上面通过id创建另一个swiper。此方法的弊端在于,用户点击图片进入大图后,首先显示对应的图片较难实现,因此放弃。
- 那就只创建一个swiper,通过点击事件来切换背景样式,来模拟进入大图。此方法的弊端在于切回商品详情模式时,不利于控制;
- 通过
toggleClass()
来切换进入退出大图模式,代码简洁,弊端在于此方法的点击对象是一个,因此在进入大图模式后只能通过再次点击图片退出大图模式 - 通过分开点击添加删除className
addClass()
与removeClass()
来控制,只能实现一次进入退出,此后便无法继续添加类名,原因未知。 - 通过添加按钮来退出大图模式。
- 综合考虑,使用第二种方法。
问题2
- 当图片滑动到最后一张时,进入图文详情页,对于我们在实际工作中,为了减少请求次数,往往后台会直接返回一个json数据,里面包含商品详情页的数据,和图文详情的数据,因此通过商品详情页的显示与隐藏来模拟进入详情页
-
swiper
有个方法onReachEnd
,当图片滚动到最后一张时触发。但是和我们的需求不同,因此需要里面继续添加判断条件。
- html代码
<div class="container" id="container"> <div class="swiper-container Swiper1"> <div class="swiper-wrapper"> <div class="swiper-slide">![](https://img.haomeiwen.com/i3179641/898f78cbc8493cab.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</div> <div class="swiper-slide">![](https://img.haomeiwen.com/i3179641/03d31e37c6d4afb9.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</div> <div class="swiper-slide">![](https://img.haomeiwen.com/i3179641/c9473f06b040a465.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</div> </div> <div class="swiper-pagination swiper-pagination1" style="display:inline-block"></div> <div class="test">继续滑动查看图文详情</div> </div> </div>
- js代码
var lll=$('.swiper-slide') var mySwiper = new Swiper('.Swiper1', { pagination : '.swiper-pagination', paginationType : 'bullets', paginationClickable :true, //滑动到最后一页,继续滑动加载图文详情 onReachEnd: function(swiper){ var aa=parseInt($(this).index())//判断当前是否为最后一张 if (aa=-1){ $('.test').css('display','block') setInterval(function(){//通过设置定时器来监测用户的是否继续滑动 var distance=$('.swiper-wrapper').css('transform') var arr=distance.split(",") var width=screen.width*(lll.length-1)+screen.width/4 if(arr[4]<-width){ $('#picDetails1').css('display','block') } },1000) } } }) $('.swiper-slide').on('click',function () { $('.container').addClass('DetailsShade') $('.container section').addClass('ShareHide') $('#closeBig').css('display','block') }); $('#closeBig').on('click',function (){ $('.container').removeClass('DetailsShade'); $('.container section').removeClass('ShareHide') $('#closeBig').css('display','none') })
网友评论