index.vue 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344
  1. <template>
  2. <uni-shadow-root class="vant-index-anchor-index"><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"></slot>
  5. <block v-else>
  6. <text>{{ index }}</text>
  7. </block>
  8. </view>
  9. </view></uni-shadow-root>
  10. </template>
  11. <script>
  12. global['__wxRoute'] = 'vant/index-anchor/index'
  13. import { getRect } from '../common/utils';
  14. import { VantComponent } from '../common/component';
  15. import { useParent } from '../common/relation';
  16. VantComponent({
  17. relation: useParent('index-bar'),
  18. props: {
  19. useSlot: Boolean,
  20. index: null,
  21. },
  22. data: {
  23. active: false,
  24. wrapperStyle: '',
  25. anchorStyle: '',
  26. },
  27. methods: {
  28. scrollIntoView(scrollTop) {
  29. getRect(this, '.van-index-anchor-wrapper').then((rect) => {
  30. wx.pageScrollTo({
  31. duration: 0,
  32. scrollTop: scrollTop + rect.top - this.parent.data.stickyOffsetTop,
  33. });
  34. });
  35. },
  36. },
  37. });
  38. export default global['__wxComponents']['vant/index-anchor/index']
  39. </script>
  40. <style platform="mp-weixin">
  41. @import '../common/index.css';.van-index-anchor{background-color:var(--index-anchor-background-color,transparent);color:var(--index-anchor-text-color,#323233);font-size:var(--index-anchor-font-size,14px);font-weight:var(--index-anchor-font-weight,500);line-height:var(--index-anchor-line-height,32px);padding:var(--index-anchor-padding,0 16px)}.van-index-anchor--active{background-color:var(--index-anchor-active-background-color,#fff);color:var(--index-anchor-active-text-color,#07c160);left:0;right:0}
  42. </style>