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

实现方式用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       });

 

转载于:https://www.cnblogs.com/fxk327/p/6825163.html