移动端以刻度或尺度滑动方式选择年龄收入等

Posted 2020-09-17 hedy327

实现方式用swiper.js

 

 

（以下以年龄为例）

1   <div class=\'testTwo\'>
2       <p class=\'ageSel\'>您的年龄是<span class=\'scroAge\'> 20 </span>岁</p>
3 　 </div>
4     <div class="swiper-container">
5        <span class="after"></span>
6        <div class="swiper-wrapper">
7        </div>
8     </div>

 

 1   　　var ageLen=76
 2       var strhtml=\'\'
　　　　　//动态生成0-76岁
 3       for(var i=0;i<ageLen;i++){
 4         strHtml+="<div class=\'swiper-slide\'><span>"+i+"</span></div>"
 5       }
 6       $(".swiper-wrapper").append(strHtml)
 7 
 8       var swiper = new Swiper(\'.swiper-container\', {
 9           initialSlide: 20,   //初始年龄显示在20岁
10           pagination: \'.swiper-pagination\',
11           slidesPerView: 6,
12           centeredSlides: true,
13           paginationClickable: true,
14           spaceBetween: 0,
15           onInit: function(swiper){
16             var len=$(".swiper-slide").length
17             var lenW=$(".swiper-slide").width()
18             $(\'.swiper-wrapper\').width(len*lenW);
19           },
20           onSlideChangeEnd: function(swiper){
21             $(".scroAge").html(\' \'+$(\'.swiper-slide\').eq(swiper.activeIndex).find(\'span\').html()+\' \')
22             scroAge=$(\'.swiper-slide\').eq(swiper.activeIndex).find(\'span\').html()
23           //console.log($(\'.swiper-slide\').eq(swiper.activeIndex).html()) //切换结束时，告诉我现在是第几个slide
24         }
25       });