目录
示例图片
WXML
js
WXSS
示例图片
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="/timg?image&quality=80&size=b9999_10000&sec=1537520335665&di=533d913bd1587331b62b0c3f381adec5&imgtype=0&src=http%3A%2F%%2F0731%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//数据的获取、获取点击了哪个“信息”按钮 输出所对应的nameconsole.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;} */
博客借鉴
/sophie_u/article/details/71745125
