微信小程序实现垂直tab标签页的切换及动态的选中下划线移动-纵向

微信小程序实现垂直tab标签页的切换及动态的选中下划线移动

注意：当前是纵向切换，横向切换请点击：横向切换tab

效果演示

代码片段

代码段链接如下：
纵向切换tab代码片段
可直接点击代码片段路径观看完整演示。

完整代码

wxml如下

<view class="cont" style="height: {{allHeight}}rpx;">
    <scroll-view class="lf" style="height: {{allHeight}}rpx;" scroll-y bindscroll="viewscroll" scroll-into-view="lf{{i}}" scroll-with-animation>
        <view class="contline" style="top: {{conttop}}px;"></view>
        <view class="item {{item.id == i ? 'active' : ''}}" wx:for="{{list}}" id="lf{{item.id}}" wx:key="index" data-id="{{item.id}}" bindtap="clicklf">{{item.name}}</view>
    </scroll-view>
	<swiper current="{{cate_id}}" vertical="{{true}}" class="swiper_cont">
		<swiper-item wx:for="{{list}}" item-id="{{item.id}}" wx:key="id">
			<scroll-view class="rf" style="height: {{allHeight}}rpx;" scroll-y enable-back-to-top='true' bindscrolltolower="loadmore" scroll-top="{{top}}">
				{{item.name}}
			</scroll-view>
		</swiper-item>
	</swiper>
</view>

wxss如下

page{ width: 100%; height: 100%;}
.cont{ display: flex; width:100%; height: 100%;}
.cont .swiper_cont{ flex: 1 1 0; height: 100%; overflow: hidden;}
.cont .swiper_cont swiper-item{ background-color: #FFAEC9;}
.cont .swiper_cont swiper-item:nth-child(2n){ background-color: #99D9EA;}
.cont .lf{width:165rpx;overflow:auto;font-size:28px;background:#EAECF1;-webkit-overflow-scrolling: touch}
.cont .lf .item{line-height:79rpx;text-align: center;color:#666;font-weight:normal;position:relative;font-size: 28rpx;}
.cont .lf .item.active{color:#000!important;background:#fff;font-weight:bold}
.cont .rf{flex:1 1 0; color: #fff; text-align: center; line-height: 180rpx; overflow:auto; -webkit-overflow-scrolling: touch}
.contline{width:5rpx;height:29rpx;background:#FF3742;position:absolute;left:0;top:25rpx;z-index:9;transition:all .8s}

js如下

Page({
	data: {
		list: [
			{ name: '热门', id: 0},
			{ name: '上衣女', id: 1},
			{ name: '上衣男', id: 2},
			{ name: 'T恤', id: 3},
			{ name: '短裙', id: 4},
			{ name: '长裙', id: 5},
			{ name: '连衣裙', id: 6},
			{ name: '夏季凉鞋', id: 7},
			{ name: '冬季短靴', id: 8},
			{ name: '包包饰品', id: 9},
			{ name: '休闲裤', id: 10},
			{ name: '西装', id: 11},
		],
		i: 0,
		id:null,
		top: 0,
		scrollTop: 0,
		page: 1,
		nomore: false,
		stopLoadingmoreTiem: false,
	},
	onLoad(){
		let _this = this;
        wx.getSystemInfo({
            success: function (res) {
                _this.setData({
                    allHeight: res.windowHeight * 750 / res.windowWidth
                })
            }
        })
	},
	clicklf(e){
		let _this = this,
			i = e.currentTarget.dataset.id,
            lasttop = parseInt(_this.data.lasttop),
            scrollTop = parseInt(_this.data.scrollTop);
        this.setData({
            i: i,
            nomore: false,
            top: 0,
            id: i,
            cate_id: i
        })
        wx.createSelectorQuery().select('.cont .lf .item.active').boundingClientRect(rect => {
            _this.setData({
                conttop: rect.top + scrollTop + 12 - lasttop
            })
        }).exec()
        //在这里请求接口获取数据
    },
    viewscroll(e){
        this.setData({
            scrollTop: e.detail.scrollTop
        })
	},
	onShow: function () {
        let _this = this,
            lasttop = _this.data.lasttop;
        wx.createSelectorQuery().select('.cont .active').boundingClientRect(rect => {
            // console.log(rect);
            lasttop = rect.top;
            _this.setData({
                lasttop: lasttop
            })
        }).exec();
    }
})