實(shí)現(xiàn)方式用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=''
　　　　　//動(dòng)態(tài)生成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()) //切換結(jié)束時(shí)，告訴我現(xiàn)在是第幾個(gè)slide 24 } 25 });

?

轉(zhuǎn)載于:https://www.cnblogs.com/fxk327/p/6825163.html

總結(jié)

以上是生活随笔為你收集整理的移动端以刻度或尺度滑动方式选择年龄收入等的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。