美文网首页
商品详情页的点开大图效果

商品详情页的点开大图效果

作者: classic_ | 来源:发表于2017-01-20 10:30 被阅读0次

    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') })

    相关文章

      网友评论

          本文标题:商品详情页的点开大图效果

          本文链接:https://www.haomeiwen.com/subject/raswbttx.html