微信小程序滑动刻度尺
Tx的练习题 人气:0效果图
思路:
利用微信swiper组件实现滑动效果,创建一个数组arr,先存启始数据进去,然后分别在前面存放起始数–的数据,后面添加起始数据++的数据,循环数组arr创建swiper-item,每一个swiper-item都是一个小刻度线,达到缓冲和选择数据的效果,滑动的时候开始监听不停改变起始值,思路成立开始实践。
实践:
打算直接做成一个复用的组件
wxml:
swiper属性:
display-multiple-items:当前显示的swiper-item数
current:当前滑动swiper-item个数
bindchange:滑动时触发的函数
<view style="height:165rpx;positive:relative;"> <view style="margin-bottom:20rpx;font-size:24rpx;position:absolute;width:570rpx;text-align: center;"> <text style="color: #4377E9 " ><text style="font-size: 44rpx;font-family: DIN-Bold, DIN;font-weight: bold;color: #4377E9 ;line-height: 54rpx;">{{currentNumber}}</text> {{ unit }}</text> <text class="line"></text> </view> <swiper duration="10" class="swiperss" bindchange="getCurrent" display-multiple-items="{{multipleItems}}" easing-function = "linear" current="{{ current }}"> <swiper-item class="swiperItems" wx:for="{{multipleItems + offset * 2}}" wx:key="index"> <view wx:if="{{arr[item]!=''}}" class="{{arr[item]%5==0?'linestwo':'lines'}}" ></view> <view style="color: #BBBEC3;">{{arr[item]%5==0?arr[item]:''}}</view> </swiper-item> </swiper> </view>
CSS
/* components/heightAndWeight/index.wxss */ .swiperss{ height: 100%; width: 100%; margin: 0 auto; overflow: visible; } .swiperItems{ font-size:24rpx; position:relative; margin-top: 74rpx; border-top:1px solid #F5F7F9; height: 120rpx !important; width: calc(570rpx / 19) !important; overflow: visible; } .swiperItems > .lines{ background-color:#D2D6DF ; margin-bottom: 10rpx; width:1px;height:35rpx; margin-left: 15rpx; } .linestwo{ margin: 0 auto; width:1px;height:63rpx; background-color:#D2D6DF ; margin-left: 16rpx; } .lines + view{ font-size: 24rpx; font-family: DIN-Regular, DIN; font-weight: 400; color: #D9D9D9; line-height: 30rpx; width: 100%; text-align: center; } .line{ position: absolute; left:50.4%; top: 64rpx; transform: translateX(-50%); width: 5rpx; height: 40rpx; background: #43A3FF; box-shadow: 0px 0px 2rpx 0px #43A3FF; z-index: 6; margin-right: 10rpx; }
js
字传父数值:
min:刻度尺最小值
max:刻度尺最大值
unit:中间的固定线的单位
currentNumber:刻度线的起始默认值
multipleItems:swiper可视区域的swiper-item有多少
offset:我们的选择指针在中间,在滑动到最小值或者最大值时最小的值反而在两边,我们需要在前后补上空白的刻度尺,让最小值或者最大值滑动到中间来
一个前面说的arr数组个数等于 multipleItems的个数+偏差值*2 然后循环就可以了
// components/heightAndWeight/index.js Component({ /** * 组件的属性列表 */ properties: { min: { type: Number }, max: { type: Number }, unit: { type: String }, currentNumber: { type: Number }, multipleItems: { type: Number, value: 9 }, offset: { type: Number, value: 4 } }, observers: { "current": function (current) { console.log('current-----currentNumber---', current, this.data.currentNumber) if (current < this.data.offset) { this.setData({ currentNumber: Math.max(this.data.currentNumber + current - this.data.offset, this.data.minNumber) }) } else if (current > this.data.offset) { this.setData({ currentNumber: Math.min(this.data.currentNumber + current - this.data.offset, this.data.maxNumber) }) } }, "currentNumber": function (currentNumber) { console.log('----currentNumber', currentNumber) let arr = [] for (let l = parseInt(this.data.multipleItems / 2) + this.data.offset; l > 0; l--) { arr.push(currentNumber - l >= this.data.minNumber ? currentNumber - l : '') } arr.push(currentNumber) for (let l = 1; l <= parseInt(this.data.multipleItems / 2) + this.data.offset; l++) { arr.push(currentNumber + l <= this.data.maxNumber ? currentNumber + l : '') } console.log('-----arr', arr) this.setData({ arr, current: this.data.offset }) } }, attached() { console.log('this.dddddddddddd', this.data.currentNumber) this.setData({ minNumber: this.data.min, maxNumber: this.data.max, current: 0, arr: [], }) }, /** * 组件的初始数据 */ data: { minNumber: null, maxNumber: null, current: 0, arr: [] }, /** * 组件的方法列表 */ methods: { getCurrent(e) { this.setData({ current: e.detail.current }) console.log('eeeeeeeeeeeeee', e.detail.current, this.data.currentNumber) this.triggerEvent('currentNumber', { current: this.data.currentNumber }) } } })
监听currentNumber的值根据根据这个值创造出循环arr的数组,这样就可以不用创建一大堆数据,直接动态创建数据,再监听刻度尺的滑动,根据他的往左往右 改变currentNumber的值,到最小或者最大时停止。
最后抛出getCurrent函数 把currentNumber值抛出,在页面上就可以拿到当前滑动的值随心所欲啦
组件使用页面wxml:
<view class="flex" style="flex-wrap:wrap;margin-top: 20rpx"> <height-weight3 offset="10" min="1" max="150" unit="岁" multipleItems="19" currentNumber="{{ ageCurrentNumber }}" style="width:570rpx;margin: 0 auto;" bind:currentNumber="getCurrentNumberAge"></height-weight3> </view>
js
getCurrentNumberAge(e){ //年龄 console.log('获取当前current值年龄',e,e.detail.current) let result = e.detail.current; this.setData({ age:result }) },
加载全部内容