微信小程序用swiper實現(xiàn)滑動刻度尺

更新時間：2022年06月30日 15:22:43 作者：Tx的練習題

這篇文章主要為大家詳細介紹了微信小程序用swiper實現(xiàn)滑動刻度尺，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了微信小程序用swiper實現(xiàn)滑動刻度尺的具體代碼，供大家參考，具體內(nèi)容如下

效果圖

思路：

利用微信swiper組件實現(xiàn)滑動效果，創(chuàng)建一個數(shù)組arr，先存啟始數(shù)據(jù)進去，然后分別在前面存放起始數(shù)–的數(shù)據(jù)，后面添加起始數(shù)據(jù)++的數(shù)據(jù)，循環(huán)數(shù)組arr創(chuàng)建swiper-item，每一個swiper-item都是一個小刻度線，達到緩沖和選擇數(shù)據(jù)的效果，滑動的時候開始監(jiān)聽不停改變起始值，思路成立開始實踐。

實踐：

打算直接做成一個復用的組件

wxml：

swiper屬性：
display-multiple-items：當前顯示的swiper-item數(shù)
current：當前滑動swiper-item個數(shù)
bindchange：滑動時觸發(fā)的函數(shù)

<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

字傳父數(shù)值：

min：刻度尺最小值
max：刻度尺最大值
unit：中間的固定線的單位
currentNumber：刻度線的起始默認值
multipleItems：swiper可視區(qū)域的swiper-item有多少
offset：我們的選擇指針在中間，在滑動到最小值或者最大值時最小的值反而在兩邊，我們需要在前后補上空白的刻度尺，讓最小值或者最大值滑動到中間來
一個前面說的arr數(shù)組個數(shù)等于 multipleItems的個數(shù)+偏差值*2 然后循環(huán)就可以了

// 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: [],
? ? })
? ??
? },
? /**
? ?* 組件的初始數(shù)據(jù)
? ?*/
? 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
? ? ? })
? ? }
? }
})

監(jiān)聽currentNumber的值根據(jù)根據(jù)這個值創(chuàng)造出循環(huán)arr的數(shù)組，這樣就可以不用創(chuàng)建一大堆數(shù)據(jù)，直接動態(tài)創(chuàng)建數(shù)據(jù)，再監(jiān)聽刻度尺的滑動，根據(jù)他的往左往右改變currentNumber的值，到最小或者最大時停止。

最后拋出getCurrent函數(shù) 把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?
? ? })
? },

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: