scrollBox.vue 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. <template>
  2. <view class="list uni-flex uni-column">
  3. <view class="wrap-item">
  4. <view class="lis uni-flex uni-column" :animation="animationData">
  5. <view class="uni-flex uni-column item" v-for="(item, index) in list" :key="index">
  6. <view class="swiper-item item_title uni-flex list_item">
  7. <view class="time uni-flex-item justify-align-center uni-flex">{{ item.userName }}刚刚扫描了一个VIN</view>
  8. </view>
  9. </view>
  10. </view>
  11. </view>
  12. </view>
  13. </template>
  14. <script>
  15. export default {
  16. props: {
  17. list: {
  18. type: Array
  19. }
  20. },
  21. data() {
  22. return {
  23. scrollHeight: 0, //向上滚动距离
  24. height: 0, //.lis高度(滚动框高度)
  25. animationData: {} //动画对象
  26. };
  27. },
  28. mounted() {
  29. if(this.hasLogin){
  30. this.prizeScroll();
  31. }
  32. },
  33. methods: {
  34. getHeight(Class) {
  35. let query = uni.createSelectorQuery().in(this);
  36. query
  37. .selectAll(Class)
  38. .boundingClientRect(data => {
  39. this.height = data[0].height;
  40. })
  41. .exec();
  42. },
  43. prizeScroll() {
  44. let speed = 60;
  45. let animation = uni.createAnimation({
  46. duration: this.getHeight('.lis') / speed,
  47. timingFunction: 'linear',
  48. delay: 0
  49. });
  50. this.animation = animation;
  51. setInterval(() => {
  52. if (this.scrollHeight >= this.height) {
  53. animation.translateY(0).step();
  54. this.scrollHeight = 0;
  55. this.animationData = animation.export();
  56. } else {
  57. this.scrollHeight = this.scrollHeight + 1;
  58. animation.translateY(-this.scrollHeight).step();
  59. this.animationData = animation.export();
  60. }
  61. }, speed);
  62. }
  63. }
  64. };
  65. </script>
  66. <style lang="less">
  67. .list {
  68. width: 50%;
  69. height: 2.6em;
  70. overflow: hidden;
  71. .item{
  72. background: rgba(229, 237, 240, 0.3);
  73. border-radius: 5em;
  74. padding: 0.2em 1em;
  75. font-size: 0.8em;
  76. margin:0.3em 0;
  77. }
  78. }
  79. </style>