微信小程序自定义滚动选择器

最近项目里有个需求要做个滚动选择器，在网上找了半天也没找到合适的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,//选择器的高度（非控制项，自动计算），单位pxpicker:{ //选择器的控制变量box_width: 200,//选择器宽度，单位pxchoose_item_height: 30,//选择器中每一项选项的高度，单位pxchoose_item_font_size:25,//选择器中每一项选项字体大小，单位pxscroll_animation: true,//是否使用动画过渡choose_item_number: 13,//选择器内选项的个数(要求为单数)bgColor:'#01356f',//选择器的背景颜色choose_item_font_color:'white',//选择器选项的字体颜色},mid_item:0,scroll_into_view:'item_0',//滚动到选项的iditem_height_list:[],//存储每一项距离顶端的y轴数据picker_value:null,//选择器的值opacity_list:[],//透明阶梯cover_list: [],//遮盖层属性列表touchY: -1,scrollTop:0,},touchMove: function (e) {let that = thislet touY = e.touches[0].pageY;if(that.data.touchY == -1){that.data.touchY = touY} else{let cha = that.data.touchY - touYthat.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 = thisthat.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 = thisconsole.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 = 0row.top = topBase + i * that.data.picker.choose_item_heightif(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 = thisthat.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有不同的透明度从而展示出来渐变的效果，省去了每次滑动都要给选项修改透明度的烦恼。

微信小程序自定义滚动选择器相关推荐

range 小程序picker_微信小程序picker滚动选择器使用详解
今天修改小程序做章节内容筛选使用到了picker滚动选择器,看了官方文档和一些网上的文章后,终于算是弄明白了这个组件的使用,这里把我对这picker滚动选择器的使用记录下: picker基础使用 pi ...
微信小程序之滚动选择器(时间日期选择器)
微信小程序自己封装了很多控件,用起来确实很方便,如果这是Android里面,还需要自己去定义,不废话,效果图: 一起来看看怎么实现的呢?看完你应该就该说,尼玛,这就行啦-. 这个效果呢,要用到pick ...
微信小程序-自定义picker选择器
github地址为什么要自定义picker 原生小程序picker不支持自定义样式,无联动. 该自定组件支持自定义数据支持自定义样式支持传入和返回对象或者基本类型支持联动(改变父列,子列根据 ...
小程序picker标题_微信小程序-自定义picker选择器
avatar 为什么要自定义picker 原生小程序picker不支持自定义样式,无联动. 该自定组件支持自定义数据支持自定义样式支持传入和返回对象或者基本类型支持联动(改变父列,子列根据关联 ...
微信小程序自定义select下拉选择组件
微信小程序自定义select下拉选择组件微信小程序原生开发中,常用到的是从底部弹起的滚动选择器(picker),而有些项目需要用到下拉选择,话不多说,下面就可以把下拉选择封装成一个自定义组件: 1. ...
微信小程序自定义组件方案
前言:小程序已于11月初开放了小程序组件功能,但事件方面还不是很完善,有的组件暂时可能还是要用其他方式来实现,这里简单记录下开发小程序自定义组件的要点. 在小程序官方开发组件开发功能之前,自定义组件的 ...
微信小程序自定义组件，提示组件
微信小程序自定义组件,这里列举了一个常用的提示自定义组件,调用自定义组件中的方法和字段.仅供参考和学习. 编写组件: 在根目录下添加"components"目录,然后像添加Page ...
微信小程序--自定义组件（超详细从新建到使用）
微信小程序–自定义组件微信小程序官网介绍! 本文提供给急需使用自定义组件人群,以下是博主个人理解和案例!可以辅助官网来看介绍: 从小程序基础库版本 1.6.3 开始,小程序支持简洁的组件化编程.所 ...
微信自定义tabbar有小红点_微信小程序自定义 tabbar
一定的需求情况下,无法使用小程序原生的 tabbar 的时候,需要自行实现一个和 tabbar 功能一模一样的自制组件. 查阅了海量的博客和文档之后,亲自踩坑.总结了三种在不使用微信小程序原生 tab ...

微信小程序自定义滚动选择器

微信小程序自定义滚动选择器相关推荐

最新文章

热门文章