微信小程序自定義滾動選擇器
本文實例為大傢分享瞭微信小程序自定義滾動選擇器的具體代碼，供大傢參考，具體內容如下
最近項目裡有個需求要做個滾動選擇器，在網上找瞭半天也沒找到合適的demo，沒辦法隻能發揮我的聰明才智創造一個，上代碼。
js:
// pages/xuanzeqi/xuanzeqi.js
Page({
/**
* 頁面的初始數據
*/
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,//選擇器內選項的個數(要求為單數)
bgColor:'#01356f',//選擇器的背景顏色
choose_item_font_color:'white',//選擇器選項的字體顏色
},
mid_item:0,
scroll_into_view:'item_0',//滾動到選項的id
item_height_list:[],//存儲每一項距離頂端的y軸數據
picker_value:null,//選擇器的值
opacity_list:[],//透明階梯
cover_list: [],//遮蓋層屬性列表
touchY: -1,
scrollTop:0,
},
touchMove: function (e) {
let that = this
let touY = e.touches[0].pageY;
if(that.data.touchY == -1){
that.data.touchY = touY
} else{
let cha = 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);
},
//監聽選擇器滾動事件
bindscrollevent:function(e){
let that = this
// that.flashOpacity(e.detail.scrollTop)
console.log(e)
if (that.scrollEndTimer) {
clearTimeout(that.scrollEndTimer);
that.scrollEndTimer = null;
}
that.scrollEndTimer = setTimeout(function () {
console.log("滑動結束");
// that.flashOpacity(e.detail.scrollTop)
that.itemToMid(e.detail.scrollTop)
that.data.scrollTop = e.detail.scrollTop
}, 200);
},
//更新透明度
flashOpacity:function(e){
let that = this
that.setData({
item_height_list: that.data.item_height_list
})
for (let i in that.data.item_height_list) {
if (that.data.item_height_list[i].bottom > e && that.data.item_height_list[i].top >= e) {
for(let j = 0; j < that.data.opacity_list.length; j++){
if(i - (j + 1) >= 0){
that.data.item_height_list[i - (j + 1)].opacity = that.data.opacity_list[j]
}
let a = parseInt(i)
if(a + (j + 1) < that.data.list.length){
that.data.item_height_list[a + (j + 1)].opacity = that.data.opacity_list[j]
}
}
let a = parseInt(i)
for (let j in that.data.item_height_list) {
if (!(j >= a - that.data.opacity_list.length && j <= 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;
}
}
},
//根據滾動距離滾動到選項中間
itemToMid:function(e){
let that = this
console.log("執行瞭",e)
for (let i in that.data.item_height_list) {
if (that.data.item_height_list[i].bottom > e && that.data.item_height_list[i].top <= e) {
console.log(that.data.item_height_list[i].bottom, that.data.item_height_list[i].top)
if (i < that.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){
let that = this
//先計算該選擇器的高度（根據每項高度和項目個數計算）單位px
//如果選擇器個數填寫為雙數，則強制-1變為單數
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
})
//計算選擇器中間項應該是第幾項
that.setData({
mid_item : (that.data.picker.choose_item_number + 1) / 2
})
//初始化遮蓋層透明階梯透明度從（0.1到0.9）
let unit = Math.round(80 / (that.data.mid_item - 1)) /**階梯單元 */
for(let i = 0; i < that.data.mid_item - 1; i++){
that.data.opacity_list.push((80 - i * unit) / 100)
}
that.setData({
opacity_list: that.data.opacity_list
})
//初始化遮蓋層列表
for(let i = 0; i < that.data.opacity_list.length; i++){
let row = {opacity: that.data.opacity_list[i]}
that.data.cover_list.push(row)
}
that.data.cover_list.push({ opacity: 0 })
for(let i = 0; i < that.data.opacity_list.length; i++){
let row = { 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(let i in that.data.list){
let row = { top: 0, bottom: 0};
// let topBase = (that.data.mid_item - 1) * that.data.picker.choose_item_height//頂端空白區域占用大小
let topBase = 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
})
}
},
/**
* 生命周期函數--監聽頁面加載
*/
onLoad: function (options) {
let that = this
that.init();
},
/**
* 生命周期函數--監聽頁面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函數--監聽頁面顯示
*/
onShow: function () {
},
/**
* 生命周期函數--監聽頁面隱藏
*/
onHide: function () {
},
/**
* 生命周期函數--監聽頁面卸載
*/
onUnload: function () {
},
/**
* 頁面相關事件處理函數--監聽用戶下拉動作
*/
onPullDownRefresh: function () {
},
/**
* 頁面上拉觸底事件的處理函數
*/
onReachBottom: function () {
},
/**
* 用戶點擊右上角分享
*/
onShareAppMessage: function () {
}
})
WXML:
<view class="box" style="height:{{box_height}}px;width:{{picker.box_width}}px;background:{{picker.bgColor}};">
<scroll-view class="scroll_box" scroll-y="{{true}}" scroll-with-animation="{{picker.scroll_animation}}" bindscroll="bindscrollevent" scroll-into-view="{{scroll_into_view}}" scrollTop='{{scrollTop}}'>
<view wx:for="{{mid_item - 1}}" class="cushion" style="height:{{picker.choose_item_height}}px;line-height:{{picker.choose_item_height}}px;font-size:{{picker.choose_item_font_size}}px;color:{{picker.bgColor}}" id="cushion_top_{{index}}">·</view>
<view wx:for="{{list}}" class="choose_item" style="height:{{picker.choose_item_height}}px;line-height:{{picker.choose_item_height}}px;font-size:{{picker.choose_item_font_size}}px;color:{{picker.choose_item_font_color}}" id="item_{{index}}">{{item}}</view>
<view wx:for="{{mid_item - 1}}" class="cushion" style="height:{{picker.choose_item_height}}px;line-height:{{picker.choose_item_height}}px;font-size:{{picker.choose_item_font_size}}px;color:{{picker.bgColor}};" id="cushion_bottom_{{index}}">·</view>
</scroll-view>
<!-- 透明度遮蓋 -->
<view style="position: fixed;top: 0;left: 70px;width:60px;z-index:9" bindtouchmove="touchMove" >
<view wx:for='{{cover_list}}' style="height: {{picker.choose_item_height}}px;width: 100%;background: {{picker.bgColor}};opacity: {{item.opacity}}" ></view>
</view>
</view>
<view>{{picker_value}}</view>
wxss:
.box{
}
.scroll_box{
height: 100%;
width: 100%;
}
.choose_item{
width: 100%;
text-align: center;
}
.cushion{
width: 100%;
text-align: center;
}
.zhegai{
height: 30px;
width: 100%;
position: absolute;
top: 0;
left: 0;
background: #01356f;
opacity: 0.9
}
效果圖
需要修改選擇器直接修改data中picker內屬性即可。選項逐漸變淺的效果比較讓人頭疼，最初的做法是對list內每個選項都加一個屬性代表該選項的透明度，每次滑動都會修改顯示的選項透明度，但是實際使用起來發現給選項賦值透明度的過程非常明顯，導致體驗不好。最後采用瞭現在這種方法，在文字上加瞭一排遮蓋的view，這些view有不同的透明度從而展示出來漸變的效果，省去瞭每次滑動都要給選項修改透明度的煩惱。
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。