index.vue 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. <template>
  2. <view class="van-index-anchor-wrapper" :style="wrapperStyle">
  3. <view :class="'van-index-anchor ' + (active ? 'van-index-anchor--active van-hairline--bottom' : '')" :style="anchorStyle">
  4. <slot v-if="useSlot" />
  5. <block v-else>
  6. <text>{{ index }}</text>
  7. </block>
  8. </view>
  9. </view>
  10. </template>
  11. <script>
  12. 'use strict';
  13. Object.defineProperty(exports, '__esModule', {
  14. value: true
  15. });
  16. var component_1 = require('../common/component');
  17. component_1.VantComponent({
  18. relation: {
  19. name: 'index-bar',
  20. type: 'ancestor',
  21. current: 'index-anchor'
  22. },
  23. props: {
  24. useSlot: Boolean,
  25. index: null
  26. },
  27. data: {
  28. active: false,
  29. wrapperStyle: '',
  30. anchorStyle: ''
  31. },
  32. methods: {
  33. scrollIntoView: function (scrollTop) {
  34. var that = this;
  35. this.getBoundingClientRect().then(function (rect) {
  36. uni.pageScrollTo({
  37. duration: 0,
  38. scrollTop: scrollTop + rect.top - that.parent.data.stickyOffsetTop
  39. });
  40. });
  41. },
  42. getBoundingClientRect: function () {
  43. return this.getRect('.van-index-anchor-wrapper');
  44. }
  45. }
  46. });
  47. </script>
  48. <style>
  49. @import './index.css';
  50. </style>