| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859 |
- <template>
- <view class="topic-plaza flex-common-css">
- <Nav class="nav-class" :bgckgroundBox="!isScroll?'#141414':'#fff'" :titleColor="isScroll?'#000':'#fff'">
- </Nav>
- <scroll-view :scroll-y="true" class="list-scroll" @scroll="scroll" @scrolltolower="scrolltolower">
- <view class="swiper-box">
- <uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="info" :current="current"
- :mode="mode" :dots-styles="dotsStyles" field="content">
- <swiper class="swiper-box">
- <swiper-item v-for="(item, index) in 3" :key="index">
- <view class="swiper-item" :class="'swiper-item'">
- <!-- <text style="color: #fff; font-size: 32px;">{{index+1}}</text> -->
- </view>
- </swiper-item>
- </swiper>
- </uni-swiper-dot>
- </view>
- </scroll-view>
- </view>
- </template>
- <script>
- export default {
- components: {},
- data() {
- return {
- isScroll: false,
- };
- },
- mounted() {},
- methods: {
- scroll(e) {
- if (e.detail.scrollTop > 50) {
- this.isScroll = true
- } else {
- this.isScroll = false
- }
- },
- scrolltolower() {
- console.log('触底');
- },
- },
- }
- </script>
- <style lang="scss" scoped>
- .topic-plaza {
- .list-scroll {
- width: 100%;
- flex: 1;
- overflow: auto;
- .swiper-box {
- width: 100%;
- height: 436rpx;
- }
- }
- }
- </style>
|