1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283 |
- <template>
- <view class="pages-content">
- <view class="tabs">
- <u-tabs-swiper ref="uTabs" :list="tabsList" bar-width="100" :current="current" @change="tabsChange" :is-scroll="false"
- swiperWidth="750"></u-tabs-swiper>
- </view>
- <swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
- <swiper-item class="swiper-item" v-for="(item, index) in tabsList" :key="index">
- <scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
- <couponTpl></couponTpl>
- </scroll-view>
- </swiper-item>
- </swiper>
- </view>
- </template>
- <script>
- import couponTpl from '@/pages/coupon/couponTpl.vue'
- export default {
- components: {
- couponTpl
- },
- data() {
- return {
- tabsList: [{
- name: '未使用'
- }, {
- name: '已使用'
- }, {
- name: '已过期'
- }],
- // 因为内部的滑动机制限制,请将tabs组件和swiper组件的current用不同变量赋值
- current: 0, // tabs组件的current值,表示当前活动的tab选项
- swiperCurrent: 0, // swiper组件的current值,表示当前那个swiper-item是活动的
- pageNo:1,
- pageSize:15,
- count:0
- };
- },
- methods: {
- // tabs通知swiper切换
- tabsChange(index) {
- this.swiperCurrent = index;
- },
- // swiper-item左右移动,通知tabs的滑块跟随移动
- transition(e) {
- let dx = e.detail.dx;
- this.$refs.uTabs.setDx(dx);
- },
- // 由于swiper的内部机制问题,快速切换swiper不会触发dx的连续变化,需要在结束时重置状态
- // swiper滑动结束,分别设置tabs和swiper的状态
- animationfinish(e) {
- let current = e.detail.current;
- this.$refs.uTabs.setFinishCurrent(current);
- this.swiperCurrent = current;
- this.current = current;
- },
- // scroll-view到底部加载更多
- onreachBottom() {
-
- },
- // 获取优惠卷列表
- getList(){
-
- }
- }
- };
- </script>
- <style lang="scss">
- page{
- height: 100%;
- }
- .pages-content{
- width: 100%;
- height: 100%;
- display: flex;
- flex-direction: column;
- uni-swiper{
- flex-grow: 1;
- }
- }
- </style>
|