.swiper-tab {
width: 100%;
height: 66rpx;
text-align: center;
background-color: white;
border-bottom: 1px solid #F3F3F7;
box-sizing: border-box;
}
.swiper-tab-list {
font-size: 24rpx;
display: inline-block;
width: 25%;
height: 100%;
color: #212121;
line-height: 66rpx;
}
.bill-top {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10rpx 15rpx;
background: #ff928c;
border-radius: 999px;
}
.app_topicker {
width: 190rpx;
}
.app_topicker text {
min-width: 160rpx;
text-align: right;
}
/* 下拉切换中的切换 */
.nav {
width: 20%;
height: 100rpx;
float: left;
flex-direction: row;
}
.default {
width: 100%;
line-height: 100rpx;
text-align: center;
color: #000;
font-weight: bold;
font-size: 28rpx;
overflow: hidden;
}
.red {
width: 100%;
float: right;
line-height: 100rpx;
text-align: center;
color: #f63;
font-weight: bold;
font-size: 28rpx;
}
.show {
display: block;
text-align: center;
line-height: 200rpx;
}
.hidden {
display: none;
text-align: center;
line-height: 200px;
}
#rights {
width: 79%;
float: right;
border-left: solid 1px #eee;
font-size: 15px;
max-height: 600rpx;
overflow-y: auto;
overflow-x: hidden;
}
/* */
.categroy-left {
float: left;
width: 300rpx;
height: 100%;
overflow-y: auto;
box-sizing: border-box;
background: #f8f8f8;
}
.categroy-left .cate-list {
position: relative;
height: 70rpx;
line-height: 70rpx;
font-size: 28rpx;
text-align: center;
border-left: 3px solid #fff;
}
.categroy-left .cate-list.on {
color: #FF6B62;
border-color: #FF6B62;
background: #fff;
}
.categroy-right {
float: right;
width: 450rpx;
height: 100%;
overflow-y: auto;
background: #fff;
}
.cate-box {
height: 100%;
overflow-y: auto;
box-sizing: border-box;
}
.cate-box view {
width: 100%;
height: 70rpx;
padding: 0 30rpx 0 60rpx;
font-size: 28rpx;
line-height: 70rpx;
border-bottom: 1rpx solid #f3f3f7;
box-sizing: border-box;
}
.cate-box view.on {
border-bottom: 1rpx solid #FF6B62;
}
<view class="swiper-tab">
<view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="tabNav">{{twoTitle}}
<i></i>
</view>
</view>
<swiper current="{{currentTab}}" duration="600" class="swiper-item" style='display:{{displays}}'>
<swiper-item>
<view class="categroy-left">
<view wx:for="{{category}}" wx:key="index" data-id="{{item.id}}" data-index="{{index}}" bindtap="switchTab"
class="cate-list {{curIndex === index?'on':''}}">{{item.title}}</view>
</view>
<scroll-view class="categroy-right" scroll-y="{{isScroll}}" scroll-into-view="{{toView}}"
scroll-with-animation="true">
<block wx:for="{{filterTwo}}" wx:for-index="idx">
<view id="{{item.id}}" class="cate-box">
<view class="{{curIndex === index?'on':''}}" bindtap="filterTwo" wx:for="{{item.list}}">{{item}}</view>
</view>
</block>
</scroll-view>
</swiper-item>
</swiper>
Page({
/**
* 页面的初始数据
*/
data: {
twoTitle: '账单项目',
category: [{
id: 'a',
title: '全部'
}, {
id: 'b',
title: '租金'
},
{
id: 'f',
title: '维修费用'
},
{
id: 'j',
title: '违约赔偿'
},
{
id: 'k',
title: '租赁费用'
},
{
id: 'l',
title: '其他类'
},
],
filterTwo: [{
id: 'a',
list: ['全部项目']
}, {
id: 'b',
list: ['全部租金', '租金补差', '租金涨价', '房租手动添加']
}, {
id: 'f',
list: ['全部维修费', '家电维修', '房屋维修']
}, {
id: 'j',
list: ['全部违约赔偿', '赔偿金', '违约金']
}, {
id: 'k',
list: ['全部租赁费用', '家具租赁费', '电器租赁费']
}, {
id: 'l',
list: ['全部其他类', '杂项', '水费押金']
}],
curIndex: 0,
toView: '',
},
switchTab(e) {
const that = this;
this.setData({
isScroll: true
})
setTimeout(function () {
that.setData({
toView: e.target.dataset.id,
curIndex: e.target.dataset.index
})
}, 0)
setTimeout(function () {
that.setData({
isScroll: false
})
}, 1)
},
filterTwo: function (e) {
let index = e.currentTarget.dataset.index;
console.log(index)
this.setData({
twoTitle: index
})
this.setData({
curIndex: e.target.dataset.num
})
},
})
请大佬帮忙看下,点击右侧的某个项目,获取项目值,顶部“账单项目”标题就替换点击的项目内容,现在index显示undefined
因为你
index
就是没定义啊……你这不是都改名成叫
idx
了嘛?