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

標籤：new   ges   ebe   end   .com   hang   實現   between   png   

實現方式用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").length17             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()) //切換結束時，告訴我現在是第幾個slide24         }25       });

 

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