主要利用scrollView的scroll-into-view实现效果
文档
111.gif
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
numbers: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
hundredToView: 'hundred0', // 百位
hundredWidth: 48, // 不等于1的时候是48 1的时候是32
tenToView: 'ten0', // 十位
tenWidth: 48, // 不等于1的时候是48 1的时候是32
singleToView: 'single0', // 个位
singleWidth: 48, // 不等于1的时候是48 1的时候是32
lawyerCounts: [1, 8, 16, 32, 52, 65, 78, 84, 93, 100],//数字随时间递增，每秒变化一次，递增顺序
lawyerCount: 1, // 律师个数
lawyerCountTimeOut: null, // 律师个数倒计时
lawyerCountSecond: 0, // 律师个数倒计时秒数
},
onLoad: function () {
// 启动律师个数倒计时
this.setData({
lawyerCountSecond: this.data.lawyerCounts.length
})
this.lawyerCountTimeOutBegin()
},
onUnload() {
// 结束律师个数倒计时
this.lawyerCountTimeOutEnd()
},
// 启动律师个数倒计时
lawyerCountTimeOutBegin() {
var that = this
that.data.lawyerCountTimeOut = setTimeout(function () {
// lawyerCounts = [1,8,16,32,52,65,78,84,93,100]
// numbers = [0,1,2,3,4,5,6,7,8,9]
let maxSecond = that.data.lawyerCounts.length
let dis = --that.data.lawyerCountSecond
if (that.data.lawyerCountSecond > 0) {
let index = maxSecond - dis
if (index >= maxSecond - 1) {
index = maxSecond - 1
}
let lawyerCountsItem = that.data.lawyerCounts[index]
if (lawyerCountsItem >= 100) { // 大于100
// 百位数 十位数 个位数
let hundred = parseInt(lawyerCountsItem / 100)
let hundredValue = parseInt(hundred * 100)
let ten = parseInt((lawyerCountsItem - hundredValue) / 10)
let tenValue = parseInt(ten * 10)
let single = parseInt(lawyerCountsItem - hundredValue - tenValue)
that.data.hundredToView = 'hundred' + hundred
that.data.tenToView = 'ten' + ten
that.data.singleToView = 'single' + single
that.data.hundredWidth = 48
that.data.tenWidth = 48
that.data.singleWidth = 48
if (hundred == 1) {
that.data.hundredWidth = 32
}
if (ten == 1) {
that.data.tenWidth = 32
}
if (single == 1) {
that.data.singleWidth = 32
}
}
else if (lawyerCountsItem >= 10 && lawyerCountsItem < 100) { // 10-99
// 十位数 个位数
let ten = parseInt(lawyerCountsItem / 10)
let tenValue = parseInt(ten * 10)
let single = parseInt(lawyerCountsItem - tenValue)
that.data.tenToView = 'ten' + ten
that.data.singleToView = 'single' + single
that.data.tenWidth = 48
that.data.singleWidth = 48
if (ten == 1) {
that.data.tenWidth = 32
}
if (single == 1) {
that.data.singleWidth = 32
}
}
else { // 0-9
// 个位数
let single = parseInt(lawyerCountsItem)
that.data.singleToView = 'single' + single
that.data.singleWidth = 48
if (single == 1) {
that.data.singleWidth = 32
}
}
that.setData({
lawyerCountSecond: dis,
lawyerCount: lawyerCountsItem,
hundredToView: that.data.hundredToView,
hundredWidth: that.data.hundredWidth,
tenToView: that.data.tenToView,
tenWidth: that.data.tenWidth,
singleToView: that.data.singleToView,
singleWidth: that.data.singleWidth
})
// 循环倒计时
that.lawyerCountTimeOutBegin()
}
else {
that.lawyerCountTimeOutEnd()
}
}, 1000)
},
// 结束律师个数倒计时
lawyerCountTimeOutEnd() {
clearTimeout(this.data.lawyerCountTimeOut)
},
move() {
console.log('不给滚倒计时')
}
})
index.json禁止页面滚动
{
"disableScroll": true,
"usingComponents": {}
}
<!--index.wxml-->
<view class="cd-cnt">
<view class="cd-blue-bg">
<view class="cd-lawyer">
<!-- 百位 -->
<block wx:if='{{lawyerCount >= 100}}'>
<scroll-view
scroll-y="true"
style="height: 80rpx; width: {{hundredWidth}}rpx;"
scroll-with-animation='true'
scroll-into-view="{{hundredToView}}">
<view class="cd-lawyer-count" wx:for="{{numbers}}" wx:key="index" id="hundred{{item}}">{{item}}</view>
</scroll-view>
<scroll-view
scroll-y="true"
style="height: 80rpx; width: {{tenWidth}}rpx;"
scroll-with-animation='true'
scroll-into-view="{{tenToView}}">
<view class="cd-lawyer-count" wx:for="{{numbers}}" wx:key="index" id="ten{{item}}">{{item}}</view>
</scroll-view>
</block>
<!-- 十位 -->
<block wx:if='{{lawyerCount >= 10&&lawyerCount < 100}}'>
<scroll-view
scroll-y="true"
style="height: 80rpx; width: {{tenWidth}}rpx;"
scroll-with-animation='true'
scroll-into-view="{{tenToView}}">
<view class="cd-lawyer-count" wx:for="{{numbers}}" wx:key="index" id="ten{{item}}">{{item}}</view>
</scroll-view>
</block>
<!-- 个位 -->
<scroll-view
scroll-y="true"
style="height: 80rpx; width: {{singleWidth}}rpx;"
scroll-with-animation='true'
scroll-into-view="{{singleToView}}">
<view class="cd-lawyer-count" wx:for="{{numbers}}" wx:key="index" id="single{{item}}">{{item}}</view>
</scroll-view>
</view>
</view>
<view class="cd-blue-bg-forbid" catchtouchmove="move"></view>
</view>
/**index.wxss**/
.cd-cnt {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 60rpx;
height: 400rpx;
}
.cd-blue-bg {
width:320rpx;
height:320rpx;
background:linear-gradient(135deg,rgba(7,216,255,1) 0%,rgba(0,155,255,1) 100%);
border-radius: 50%;
position: absolute;
z-index: 101;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.cd-blue-bg-forbid {
width:320rpx;
height:320rpx;
background: rgba(0,0,0,0);
border-radius: 50%;
position: absolute;
z-index: 102;
}
.cd-lawyer {
display: flex;
flex-direction: row;
height: 80rpx;
}
.cd-lawyer-count {
height:80rpx;
font-size:80rpx;
font-family:PingFangSC-Medium,PingFang SC;
color:rgba(255,255,255,1);
line-height:80rpx;
}
网友评论