acss
.single-demo {
margin: 50rpx auto;
padding: 30rpx;
text-align: center;
border: solid 1px #999;
}
.flip {
display: inline-block;
position: relative;
width: 60rpx;
height: 100rpx;
line-height: 100rpx;
border: solid 1px #000;
border-radius: 10rpx;
background: #fff;
font-size: 66rpx;
color: #fff;
box-shadow: 0 0 6rpx rgba(0, 0, 0, .5);
text-align: center;
/* font-family: "Helvetica Neue" */
}
.flip .digital:before, .flip .digital:after {
content: "";
position: absolute;
left: 0;
right: 0;
background: #000;
overflow: hidden;
box-sizing: border-box;
}
.flip .digital:before {
top: 0;
bottom: 50%;
border-radius: 10rpx 10rpx 0 0;
border-bottom: solid 1px #666;
}
.flip .digital:after {
top: 50%;
bottom: 0;
border-radius: 0 0 10rpx 10rpx;
line-height: 0;
}
/*向下翻*/
.flip.down .front:before {
z-index: 3;
}
.flip.down .back:after {
z-index: 2;
transform-origin: 50% 0%;
transform: perspective(160rpx) rotateX(180deg);
}
.flip.down .front:after, .flip.down .back:before {
z-index: 1;
}
.flip.down.go .front:before {
transform-origin: 50% 100%;
animation: frontFlipDown 0.6s ease-in-out both;
box-shadow: 0 -2rpx 6rpx rgba(255, 255, 255, 0.3);
backface-visibility: hidden;
}
.flip.down.go .back:after {
animation: backFlipDown 0.6s ease-in-out both;
}
/*向上翻*/
.flip.up .front:after {
z-index: 3;
}
.flip.up .back:before {
z-index: 2;
transform-origin: 50% 100%;
transform: perspective(160rpx) rotateX(-180deg);
}
.flip.up .front:before, .flip.up .back:after {
z-index: 1;
}
.flip.up.go .front:after {
transform-origin: 50% 0;
animation: frontFlipUp 0.6s ease-in-out both;
box-shadow: 0 2rpx 6rpx rgba(255, 255, 255, 0.3);
backface-visibility: hidden;
}
.flip.up.go .back:before {
animation: backFlipUp 0.6s ease-in-out both;
}
@keyframes frontFlipDown {
0% {
transform: perspective(160rpx) rotateX(0deg);
}
100% {
transform: perspective(160rpx) rotateX(-180deg);
}
}
@keyframes backFlipDown {
0% {
transform: perspective(160rpx) rotateX(180deg);
}
100% {
transform: perspective(160rpx) rotateX(0deg);
}
}
@keyframes frontFlipUp {
0% {
transform: perspective(160rpx) rotateX(0deg);
}
100% {
transform: perspective(160rpx) rotateX(180deg);
}
}
@keyframes backFlipUp {
0% {
transform: perspective(160rpx) rotateX(-180deg);
}
100% {
transform: perspective(160rpx) rotateX(0deg);
}
}
.flip .number0:before, .flip .number0:after {
content: "0";
}
.flip .number1:before, .flip .number1:after {
content: "1";
}
.flip .number2:before, .flip .number2:after {
content: "2";
}
.flip .number3:before, .flip .number3:after {
content: "3";
}
.flip .number4:before, .flip .number4:after {
content: "4";
}
.flip .number5:before, .flip .number5:after {
content: "5";
}
.flip .number6:before, .flip .number6:after {
content: "6";
}
.flip .number7:before, .flip .number7:after {
content: "7";
}
.flip .number8:before, .flip .number8:after {
content: "8";
}
.flip .number9:before, .flip .number9:after {
content: "9";
}
.clock {
text-align: center;
margin-bottom: 200rpx;
}
axml
<view style="width:714rpx;height:1190rpx;border-radius:24rpx;background-color:#ddd;">
<view class="single-demo">
<view class="{{direction}}" id="flip" style="display: flex;justify-content: center;align-items: center;">
<view class="digital front number{{count}}" style="display: flex;justify-content: center;align-items: center;"></view>
<view class="digital back number{{nextCount}}" style="display: flex;justify-content: center;align-items: center;"></view>
</view>
<view class="btn-con">
<button id="btn1" onTap="flipDown">向下翻+1</button>
<button id="btn2" onTap="flipUp">向上翻-1</button>
</view>
</view>
</view>
js
import { enhanceComponent } from 'tb-shop-enhance';
Component(enhanceComponent({
data: {
count: 0,
// 是否正在翻转(防止翻转未结束就进行下一次翻转)
isFlipping: false,
nextCount: 0,
direction: 'flip down',
autoplay: 2,
},
onInit() {
// mock数据需要修改client文件夹中的page文件
// 正常运行过程中模块总是默认传入data参数
},
didMount() {
// 加载成功后可以异步获取数据更新数据展示,例如请求接口等操作
const { gdc = {}, mds = {}, modUtils } = this.props.data;
this.setData({
bannerArray: mds.moduleData.banner_array,
});
if (this.data.autoplay == 1) {
this.time = setInterval(() => {
this.flipDown()
}, 1000)
} else {
clearInterval(this.time)
}
},
methods: {
click(e) {
console.log(e)
},
// 向下翻转+1
flipDown() {
let self = this
if (self.data.isFlipping) {
return false
}
var nextCount = self.data.count >= 9 ? 0 : (self.data.count + 1)
self.setData({
isFlipping: true,
direction: 'flip down go',
nextCount: nextCount,
})
setTimeout(function () {
self.setData({
isFlipping: false,
count: self.data.nextCount,
direction: 'flip down',
})
}, 1000)
},
// 向上翻转-1(同理,注释略)
flipUp() {
let self = this
if (self.data.isFlipping) {
return false
}
var nextCount = self.data.count <= 0 ? 9 : (self.data.count - 1)
console.log(nextCount)
self.setData({
isFlipping: true,
direction: 'flip up go',
nextCount: nextCount,
})
setTimeout(function () {
self.setData({
isFlipping: false,
count: nextCount,
direction: 'flip up'
})
}, 1000)
}
}
}));