微信小程序实现垂直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();}
})

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

微信小程序中识别html标签的方法
微信小程序中识别html标签的方法前言 rich-text组件前言在后台接口返回的数据中有些会带有标签,在微信小程序中如何将其直接渲染在页面呢? rich-text组件在微信小程序中有一个组件 ...
微信小程序点击tab栏切换，点击切换某个tab滚动到中间（ uniapp ）
微信小程序点击tab栏切换,点击某个tab滚动到中间( uniapp ) 之前写过原生js的tab栏滚动到中间,正好最近有个uniapp小程序项目中要用到tab切换滚动, 写个demo发出来 + 注意 ...
微信小程序如何返回上一页的左上角小房子的坑
微信小程序如何返回上一页的左上角小房子的坑头一次写小程序,写了几个插件和几个页面,写完后发现返回上一页的时候是直接返回到首页了出现这一问题的唯一线索就是左上角的小房子,点击小房子会直接退回到首页, ...
uniapp微信小程序如何返回上一页的左上角小房子的坑
微信小程序如何返回上一页的左上角小房子的坑实际上出现的问题是我在跳转页面的时候选择了wx.relaunch(关闭所有页面,打开到应用内的某个页面),它出现的问题就是会出现小房子. 然后我就把跳转页面 ...
微信小程序新闻列表及详情页
微信小程序新闻列表及详情页页面效果新闻列表 <view class="conatiner"><view class="news-item" ...
微信小程序 scroll-view组件实现列表页实例代码
这篇文章主要介绍了微信小程序 scroll-view组件实现列表页实例代码的相关资料,scroll-view组件介绍scroll-view是微信小程序提供的可滚动视图组件,其主要作用是可以用来做手机端 ...
微信小程序中的Tab切换
微信小程序中的Tab切换使用步骤使用步骤代码如下(示例): 定义一个状态status data: {status: 0,}, 代码如下(示例): 在点击切换时利用status来切换根据index ...
微信小程序实战篇-商品详情页（二）
今天要讲解商品详情页中sku的弹出选着框,这个涉及css动画样式,css动画是新的知识点,我们之前并没有接触过,请大家做好笔记,我们要做的效果是酱紫的~ 这个布局难点是需要绘制一个阴影背景.弹出的动画 ...
微信小程序仿抖音上下滑动整屏切换视频
微信小程序仿抖音上下滑动整屏切换视频使用官网上面的扩展组件官方使用的方式: 可结合自己业务修改: 使用官网上面的扩展组件 https://developers.weixin.qq.com/mini ...
微信小程序研发问题梳理:翻页:下拉:缓存:canvas:富文本:分享
微信小程序研发问题梳理最近鼓捣小程序的时候,着实遇到了一些问题,尽管有些再翻看文档几遍,就能找到答案,但还是要发挥下烂笔头的功效,顺便梳理下. 问题列表登录流程小程序标签页地址无法跳转问题页面 ...

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

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

效果演示

代码片段

完整代码

wxml如下

wxss如下

js如下

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

最新文章

热门文章