實現方式用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       });

移動端以刻度或尺度滑動方式選擇年齡收入等