用swiper做简单的评分效果（获取swiper-slide中的值）

最新推荐文章于 2025-05-09 14:48:11 发布

专写bug~~~

最新推荐文章于 2025-05-09 14:48:11 发布

阅读量4.1k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_32538087/article/details/81567189

本文介绍了如何利用Swiper库创建一个评分效果，将图片替换为数字，通过form和隐藏的input元素收集用户评分。在swiper滑动结束时，利用`slideChangeTransitionEnd`回调获取当前slide的值并赋给input。当用户完成评分，将分数提交给后台存储。再次查看时，通过设置initialSlide属性，使Swiper滚动到上次评分对应的数字。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原理：和做平常的轮播图相同，只不过是把图片换成数字。评分效果评的分是要提交给后台的，所以要用到form（代码中没有显示，在最外层）和input（type=hidden,不要让input显示出来），每当滚动到某个数字的时候要获取到这个swiper-slide中的数字，并赋值给 input的value上，用swiper的on方法和slideChangeTransitionEnd（swiper从一个slide过渡到另一个slide结束时执行。）回调函数去触发滚动到那个数字就获取这个数字并赋值给这个小块的input。

当评分结束，把评分的结果返回给后台，后台会进行记录，当我再次查看我的评分的时候显示我上次的评分（打开页面让轮播图滚动到上次评分的数字）.

改变内置的index值（initialSlide），把当前有swiper-slide-active的class名的下标赋值给initialSlide

1、html代码

<div class="grade">
     <div class="swiper-container">
          <div class="swiper-wrapper">
              <div class="swiper-slide">0</div>
              <div class="swiper-slide">1</div>
              <div class="swiper-slide">2</div>
              <div class="swiper-slide">3</div>
              <div class="swiper-slide">4</div>
              <div class="swiper-slide">5</div>
              <div class="swiper-slide">6</div>
              <div class="swiper-slide">7</div>
              <div class="swiper-slide">8</div>
              <div class="swiper-slide">9</div>
              <div class="swiper-slide">10</div>
         </div>
    </div>
    <input type="hidden" value="0">                                     
    <div class="gradeshadow"></div>
</div>

2、css样式，先引入swiper.css

.grade{
    width:100%;
    height:100%;
}
.swiper-container{
    width:40px;
    height:40px;
    line-height:40px;
    position: absolute;
    top:50%;
    left:50%;
    margin-left:-20px;
    margin-top:-20px;
    /*border:1px solid #626262;*/
    z-index:2;
    display:flex;
    flex-direction: column;
    color:#fff !important;
    background:#1356c6;
    overflow: visible;
    opacity:0;
}

.gradeshadow{
    width:40px;
    height:40px;
    position: absolute;
    top:50%;
    left:50%;
    margin-left:-20px;
    margin-top:-20px;
    border-bottom:2px solid #afafae;
    cursor: pointer;
    z-index: 3;
} 
.swiper-wrapper{
    height:40px;
    width:40px;
    
}
.swiper-slide{
    border-left:1px solid #dbdbd9;
    border-right:1px solid #dbdbd9;
    width:40px;
    height:40px !important;
    line-height:40px;
    vertical-align: middle;
    font-size:16px;
    cursor: pointer;
}

3、js代码，先引入swiper.js

 $(function(){
        setTimeout(function(){
            $('.swiper-container').each(function(){
                var that = $(this);
                var initialSlideIndex = parseInt(that.parent().find(':hidden').val());
                if(isNaN(initialSlideIndex) || initialSlideIndex < 0 || initialSlideIndex > 10){
                    initialSlideIndex = 0;
                }
                new Swiper(that,{
                    direction : 'vertical',
                    mousewheel: true,
                    speed:50,
                    initialSlide: initialSlideIndex,
                    on:{
                        slideChangeTransitionEnd:function(){
                            var curSwiper = this;
                            var curSwiperContainer = $(curSwiper.el)
                            curSwiperContainer.siblings(':hidden').val(curSwiperContainer.find('.swiper-slide-active').html());
                        }
                    }
                });
            });
            setTimeout(function(){
                $('.gradeshadow').trigger("click");
            },10);
        },190);
    });
    
        //评分横线消失
        $(".gradeshadow").each(function(k,v){
                    $(v).click(function(e){
                        $(this).siblings(".grade .swiper-container").css({opacity:1})
                        $(this).css({display:"none"})
                    })
                })

        //提交按钮颜色切换
        $('.bottom-button').children().each(
            function (k, v) {
                $(v).click(
                    function () {
                        $(v).addClass("btn-active")
                        $(v).siblings().removeClass("btn-active")
                    }

                )
            }
        )
        
//点击提交按钮进行判断，评价没有完成显示弹出框
        $("#myModal").click(
            function () {
                 
                 $('.gradeshadow').each(function(q,z){
                       if($(z).css('display') == 'block'){
                       $('.smodal').css({display:"block"})
                 }
             })
        })

        //模态窗口消失
        $(".smodal").click(function () {
            $(this).css({
                display: "none"
            })
        })