微信小程序用swiper实现滑动刻度尺
本文实例为大家分享了微信小程序用swiper实现滑动刻度尺的具体代码，供大家参考，具体内容如下
效果图
思路：
利用微信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
})
},
