1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980 |
- <template>
- <view class="home">
- <view class="list uni-flex uni-column">
- <view class="wrap-item">
- <view class="lis uni-flex uni-column" :animation="animationData">
- <view class="uni-flex uni-column" v-for="(item, index) in list" :key="index">
- <view class="swiper-item item_title uni-flex list_item">
- <view class="time uni-flex-item justify-align-center uni-flex">{{ item.time }}</view>
- <view class="phone uni-flex-item justify-align-center uni-flex">{{ item.phone }}</view>
- <view class="prizes uni-flex-item justify-align-center uni-flex">{{ item.prize }}</view>
- </view>
- </view>
- </view>
- </view>
- </view>
- </view>
- </template>
- <script>
- export default {
- props: {
- list: {
- type: Array
- }
- },
- data() {
- return {
- scrollHeight: 0, //向上滚动距离
- height: 0, //.lis高度(滚动框高度)
- animationData: {} //动画对象
- };
- },
- components: {},
- mounted() {
- console.log("11")
- this.prizeScroll();
- },
- methods: {
- getHeight(Class) {
- let query = uni.createSelectorQuery().in(this);
- query
- .selectAll(Class)
- .boundingClientRect(data => {
- this.height = data[0].height;
- })
- .exec();
- },
- prizeScroll() {
- let speed = 50;
- let animation = uni.createAnimation({
- duration: this.getHeight('.lis') / speed,
- timingFunction: 'linear',
- delay: 0
- });
- this.animation = animation;
- setInterval(() => {
- if (this.scrollHeight >= this.height) {
- animation.translateY(0).step();
- this.scrollHeight = 0;
- this.animationData = animation.export();
- } else {
- this.scrollHeight = this.scrollHeight + 1;
- animation.translateY(-this.scrollHeight).step();
- this.animationData = animation.export();
- }
- }, speed);
- }
- }
- };
- </script>
- <style>
- page{
- width: 100%;
- }
- .home,.list {
- width: 750upx;
- padding-top: 30upx;
- }
- </style>
|