topicPlaza.vue 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. <template>
  2. <view class="topic-plaza flex-common-css">
  3. <Nav class="nav-class" :bgckgroundBox="!isScroll?'#141414':'#fff'" :titleColor="isScroll?'#000':'#fff'">
  4. </Nav>
  5. <scroll-view :scroll-y="true" class="list-scroll" @scroll="scroll" @scrolltolower="scrolltolower">
  6. <view class="swiper-box">
  7. <uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="info" :current="current"
  8. :mode="mode" :dots-styles="dotsStyles" field="content">
  9. <swiper class="swiper-box">
  10. <swiper-item v-for="(item, index) in 3" :key="index">
  11. <view class="swiper-item" :class="'swiper-item'">
  12. <!-- <text style="color: #fff; font-size: 32px;">{{index+1}}</text> -->
  13. </view>
  14. </swiper-item>
  15. </swiper>
  16. </uni-swiper-dot>
  17. </view>
  18. </scroll-view>
  19. </view>
  20. </template>
  21. <script>
  22. export default {
  23. components: {},
  24. data() {
  25. return {
  26. isScroll: false,
  27. };
  28. },
  29. mounted() {},
  30. methods: {
  31. scroll(e) {
  32. if (e.detail.scrollTop > 50) {
  33. this.isScroll = true
  34. } else {
  35. this.isScroll = false
  36. }
  37. },
  38. scrolltolower() {
  39. console.log('触底');
  40. },
  41. },
  42. }
  43. </script>
  44. <style lang="scss" scoped>
  45. .topic-plaza {
  46. .list-scroll {
  47. width: 100%;
  48. flex: 1;
  49. overflow: auto;
  50. .swiper-box {
  51. width: 100%;
  52. height: 436rpx;
  53. }
  54. }
  55. }
  56. </style>