首页 > 代码库 > 移动端以刻度或尺度滑动方式选择年龄收入等

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

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

 

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