swiper+wepy+tab
Posted ylblogs
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
以上是关于swiper+wepy+tab的主要内容，如果未能解决你的问题，请参考以下文章