tony-scroll.vue 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. <template>
  2. <view class="home">
  3. <view class="list uni-flex uni-column">
  4. <view class="wrap-item">
  5. <view class="lis uni-flex uni-column" :animation="animationData">
  6. <view class="uni-flex uni-column" v-for="(item, index) in list" :key="index">
  7. <view class="swiper-item item_title uni-flex list_item">
  8. <view class="time uni-flex-item justify-align-center uni-flex">{{ item.time }}</view>
  9. <view class="phone uni-flex-item justify-align-center uni-flex">{{ item.phone }}</view>
  10. <view class="prizes uni-flex-item justify-align-center uni-flex">{{ item.prize }}</view>
  11. </view>
  12. </view>
  13. </view>
  14. </view>
  15. </view>
  16. </view>
  17. </template>
  18. <script>
  19. export default {
  20. props: {
  21. list: {
  22. type: Array
  23. }
  24. },
  25. data() {
  26. return {
  27. scrollHeight: 0, //向上滚动距离
  28. height: 0, //.lis高度(滚动框高度)
  29. animationData: {} //动画对象
  30. };
  31. },
  32. components: {},
  33. mounted() {
  34. console.log("11")
  35. this.prizeScroll();
  36. },
  37. methods: {
  38. getHeight(Class) {
  39. let query = uni.createSelectorQuery().in(this);
  40. query
  41. .selectAll(Class)
  42. .boundingClientRect(data => {
  43. this.height = data[0].height;
  44. })
  45. .exec();
  46. },
  47. prizeScroll() {
  48. let speed = 50;
  49. let animation = uni.createAnimation({
  50. duration: this.getHeight('.lis') / speed,
  51. timingFunction: 'linear',
  52. delay: 0
  53. });
  54. this.animation = animation;
  55. setInterval(() => {
  56. if (this.scrollHeight >= this.height) {
  57. animation.translateY(0).step();
  58. this.scrollHeight = 0;
  59. this.animationData = animation.export();
  60. } else {
  61. this.scrollHeight = this.scrollHeight + 1;
  62. animation.translateY(-this.scrollHeight).step();
  63. this.animationData = animation.export();
  64. }
  65. }, speed);
  66. }
  67. }
  68. };
  69. </script>
  70. <style>
  71. page{
  72. width: 100%;
  73. }
  74. .home,.list {
  75. width: 750upx;
  76. padding-top: 30upx;
  77. }
  78. </style>