index.vue 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166
  1. <template>
  2. <view class="container body">
  3. <view class="info">
  4. <scroll-view class="scroll-view" scroll-with-animation :scroll-into-view="topItem" scroll-y="true"
  5. @scroll="handleScroll">
  6. <view class="list-scroll-view" id="top">
  7. <slot></slot>
  8. </view>
  9. </scroll-view>
  10. </view>
  11. <view class="foot" v-if="frameStyle&&frameStyle.useBar||false">
  12. <view class="list" v-for="(item,index) in barList" :key="index" @tap="toPath(index,item)">
  13. <image class="image" :src="item.normal" mode="" v-if="active!=index"></image>
  14. <image class="image" :src="item.active" mode="" v-else></image>
  15. <view class="name" :style="{color:active==index?frameStyle.barActive||'#FB1438':''}">{{item.name}}
  16. </view>
  17. </view>
  18. </view>
  19. <view class="backTop" v-if="isShow==true">
  20. <text @click="backTop" class="iconfont icon-fanhuidingbu"></text>
  21. </view>
  22. </view>
  23. </template>
  24. <script>
  25. export default {
  26. props: {
  27. frameStyle: {
  28. type: Object,
  29. },
  30. },
  31. data() {
  32. return {
  33. active: 0,
  34. barList: [{
  35. name: '首页',
  36. route: 'pages/home/index',
  37. normal: require('@/static/shouye.png'),
  38. active: require('@/static/shouye_1.png'),
  39. type: '0'
  40. },
  41. {
  42. name: '微店',
  43. route: 'pages/store/index',
  44. normal: require('@/static/store.png'),
  45. active: require('@/static/store_1.png'),
  46. type: '0'
  47. },
  48. {
  49. name: '分类',
  50. route: 'pagesHome/market/type',
  51. normal: require('@/static/type.png'),
  52. active: require('@/static/type_1.png'),
  53. type: '1'
  54. },
  55. {
  56. name: '购物车',
  57. route: 'pages/market/index',
  58. normal: require('@/static/market.png'),
  59. active: require('@/static/market_1.png'),
  60. type: '0'
  61. },
  62. {
  63. name: '我的',
  64. route: 'pages/my/index',
  65. normal: require('@/static/my.png'),
  66. active: require('@/static/my_1.png'),
  67. type: '0'
  68. },
  69. ],
  70. // 是否显示返回顶部
  71. isShow: false,
  72. topItem: '',
  73. };
  74. },
  75. created: function() {
  76. const that = this;
  77. that.search()
  78. },
  79. onShow: function() {},
  80. methods: {
  81. search() {
  82. const that = this;
  83. let pages = getCurrentPages();
  84. let currentPage = pages[pages.length - 1];
  85. let index = that.barList.findIndex((i) => i.route == currentPage.route);
  86. if (index) that.$set(that, `active`, index);
  87. },
  88. toPath(index, item) {
  89. const that = this;
  90. that.$set(that, `active`, index);
  91. that.$emit('toPath', item)
  92. },
  93. // 计算高度
  94. handleScroll(e) {
  95. const that = this;
  96. let scrollTop = e.detail.scrollTop;
  97. that.isShow = scrollTop > 100;
  98. that.topItem = '';
  99. },
  100. // 返回顶部
  101. backTop() {
  102. const that = this;
  103. that.topItem = 'top'
  104. },
  105. }
  106. }
  107. </script>
  108. <style lang="scss">
  109. .body {
  110. .info {
  111. position: relative;
  112. flex-grow: 1;
  113. }
  114. .foot {
  115. height: 8vh;
  116. overflow: hidden;
  117. background-color: var(--fffColor);
  118. display: flex;
  119. flex-direction: row;
  120. justify-content: space-around;
  121. border-top: 1px solid var(--f1Color);
  122. .list {
  123. padding: 1vw 0;
  124. text-align: center;
  125. .image {
  126. width: 7vw;
  127. height: 6vw;
  128. }
  129. .name {
  130. font-size: 12px;
  131. }
  132. }
  133. }
  134. }
  135. .scroll-view {
  136. position: absolute;
  137. top: 0;
  138. left: 0;
  139. right: 0;
  140. bottom: 0;
  141. .list-scroll-view {
  142. display: flex;
  143. flex-direction: column;
  144. }
  145. }
  146. .backTop {
  147. position: fixed;
  148. bottom: 20vw;
  149. right: 5vw;
  150. text {
  151. font-size: 30px;
  152. background-color: #0000005f;
  153. border-radius: 90px;
  154. }
  155. }
  156. </style>