小程序简单 tab 切换实现

也是终于找到了数据可视化的最佳载体, 用小程序来做可视化简直完美. 尤其对于像我这种搞数据的, 数据分析, 数据报表, 可视化一直是一个巨大难题, 当我认识的最终的方案还是要用前端的时候, 感觉还有麻烦, 前端也太卷了, 我就做个图表, 竟然要学各种框架和语法, js, vue, 页面布局等都要学, 还要搞一个后端服务, 还要部署等...确实有点劝退, 但市面上主流的低代码BI产品也都不太行 (不能定制化), 最终想到也许小程序, 是最佳选择.

这里也是对一个常用的 tab 切换功能简单实现, 应用于一些页面报表切换等.

简单实现

• 通过小程序的 "data-tab" 给每个 tab 块绑定一个标示
• 再给每个 tab 绑定一个名为 "switchTab" 的 bindtap 事件
• 当点击触发的时候就能通过 e.currentTarget.dataset.tab 获取到是哪个 tab 被触发
• 通过 wx:if 或 hidden 结合数据驱动对该内容做一个显示和隐藏(移除)

具体代码如下:

结构部分:

<view>
    <view class="tab-container">
			<view 
				class="tab {{currentTab == 'day'? 'active': ''}}"
				data-tab="day"
				bindtap="switchTab"
			>
				日度
			</view>
			<view 
				class="tab {{currentTab == 'month'? 'active': ''}}"
				data-tab="month"
				bindtap="switchTab"
			>
				月度
			</view>
			<view 
				class="tab {{currentTab == 'quarter'? 'active': ''}}"
				data-tab="quarter"
				bindtap="switchTab"
			>
				季度
			</view>
			<view 
				class="tab {{currentTab == 'year'? 'active': ''}}"
				data-tab="year"
				bindtap="switchTab"
			>
				年度
			</view>
		</view>
		<view class="tab-content">
			<view class="tab-item" wx:if="{{currentTab == 'day'}}">日度数据</view>
			<view class="tab-item bg-pink" wx:elif="{{currentTab == 'month'}}">月度数据</view>
			<view class="tab-item bg-orange" wx:elif="{{currentTab == 'quarter'}}">季度数据</view>
			<view class="tab-item bg-green" wx:else="{{currentTab == 'year'}}">年度数据</view>
		</view>
		<view class="father">
			<view class="son">其他内容区</view>
		</view>
</view>

逻辑部分:

Page({
  data: {
      currentTab: 'day'
	},
	
  switchTab(e) {
		// console.log('当前点的是: ', e.currentTarget.dataset.tab)
		this.setData({
			currentTab: e.currentTarget.dataset.tab
		})
	}
	
})

样式部分:

.tab-container {
    margin: 30rpx;
    padding-left: 160rpx;
    display: flex;
    justify-content: center;
}
.tab {
    flex: 1;
}

.active {
    color: #ff7806;
    font-weight: 700;
}

.tab-content {
    background: skyblue;
}
.tab-item {
    height: 400rpx;
}
.bg-pink {
    background: pink;
}
.bg-orange {
    background: orange;
}
.bg-green {
    background: greenyellow;
}

.father {
  display: flex;
  justify-content: center;
}
.son {
  margin-top: 20rpx;
  height: 400rpx;
  width: 700rpx;
  background: #1ee3cf;
  display: flex;
  align-items: center;
  justify-content: center;

}

补充

这里在控制切换的时候, 我用的是 wx:if -> wx:elif -> wx:else . 其实也可以用 hidden 属性, 写法如下:

<view class="tab-item" hidden ="{{currentTab !== 'day'}}">日度数据</view>

wx:if 和 hidden 这两种写法的区别就是就是 display: none 和 display: hidden 而已. 一个是干掉dom不保留, 一个是加载了但隐藏不可见.

对于要频繁切换的建议用 hidden, 但首次加载耗时多; 不咋频繁使用的建议用 wx:if 即可.

在实现方法上, 其实也可以用小程序自带的 swiper 和 scroll-view 组件来实现各种, 看需求, 哪种方便用哪都行.

耐心和恒心, 总会获得回报的.