小程序纵向选项卡可以滑动_转载【微信小程序】：微信小程序滚动Tab选项卡：左右可滑动切换(仿某宝)...

1、本文转载至：http://blog.csdn.net/sophie_u/article/details/71745125

2、效果：

3、最终效果如上。问题：

1)、tab标题总共8个，所以一屏无法全部显示。

2)、tab内容区左右滑动切换时，tab标题随即做标记(active)。

3)、当active的标题不在当前屏显示时，要使其能显示到当前屏中。

4、

一、wxml结构

tab标题因一排八个，所以使用 scroll-view组件，使其可横向滚动。

tab内容可左右滑动切换，使用swiper组件实现

为了偷懒，所以数据都通过wx:for遍历重复出来。

说明：

1、设置data-current属性用于：点击当前项时，通过点击事件swichNav中处理e.dataset.current取到点击的目标值。

2、swiper组件的current组件用于控制当前显示哪一页

3、swiper组件绑定change事件switchTab，通过e.detail.current拿到当前页

健康

情感

职场

育儿

纠纷

青葱

全部

其他

欢颜

知名情感博主

134个回答，2234人听过

问TA

三、js部分

var app =getApp();

Page({

data:{

winHeight:"",//窗口高度

currentTab:0, //预设当前项的值

scrollLeft:0, //tab标题的滚动条位置

expertList:[{ //假数据

img:"avatar.png",

name:"欢顔",

tag:"知名情感博主",

answer:134,

listen:2234}]

},//滚动切换标签样式

switchTab:function(e){

var that = this;that.setData({

currentTab:e.detail.current

});that.checkCor();

},//点击标题切换当前页时改变样式

swichNav:function(e){

var that = this;var cur=e.target.dataset.current;if(that.data.currentTaB==cur){return false;}else{that.setData({

currentTab:cur

})

}

},//判断当前滚动超过一屏时，设置tab标题滚动条。

checkCor:function(){

var that = this;if (that.data.currentTab>4){that.setData({

scrollLeft:300})

}else{that.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-180;

console.log(calc)

that.setData( {

winHeight: calc

});

}

});

},

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%;}