第微信小程序自定義滾動選擇器本文實例為大家分享了微信小程序自定義滾動選擇器的具體代碼，供大家參考，具體內(nèi)容如下

最近項目里有個需求要做個滾動選擇器，在網(wǎng)上找了半天也沒找到合適的demo，沒辦法只能發(fā)揮我的聰明才智創(chuàng)造一個，上代碼。

js:

//pages/xuanzeqi/xuanzeqi.js

Page({

/**

*頁面的初始數(shù)據(jù)

*/

data:{

list:['0分','1分','2分','3分','4分','5分','6分','7分','8分','9分','10分','11分','12分','13分','14分','15分','16分','17分','18分','19分','20分','21分','22分','23分','24分','25分','26分','27分','28分','29分','30分','31分','32分','33分','34分','35分','36分','37分','38分','39分','40分','41分','42分','43分','44分','45分','46分','47分','48分','49分','50分','51分','52分','53分','54分','55分','56分','57分','58分','59分'],

box_height:0,//選擇器的高度（非控制項，自動計算），單位px

picker:{//選擇器的控制變量

box_width:200,//選擇器寬度，單位px

choose_item_height:30,//選擇器中每一項選項的高度，單位px

choose_item_font_size:25,//選擇器中每一項選項字體大小，單位px

scroll_animation:true,//是否使用動畫過渡

choose_item_number:13,//選擇器內(nèi)選項的個數(shù)(要求為單數(shù))

bgColor:'#01356f',//選擇器的背景顏色

choose_item_font_color:'white',//選擇器選項的字體顏色

},

mid_item:0,

scroll_into_view:'item_0',//滾動到選項的id

item_height_list:[],//存儲每一項距離頂端的y軸數(shù)據(jù)

picker_value:null,//選擇器的值

opacity_list:[],//透明階梯

cover_list:[],//遮蓋層屬性列表

touchY:-1,

scrollTop:0,

touchMove:function(e){

letthat=this

lettouY=e.touches[0].pageY;

if(that.data.touchY==-1){

that.data.touchY=touY

}else{

letcha=that.data.touchY-touY

that.setData({

scrollTop:that.data.scrollTop+cha

})

that.data.touchY=touY

}

if(that.coverEndTimer){

clearTimeout(that.coverEndTimer);

that.coverEndTimer=null;

}

that.coverEndTimer=setTimeout(function(){

that.data.touchY=-1

},200);

//監(jiān)聽選擇器滾動事件

bindscrollevent:function(e){

letthat=this

//that.flashOpacity(e.detail.scrollTop)

console.log(e)

if(that.scrollEndTimer){

clearTimeout(that.scrollEndTimer);

that.scrollEndTimer=null;

}

that.scrollEndTimer=setTimeout(function(){

console.log("滑動結(jié)束");

//that.flashOpacity(e.detail.scrollTop)

that.itemToMid(e.detail.scrollTop)

that.data.scrollTop=e.detail.scrollTop

},200);

//更新透明度

flashOpacity:function(e){

letthat=this

that.setData({

item_height_list:that.data.item_height_list

})

for(letiinthat.data.item_height_list){

if(that.data.item_height_list[i].bottomethat.data.item_height_list[i].top=e){

for(letj=0;jthat.data.opacity_list.length;j++){

if(i-(j+1)=0){

that.data.item_height_list[i-(j+1)].opacity=that.data.opacity_list[j]

}

leta=parseInt(i)

if(a+(j+1)that.data.list.length){

that.data.item_height_list[a+(j+1)].opacity=that.data.opacity_list[j]

}

}

leta=parseInt(i)

for(letjinthat.data.item_height_list){

if(!(j=a-that.data.opacity_list.lengthj=a+that.data.opacity_list.length)){

that.data.item_height_list[j].opacity=0

}

}

that.setData({

item_height_list:that.data.item_height_list

})

break;

}

}

//根據(jù)滾動距離滾動到選項中間

itemToMid:function(e){

letthat=this

console.log("執(zhí)行了",e)

for(letiinthat.data.item_height_list){

if(that.data.item_height_list[i].bottomethat.data.item_height_list[i].top=e){

console.log(that.data.item_height_list[i].bottom,that.data.item_height_list[i].top)

if(ithat.data.mid_item-1){

that.setData({

scroll_into_view:'cushion_top_'+i

})

}else{

console.log(parseInt(i)-that.data.mid_item+1)

that.setData({

scroll_into_view:'item_'+(parseInt(i)-that.data.mid_item+1)

})

}

that.setData({

picker_value:that.data.list[i]

})

break;

}

}

//初始化

init:function(e){

letthat=this

//先計算該選擇器的高度（根據(jù)每項高度和項目個數(shù)計算）單位px

//如果選擇器個數(shù)填寫為雙數(shù)，則強(qiáng)制-1變?yōu)閱螖?shù)

if(that.data.picker.choose_item_number%2==0){

that.setData({

['picker.choose_item_number']:that.data.picker.choose_item_number-1

})

}

//通過乘積計算選擇器高度

that.setData({

box_height:that.data.picker.choose_item_number*that.data.picker.choose_item_height

})

//計算選擇器中間項應(yīng)該是第幾項

that.setData({

mid_item:(that.data.picker.choose_item_number+1)/2

})

//初始化遮蓋層透明階梯透明度從（0.1到0.9）

letunit=Math.round(80/(that.data.mid_item-1))/**階梯單元*/

for(leti=0;ithat.data.mid_item-1;i++){

that.data.opacity_list.push((80-i

*unit)/100)

}

that.setData({

opacity_list:that.data.opacity_list

})

//初始化遮蓋層列表

for(leti=0;ithat.data.opacity_list.length;i++){

letrow={opacity:that.data.opacity_list[i]}

that.data.cover_list.push(row)

}

that.data.cover_list.push({opacity:0})

for(leti=0;ithat.data.opacity_list.length;i++){

letrow={opacity:that.data.opacity_list[that.data.opacity_list.length-1-i]}

that.data.cover_list.push(row)

}

that.setData({

cover_list:that.data.cover_list

})

//初始化選擇器中每一項高度

//初始化選項透明度，用于突出選中選項

for(letiinthat.data.list){

letrow={top:0,bottom:0};

//lettopBase=(that.data.mid_item-1)*that.data.picker.choose_item_height//頂端空白區(qū)域占用大小

lettopBase=0

row.top=topBase+i*that.data.picker.choose_item_height

if(i==that.data.list.length-1){

row.bottom=topBase+(parseInt(i)+1)*that.data.picker.choose_item_height+100

}else{

row.bottom=topBase+(parseInt(i)+1)*that.data.picker.choose_item_height

}

that.data.item_height_list.push(row)

that.setData({

item_height_list:that.data.item_height_list

})

}

/**

*生命周期函數(shù)--監(jiān)聽頁面加載

*/

onLoad:function(options){

letthat=this

that.init();

/**

*生命周期函數(shù)--監(jiān)聽頁面初次渲染完成

*/

onReady:function(){

/**

*生命周期函數(shù)--監(jiān)聽頁面顯示

*/

onShow:function(){

/**

*生命周期函數(shù)--監(jiān)聽頁面隱藏

*/

onHide:function(){

/**

*生命周期函數(shù)--監(jiān)聽頁面卸載

*/

onUnload:function(){

/**

*頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作

*/

onPullDownRefresh:function(){

/**

*頁面上拉觸底事件的處理函數(shù)

*/

onReachBottom:function(){

/**

*用戶點擊右上角分享

*/

onShareAppMessage:function(){

})

WXML:

view

scroll-viewscroll-y="{{true}}"scroll-with-animation="{{picker.scroll_animation}}"bindscroll="bindscrollevent"scroll-into-view="{{scroll_into_view}}"scrollTop='{{scrollTop}}'

viewwx:for="{{mid_item-1}}"id="cushion_top_{{index}}"·/view

viewwx:for="{{list}}"id="item_{{index}}"{{item}}/view

viewwx