快捷導(dǎo)航

微信小程序?qū)崿F(xiàn)數(shù)字滾動(dòng)動(dòng)畫

更新時(shí)間：2022年07月18日 17:11:54 作者：V1nc4nt丶

這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)數(shù)字滾動(dòng)動(dòng)畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)數(shù)字滾動(dòng)效果的具體代碼，供大家參考，具體內(nèi)容如下

效果圖

實(shí)現(xiàn)思路

1、為了實(shí)現(xiàn)數(shù)字的無限滾動(dòng)效果，每個(gè)數(shù)字框的內(nèi)部，其實(shí)包含了兩組0~9的view，每個(gè)View的高度都一樣
2、數(shù)字框內(nèi)使用絕對(duì)定位，通過調(diào)整top位置，顯示出指定的數(shù)字
3、使用transtion動(dòng)畫，top發(fā)生變化時(shí)就會(huì)滾動(dòng)，然后通過指定動(dòng)畫的delay、duration，使數(shù)字之間延時(shí)動(dòng)畫

項(xiàng)目代碼

js文件

// components/scroll-number/index.js
Component({
? externalClasses: ['container-class', 'item-class', 'dot-class'],
? properties: {
? ? value: {
? ? ? type: String,
? ? ? value: ''
? ? },
? ? /** 一次滾動(dòng)耗時(shí) 單位ms */
? ? duration: {
? ? ? type: Number,
? ? ? value: 1600
? ? },
? ? /** 每個(gè)數(shù)字之間的延遲滾動(dòng) */
? ? delay: {
? ? ? type: Number,
? ? ? value: 200
? ? }
? },
? data: {
? ? valArr: [],
? ? aniArr: [], ?// 動(dòng)畫列表，和valArr對(duì)應(yīng)
? ? numArr: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], ?// 所有數(shù)字
? ? itemHeight: 0 ?// 數(shù)字項(xiàng)的高度
? },
? observers: {
? ? value: function (newVal) {
? ? ? // 監(jiān)聽value變化，格式化為valArr
? ? ? let valArr = []
? ? ? if (newVal) {
? ? ? ? valArr = newVal.split('').map(o => {
? ? ? ? ? return { val: o, isNaN: isNaN(o)}
? ? ? ? })
? ? ? }
? ? ? this.setData({
? ? ? ? valArr: valArr
? ? ? })
? ? ? this.getNumberHeight()
? ? }
? },
? methods: {
? ? /** 計(jì)算數(shù)字高度 */
? ? getNumberHeight() {
? ? ? if (this.data.itemHeight > 0) {
? ? ? ? this.startScrollAni()
? ? ? ? return
? ? ? }
? ? ? const query = this.createSelectorQuery()
? ? ? query.select('.number-item').boundingClientRect()
? ? ? query.exec((res) => {
? ? ? ? this.setData({
? ? ? ? ? itemHeight: res[0].height
? ? ? ? })
? ? ? ? this.startScrollAni()
? ? ? })
? ? },
? ? /** 開始滾動(dòng)動(dòng)畫 */
? ? startScrollAni() {
? ? ? if (this.data.itemHeight <= 0) return

? ? ? const aniArr = []
? ? ? this.data.valArr.forEach((item, index) => {
? ? ? ? if(!item.isNaN) {
? ? ? ? ? aniArr.push(`transition-delay: ${this.data.delay * index}ms; top: ${-this.data.itemHeight * (this.data.numArr[parseInt(item.val)] + 10)}px;`)
? ? ? ? } else {
? ? ? ? ? aniArr.push(null)
? ? ? ? }
? ? ? })
? ? ? this.setData({
? ? ? ? aniArr: aniArr
? ? ? })
? ? }
? }
})

wxml文件

<!--components/scroll-number/index.wxml-->
<view class="scroll-number container-class">
? <block wx:for="{{valArr}}" wx:key="index">
? ? <view wx:if="{{item.isNaN}}" class="scroll-number-item number-dot dot-class">{{item.val}}</view>
? ? <view wx:else class="scroll-number-item number-item item-class">
? ? ? <view class="scroll-ani" style="transition-duration: {{duration}}ms; {{aniArr[index]}}">
? ? ? ? <view wx:for="{{numArr}}" wx:for-item="num" wx:for-index="idx" wx:key="idx" class="num{{num}}">{{num}}</view>
? ? ? ? <view wx:for="{{numArr}}" wx:for-item="num" wx:for-index="idx" wx:key="idx" class="num{{num}}">{{num}}</view>
? ? ? </view>
? ? </view>
? </block>
</view>

wxss文件

/* components/scroll-number/index.wxss */
.scroll-number {
? display: flex;
? align-items: flex-end;
}
.scroll-number-item {
? color: #0079FE;
? font-size: 48rpx;
? font-weight: bold;
? margin: 0 24rpx;
? font-family: Microsoft YaHei;
}
.number-item {
? background-color: rgba(0, 121, 254, 0.2);
? border-radius: 8rpx;
? width: 56rpx;
? height: 72rpx;
? line-height: 72rpx;
? overflow: hidden;
? text-align: center;
? position: relative;
}
.number-dot {
? margin: 0 12rpx;
}
.scroll-ani {
? position: absolute;
? top: 0;
? left: 0;
? width: 100%;
? height: 100%;
? transition: all 2s ease-in-out 0s;
}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: