tab标题因一排八个,所以使用 scroll-view组件,使其可横向滚动。
tab内容可左右滑动切换,使用swiper组件实现
为了偷懒,所以数据都通过wx:for遍历重复出来。
1、设置data-current属性用于:点击当前项时,通过点击事件swichNav中处理e.dataset.current取到点击的目标值。
2、swiper组件的current组件用于控制当前显示哪一页
3、swiper组件绑定change事件switchTab,通过e.detail.current拿到当前页
<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=