【Vant Weapp】van-tab 标签页
目录
激活条颜色
自定义右侧内容
tab切换列表回到顶部
使用sticky粘性布局导致遮挡
tab标题角标为0不展示
tab页中按钮固定在页面底部
激活条颜色
.van-tabs__line {background-color: #3552E3 !important;
}
自定义右侧内容
<van-tabs active="{{ active }}" swipeable bind:click='handleTab' ellipsis="{{false}}"><!-- 右侧筛选 --><view class="filter" slot="nav-right" bindtap="onOpenChange"><image class="img" src="@/assets/images/filter.png" mode="aspectFit"></image></view><van-tab wx:for-items="{{tabs}}" wx:key='id' title='{{item.day}}' name="{{item.id}}">//......</van-tab>
</van-tabs>
.filter {background: #fff;display: flex;align-items: center;
}.img {height: 32rpx;width: 32rpx;padding:26rpx 20rpx;
}.van-tabs__line {background-color: #4c66da !important;
}
data:{tabs: [{day: '购入',id: 1},{day: '销售',id: 2},],activeTab: 1,}
handleTab(e) {this.setData({activeTab: e.detail.name})this.getList()
},onOpenChange() {// 筛选操作
},
tab切换列表回到顶部
tab页中内容上下滚动后, 再切换tab页签时滚动位置总是同步一致。
期待效果:
解决方法:切换tab后,利用wx.pageScrollTo跑到顶部。
<van-tabs active="{{ active }}" bind:change="onChange" sticky><van-tab title="标签 1"><view wx:for="{{50}}" wx:key="item"> {{item}} </view></van-tab><van-tab title="标签 2"><view wx:for="{{208}}" wx:key="item"> {{item}} </view></van-tab><van-tab title="标签 3"></van-tab>
</van-tabs>
data: {active: 1,page: 1,
},
onChange: function (e) {// 初始化let idx = e.detail.indexthis.setData({active: idx,page: 1})// 回到顶部wx.pageScrollTo({duration: 0,scrollTop: 0,})// 获取数据this.getList(page);
},
使用sticky粘性布局导致遮挡
往上滑动,标题要浮动上去。若是滚动到最顶部,没法复原,致使遮挡。
期待效果:
解决方案:使用 createSelectorQuery 方法获取到dom元素的距离顶部的 top 值,如果top 值小于等于0,就说明已经固定到顶部了,这个时候就可以在列表页添加一个距离顶部的边距。
<view wx:for="{{arr}}" wx:key="item"> {{item}} </view><van-tabs id="activetab" active="{{ active }}" bind:change="onChange" sticky ><van-tab title="标签 1"><view class="{{scrollTop ? 'scrollTop' : ''}}"><view wx:for="{{50}}" wx:key="item"> {{item}} </view></view></van-tab><van-tab title="标签 2"></van-tab>
</van-tabs>
data: {arr:['a','b','c','a','b','c','a','b','c','a','b','c'],scrollTop:false
},
//监听页面滚动
onPageScroll(event) {let that = this;const query = that.createSelectorQuery();query.select('#activetab').boundingClientRect();query.selectViewport().scrollOffset();query.exec(function(res){console.log(res[0])that.setData({scrollTop: res[0].top <= 0})})
}
tab标题角标为0不展示
info="{{arr.length > 0 ? arr.length : Boolean(false)}}"
<van-tabs active="{{ active }}" bind:change="onChange"><van-tab title="标签 1" info="{{arr.length > 0 ? arr.length : Boolean(false)}}"><view wx:for="{{arr}}" wx:key="item"> {{item}} </view></van-tab><van-tab title="标签 2" info="{{arr2.length > 0 ? arr2.length : Boolean(false)}}">内容 2</van-tab>
</van-tabs>
data: {active:1,arr:[1,2,3,4,5,6,7],arr2:[]
},
tab页中按钮固定在页面底部
<van-tabs active="{{ active }}" sticky bind:change="onChange"><van-tab title="标签 1" name="1"><view wx:for="{{50}}" wx:key="item"> {{item}} </view><!-- 按钮 --><view class="btn" wx:if="{{active == 1}}">提交</view></van-tab><van-tab title="标签 2" name="2">内容 2</van-tab>
</van-tabs>
.btn {position:fixed;bottom: 0;left:0;height: 80rpx;line-height: 80rpx;width: 100vw;text-align:center;background: red;
}
data: {active: '1',
}
onChange(event) {this.setData({active: event.detail.name})
},
【Vant Weapp】van-tab 标签页相关推荐
- Vant Tab标签页+下拉刷新+上拉加载
Vant Tab标签页+下拉刷新+上拉加载 <template><div class="invoicePickupBox"><div class=&q ...
- 微信小程序|Tab标签页
欢迎点击「算法与编程之美」↑关注我们! 本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章. 欢迎加入团队圈子!与作者面对面!直接点击! 问题描述 在使用小 ...
- html tab与jQuery,js与jquery分别实现tab标签页功能的方法
本文实例讲述了js与jquery分别实现tab标签页功能的方法.分享给大家供大家参考,具体如下: 首先列出样式和html标签 *{margin: 0;padding: 0;} #myul li {li ...
- php表格js特效,JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
本文实例讲述了JavaScript表格隔行变色和Tab标签页特效.分享给大家供大家参考,具体如下: 最近一直在看JavaScript知识,偶尔也穿插一点Jquery,感觉Jquery用起来真爽,减少了 ...
- JavaScript面向对象—— 动态创建tab标签页
昨天呢,介绍了js中类的概念,以及使用类创建对象的过程.今天就用js中的类实现一个小的功能,动态添加.删除标签页.emmmmm,也有点像tab栏切换,不过比tab栏切换多了添加和删除的功能. 案例说明 ...
- vue实现多个tab标签页的切换与关闭
1.实现效果 2.实现原理 vuex,实现对当前激活项,当前tab列表,当前tab的translateX,当前缓存页,当前路由的状态管理. 将vuex中的数据保存到sessionStorage中,避免 ...
- 点击链接跳转到新页面并显示对应的tab标签页切换
原理:从页面A跳转到页面B,则在A页面中跳转页面时传值,然后在B页面中写js获取该值并做对应的操作 附:tab标签页的制作链接:https://mp.csdn.net/postedit/1010531 ...
- Vant Tab标签页
引入 import Vue from 'vue'; import { Tab, Tabs } from 'vant';Vue.use(Tab); Vue.use(Tabs); 代码演示 基础用法 通过 ...
- vue + element 中tab标签页拖拽(拖动) sortablejs插件实现
tab签拖拽更换位置 业务需求 效果图 1.npm安装sortable.js 2.html代码块 3. 在script下导入 4.js逻辑片段(**const el 必须找到自己拖拽的那一列** ) ...
最新文章
- rbac 一个用户对应多个账号_电商后台系统:管理后台之账号管理(一)
- Jenkins 使用 Kubernetes Plugin 完成持续构建与发布
- 【Google Play】IARC 年龄分级 ( IARC 国际年龄分级联盟 | Google Play 设置应用年龄分级 )
- Understand Skills-Based Routing
- 如何把安全证书导入到java中的cacerts证书库(转)
- 室外定位_为什么老师应该走出自己的舒适区而进入室外
- vue打包后CSS中引用的背景图片不显示问题
- iOS学习笔记-地图MapKit入门
- 完整教程--idea使用git进行项目管理
- Docker容器中常见的十种误区
- LDA︱基于LDA的Topic Model变形+一些NLP开源项目
- 【python工具】获取linux和windows系统指定接口的IP地址
- 项目管理十大知识领域之项目整合管理
- 人工智能对数据分析师的影响
- SQL进阶篇之约束(Constraints)
- 论文阅读:Reasoning about Object Affordances in a Knowledge Base Representation
- 频点、带宽、FFT点数、采样率的关系
- 项目经理的知识和技能,学会这些你就是合格的PM
- P4使用Ubuntu中安装教程
- docker中部署piggymetrics微服务项目