您现在的位置是：网站首页> 编程资料编程资料

微信小程序用swiper实现滑动刻度尺_javascript技巧_

2023-05-24 356人已围观

简介微信小程序用swiper实现滑动刻度尺_javascript技巧_

本文实例为大家分享了微信小程序用swiper实现滑动刻度尺的具体代码，供大家参考，具体内容如下

效果图

思路：

利用微信swiper组件实现滑动效果，创建一个数组arr，先存启始数据进去，然后分别在前面存放起始数–的数据，后面添加起始数据++的数据，循环数组arr创建swiper-item，每一个swiper-item都是一个小刻度线，达到缓冲和选择数据的效果，滑动的时候开始监听不停改变起始值，思路成立开始实践。

实践：

打算直接做成一个复用的组件

wxml：

swiper属性：
display-multiple-items：当前显示的swiper-item数
current：当前滑动swiper-item个数
bindchange：滑动时触发的函数

        {{currentNumber}} {{ unit }}                              {{arr[item]%5==0?arr[item]:''}}

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; }

字传父数值：

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：

getCurrentNumberAge(e){  //年龄     console.log('获取当前current值年龄',e,e.detail.current)     let result = e.detail.current;     this.setData({       age:result      })   },

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

您可能感兴趣的文章:

微信小程序实现带刻度尺滑块功能

上一篇：vue+vue-fullpage实现整屏滚动页面的示例代码(直播平台源码)_vue.js_

下一篇：JS中节流和防抖函数的实现及区别示例_javascript技巧_

您现在的位置是：网站首页> 编程资料编程资料

微信小程序用swiper实现滑动刻度尺_javascript技巧_

相关内容

点击排行

本栏推荐

猜你喜欢