swiper+wepy+tab

<!-- 资金明细 -->

<style lang="less">

.container {

height: 100%;

.dis_flex {

display: flex;

flex-direction: row;

justify-content: space-between;

align-items: center;

}

.youhui {

display: flex;

flex-direction: row;

align-items: stretch;

justify-content: space-around;

width: 750rpx;

height: 119rpx;

background: rgba(255, 255, 255, 1);

font-size: 28rpx;

font-family: PingFang-SC-Regular;

font-weight: 400;

color: #999999;

line-height: 119rpx;

position: fixed;

top: 0;

left: 0;

z-index: 999;

}

.active {

font-size: 34rpx;

font-family: PingFang-SC-Bold;

font-weight: bold;

color: #F83E4D;

line-height: 133rpx;

position: relative;

}

.active:before {

content: '';

position: absolute;

left: -10rpx;

bottom: 0rpx;

width: 86rpx;

height: 6rpx;

background: linear-gradient(0deg, rgba(249, 87, 56, 1) 0%, rgba(248, 39, 96, 1) 100%);

opacity: 0.86;

border-radius: 3rpx;

}

.yohui_article {

width: 750rpx;

}

.swiper-box {

height: 100vh;

}

.time {

height: 138rpx;

}

}

</style>

<template>

<view class="container">

<view class="youhui">

<view class="{{_num==0?'active':''}}" data-index='0' bindtap='toggle'>

全部

</view>

<view class="{{_num==1?'active':''}}" data-index='1' bindtap='toggle'>

收入

</view>

<view class="{{_num==2?'active':''}}" data-index='2' bindtap='toggle'>

支出

</view>

</view>

<view style="height:119rpx;"></view>

<view class="time">

</view>

<!-- -->

<swiper current="{{_num}}" class="swiper-box" duration="200" bindchange="bindChange">

<!-- 未使用 -->

<swiper-item>

<scroll-view scroll-y scroll-with-animation style="height: 1201rpx;">

<view class="yohui_article">

<block wx:for="{{array}}" wx:key="item">

</block>

</view>

</scroll-view>

</swiper-item>

<!-- 已使用 -->

<swiper-item>

<view class="yohui_article youhui_article1">

222

</view>

</swiper-item>

<!-- 已过期 -->

<swiper-item>

<view class="yohui_article youhui_article2">

333

</view>

</swiper-item>

</swiper>

</view>

</template>

<script lang="TypeScript">

import wepy from 'wepy'

export default class MineMoney extends wepy.page {

config = {

navigationBarTitleText: '资金明细',

usingComponents: {

'wxc-elip': '../../packages/@minui/wxc-elip/dist/index'

}

}

data = {

state: 0,

_num: '0',

array: [{

name: '1100'

},

{

name: '1100'

},

{

name: '1100'

},

{

name: '1100'

}, {

name: '1100'

}, {

name: '1100'

}, {

name: '1100'

},

]

}

events = {}

components = {}

mixins = []

watch = {}

methods = {}

onLoad() {}

onShow() {}

onRoute() {}

onReady() {}

onUnload() {}

onPullDownRefresh() {}

onReachBottom() {}

onPageScroll(e) {}

onShareAppMessage(e) {}

toggle(e) {

console.log(e.currentTarget.dataset.index);

if (this.data._num === e.currentTarget.dataset.index) {

return false;

} else {

// this.setData({

// _num: e.currentTarget.dataset.index

// })

this._num = e.currentTarget.dataset.index

this.$apply();

}

}

bindChange(e) {

var that = this;

console.log(e)

// that.setData({

// _num: e.detail.current

// });

that._num = e.detail.current

that.$apply();

switch (e.detail.current) {

case 0:

that.data.state = 0

break;

case 1:

that.data.state = 1

break;

case 2:

that.data.state = 2

break;

}

}

</script>