目录
示例图片
WXML
<view >
<scroll-view scroll-x="true" class="tab-h" scroll-left="{{scrollLeft}}">
<view class="tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="swichNav">健康</view>
<view class="tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="swichNav">情感</view>
<view class="tab-item {{currentTab==2?'active':''}}" data-current="2" bindtap="swichNav">职场</view>
<view class="tab-item {{currentTab==3?'active':''}}" data-current="3" bindtap="swichNav">育儿</view>
<view class="tab-item {{currentTab==4?'active':''}}" data-current="4" bindtap="swichNav">纠纷</view>
<view class="tab-item {{currentTab==5?'active':''}}" data-current="5" bindtap="swichNav">青葱</view>
<view class="tab-item {{currentTab==6?'active':''}}" data-current="6" bindtap="swichNav">全部</view>
<view class="tab-item {{currentTab==7?'active':''}}" data-current="7" bindtap="swichNav">其他</view>
</scroll-view>
<swiper class="tab-content" current="{{currentTab}}" duration="300" bindchange="switchTab"
style="height:{{winHeight}}rpx">
<swiper-item wx:for="{{[0,1,2,3,4,5,6,7]}}">
<scroll-view scroll-y="true" class="scoll-h" >
<block wx:for="{{expertList}}" wx:key="*this">
<view class="item-ans">
<view class="avatar">
<image class="img" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537520335665&di=533d913bd1587331b62b0c3f381adec5&imgtype=0&src=http%3A%2F%2Fpic31.nipic.com%2F20130731%2F7331048_094333540110_2.png"></image>
</view>
<view class="expertInfo">
<view class="name">{{expertList[index].name}}</view>
<view class="tag">{{expertList[index].tag}}</view>
<view class="answerHistory">{{expertList[index].answer}}个回答,{{expertList[index].listen}}人听过 </view>
</view>
<!-- data-index='{{index}}'用于js获取点击的第几项 index -->
<button bindtap='info' data-index='{{index}}' class="askBtn">信息</button>
</view>
</block>
</scroll-view>
</swiper-item>
</swiper>
</view>
js
//假数据有点多。写的很详细。很啰嗦
//e.detail.current现在是在哪一个选项卡里面
//that.data.expertList[e.currentTarget.dataset.index].name 数据的获取、获取点击了哪个“信息”按钮 输出所对应的name
var app = getApp();
Page({
data: {
winHeight: "", //窗口高度
currentTab: 0, //预设当前项的值
scrollLeft: 0, //tab标题的滚动条位置
expertList: [{ //假数据
img: "avatar.png",
name: "健康1",
tag: "过去过不去都会过去",
answer: 134,
listen: 2234
},
{ //假数据
img: "avatar.png",
name: "分分2",
tag: "过去过不去都会过去",
answer: 134,
listen: 2234
},
{ //假数据
img: "avatar.png",
name: "挖方3",
tag: "过去过不去都会过去",
answer: 134,
listen: 2234
},
{ //假数据
img: "avatar.png",
name: "哥ere4",
tag: "过去过不去都会过去",
answer: 134,
listen: 2234
},
{ //假数据
img: "avatar.png",
name: "阿迪王5",
tag: "过去过不去都会过去",
answer: 134,
listen: 2234
},
{ //假数据
img: "avatar.png",
name: "啊打发6",
tag: "过去过不去都会过去",
answer: 134,
listen: 2234
},
{ //假数据
img: "avatar.png",
name: "咖妃7",
tag: "过去过不去都会过去",
answer: 134,
listen: 2234
},
]
},
// 滚动切换标签样式
switchTab: function(e) {
console.log(e.detail)
//e.detail.current现在是在哪一个选项卡里面
switch (e.detail.current) {
case 0:
this.setData({
currentTab: e.detail.current,
expertList: [{ //假数据
img: "avatar.png",
name: "健康1",
tag: "过去过不去都会过去",
answer: 134,
listen: 2234
},
{ //假数据
img: "avatar.png",
name: "分分2",
tag: "过去过不去都会过去",
answer: 134,
listen: 2234
},
{ //假数据
img: "avatar.png",
name: "挖方3",
tag: "过去过不去都会过去",
answer: 134,
listen: 2234
},
{ //假数据
img: "avatar.png",
name: "哥啊4",
tag: "过去过不去都会过去",
answer: 134,
listen: 2234
},
{ //假数据
img: "avatar.png",
name: "阿迪王5",
tag: "过去过不去都会过去",
answer: 134,
listen: 2234
},
{ //假数据
img: "avatar.png",
name: "啊打发6",
tag: "过去过不去都会过去",
answer: 134,
listen: 2234
},
{ //假数据
img: "avatar.png",
name: "咖妃7",
tag: "过去过不去都会过去",
answer: 134,
listen: 2234
},
]
}); break;
case 1:
this.setData({
currentTab: e.detail.current,
expertList: [{ //假数据
img: "avatar.png",
name: "情感1",
tag: "过去过不去都会过去",
answer: 134,
listen: 2234
},
{ //假数据
img: "avatar.png",
name: "分分2",
tag: "过去过不去都会过去",
answer: 134,
listen: 2234
},
{ //假数据
img: "avatar.png",
name: "挖方3",
tag: "过去过不去都会过去",
answer: 134,
listen: 2234
},
{ //假数据
img: "avatar.png",
name: "哥啊4",
tag: "过去过不去都会过去",
answer: 134,
listen: 2234
},
{ //假数据
img: "avatar.png",
name: "阿迪王5",
tag: "过去过不去都会过去",
answer: 134,
listen: 2234
},
{ //假数据
img: "avatar.png",
name: "啊打发6",
tag: "过去过不去都会过去",
answer: 134,
listen: 2234
},
{ //假数据
img: "avatar.png",
name: "咖妃7",
tag: "过去过不去都会过去",
answer: 134,
listen: 2234
},
]
}); break;
case 2:
this.setData({
currentTab: e.detail.current,
expertList: [{ //假数据
img: "avatar.png",
name: "职场",
tag: "过去过不去都会过去",
answer: 134,
listen: 2234
},
{ //假数据
img: "avatar.png",
name: "咖妃挖2",
tag: "过去过不去都会过去",
answer: 134,
listen: 2234
},
{ //假数据
img: "avatar.png",
name: "把我3",
tag: "过去过不去都会过去",
answer: 134,
listen: 2234
},
{ //假数据
img: "avatar.png",
name: "哥啊4",
tag: "过去过不去都会过去",
answer: 134,
listen: 2234
},
{ //假数据
img: "avatar.png",
name: "阿迪王5",
tag: "过去过不去都会过去",
answer: 134,
listen: 2234
},
{ //假数据
img: "avatar.png",
name: "啊打发6",
tag: "过去过不去都会过去",
answer: 134,
listen: 2234
},
{ //假数据
img: "avatar.png",
name: "咖妃7",
tag: "过去过不去都会过去",
answer: 134,
listen: 2234
},
]
}); break;
case 3:
this.setData({
currentTab: e.detail.current,
expertList: [{ //假数据
img: "avatar.png",
name: "育儿1",
tag: "过去过不去都会过去",
answer: 134,
listen: 2234
},
{ //假数据
img: "avatar.png",
name: "分分2",
tag: "过去过不去都会过去",
answer: 134,
listen: 2234
},
{ //假数据
img: "avatar.png",
name: "挖方3",
tag: "过去过不去都会过去",
answer: 134,
listen: 2234
},
{ //假数据
img: "avatar.png",
name: "哥啊4",
tag: "过去过不去都会过去",
answer: 134,
listen: 2234
},
{ //假数据
img: "avatar.png",
name: "阿迪王5",
tag: "过去过不去都会过去",
answer: 134,
listen: 2234
},
{ //假数据
img: "avatar.png",
name: "啊打发6",
tag: "过去过不去都会过去",
answer: 134,
listen: 2234
},
{ //假数据
img: "avatar.png",
name: "咖妃7",
tag: "过去过不去都会过去",
answer: 134,
listen: 2234
},
]
}); break;
case 4:
this.setData({
currentTab: e.detail.current,
expertList: [{ //假数据
img: "avatar.png",
name: "纠纷1",
tag: "过去过不去都会过去",
answer: 134,
listen: 2234
},
{ //假数据
img: "avatar.png",
name: "分分2",
tag: "过去过不去都会过去",
answer: 134,
listen: 2234
},
{ //假数据
img: "avatar.png",
name: "挖方3",
tag: "过去过不去都会过去",
answer: 134,
listen: 2234
},
{ //假数据
img: "avatar.png",
name: "哥啊4",
tag: "过去过不去都会过去",
answer: 134,
listen: 2234
},
{ //假数据
img: "avatar.png",
name: "阿迪王5",
tag: "过去过不去都会过去",
answer: 134,
listen: 2234
},
{ //假数据
img: "avatar.png",
name: "啊打发6",
tag: "过去过不去都会过去",
answer: 134,
listen: 2234
},
{ //假数据
img: "avatar.png",
name: "咖妃7",
tag: "过去过不去都会过去",
answer: 134,
listen: 2234
},
]
}); break;
case 5:
this.setData({
currentTab: e.detail.current,
expertList: [{ //假数据
img: "avatar.png",
name: "青葱1",
tag: "过去过不去都会过去",
answer: 134,
listen: 2234
},
{ //假数据
img: "avatar.png",
name: "分分2",
tag: "过去过不去都会过去",
answer: 134,
listen: 2234
},
{ //假数据
img: "avatar.png",
name: "挖方3",
tag: "过去过不去都会过去",
answer: 134,
listen: 2234
},
{ //假数据
img: "avatar.png",
name: "哥啊4",
tag: "过去过不去都会过去",
answer: 134,
listen: 2234
},
{ //假数据
img: "avatar.png",
name: "阿迪王5",
tag: "过去过不去都会过去",
answer: 134,
listen: 2234
},
{ //假数据
img: "avatar.png",
name: "啊打发6",
tag: "过去过不去都会过去",
answer: 134,
listen: 2234
},
{ //假数据
img: "avatar.png",
name: "咖妃7",
tag: "过去过不去都会过去",
answer: 134,
listen: 2234
},
]
}); break;
case 6:
this.setData({
currentTab: e.detail.current,
expertList: [{ //假数据
img: "avatar.png",
name: "全部1",
tag: "过去过不去都会过去",
answer: 134,
listen: 2234
},
{ //假数据
img: "avatar.png",
name: "分分2",
tag: "过去过不去都会过去",
answer: 134,
listen: 2234
},
{ //假数据
img: "avatar.png",
name: "挖方3",
tag: "过去过不去都会过去",
answer: 134,
listen: 2234
},
{ //假数据
img: "avatar.png",
name: "哥啊4",
tag: "过去过不去都会过去",
answer: 134,
listen: 223
},
{ //假数据
img: "avatar.png",
name: "阿迪王5",
tag: "过去过不去都会过去",
answer: 134,
listen: 22
},
{ //假数据
img: "avatar.png",
name: "啊打发6",
tag: "过去过不去都会过去",
answer: 134,
listen: 223
},
{ //假数据
img: "avatar.png",
name: "咖妃7",
tag: "过去过不去都会过去",
answer: 134,
listen: 2234
},
]
}); break;
case 7:
this.setData({
currentTab: e.detail.current,
expertList: [{ //假数据
img: "avatar.png",
name: "其他1",
tag: "过去过不去都会过去",
answer: 134,
listen: 2234
},
{ //假数据
img: "avatar.png",
name: "分分2",
tag: "过去过不去都会过去",
answer: 134,
listen: 2234
},
{ //假数据
img: "avatar.png",
name: "挖方3",
tag: "过去过不去都会过去",
answer: 134,
listen: 2234
},
{ //假数据
img: "avatar.png",
name: "哥啊4",
tag: "过去过不去都会过去",
answer: 134,
listen: 2234
},
{ //假数据
img: "avatar.png",
name: "阿迪王5",
tag: "过去过不去都会过去",
answer: 134,
listen: 2234
},
{ //假数据
img: "avatar.png",
name: "啊打发6",
tag: "过去过不去都会过去",
answer: 134,
listen: 2234
},
{ //假数据
img: "avatar.png",
name: "咖妃7",
tag: "过去过不去都会过去",
answer: 134,
listen: 2234
},
]
}); break;
}
this.checkCor();
},
// 点击标题切换当前页时改变样式
swichNav: function(e) {
var cur = e.target.dataset.current;
if (this.data.currentTaB == cur) {
return false;
} else {
this.setData({
currentTab: cur
})
}
},
//判断当前滚动超过一屏时,设置tab标题滚动条。
checkCor: function() {
if (this.data.currentTab > 4) {
this.setData({
scrollLeft: 300
})
} else {
this.setData({
scrollLeft: 0
})
}
},
onLoad: function() {
var that = this;
// 高度自适应
wx.getSystemInfo({
success: function(res) {
var clientHeight = res.windowHeight,
clientWidth = res.windowWidth,
rpxR = 750 / clientWidth;
var calc = clientHeight * rpxR - 100;
console.log(calc)
that.setData({
winHeight: calc
});
}
});
},
info(e){
var that = this
//数据的获取、获取点击了哪个“信息”按钮 输出所对应的name
console.log(that.data.expertList[e.currentTarget.dataset.index].name)
},
footerTap: app.footerTap
})
WXSS
.tab-h {
height: 80rpx;
width: 100%;
box-sizing: border-box;
overflow: hidden;
line-height: 80rpx;
background: #f7f7f7;
font-size: 16px;
white-space: nowrap;
position: fixed;
top: 0;
left: 0;
z-index: 99;
}
.tab-item {
margin: 0 36rpx;
display: inline-block;
}
.tab-item.active {
color: #4675f9;
position: relative;
}
.tab-item.active:after {
content: "";
display: block;
height: 8rpx;
width: 52rpx;
background: #4675f9;
position: absolute;
bottom: 0;
left: 5rpx;
border-radius: 16rpx;
}
.item-ans {
width: 100%;
display: flex;
flex-grow: row no-wrap;
justify-content: space-between;
padding: 30rpx;
box-sizing: border-box;
height: 180rpx;
align-items: center;
border-bottom: 1px solid #f2f2f2;
}
.avatar {
width: 100rpx;
height: 100rpx;
position: relative;
padding-right: 30rpx;
}
.avatar .img {
width: 100%;
height: 100%;
}
.avatar .doyen {
width: 40rpx;
height: 40rpx;
position: absolute;
bottom: -2px;
right: 20rpx;
}
.expertInfo {
font-size: 12px;
flex-grow: 2;
color: #b0b0b0;
line-height: 1.5em;
}
.expertInfo .name {
font-size: 16px;
color: #000;
margin-bottom: 6px;
}
.askBtn {
width: 120rpx;
height: 60rpx;
line-height: 60rpx;
text-align: center;
font-size: 14px;
border-radius: 60rpx;
border: 1px solid #4675f9;
color: #4675f9;
}
.tab-content {
margin-top: 80rpx;
}
.scoll-h {
height: 100%;
}
/*
.swiper {
height: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
padding-top: 1000rpx;
}
swiper-item view.item-ans {
height: 100%;
overflow-y: scroll;
} */
博客借鉴