效果图图片如下
实现代码xml中
<view class="swiper_tab_view"><scroll-view scroll-x='true' scroll-left="{{scrollleft}}" class='tab-h'><view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0"bindtap="swichNav">要闻</view> <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">视频</view><view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">推荐</view> <view class="swiper-tab-list {{currentTab==3 ? 'on' : ''}}" data-current="3" bindtap="swichNav">上海</view> <view class="swiper-tab-list {{currentTab==4 ? 'on' : ''}}" data-current="4" bindtap="swichNav">娱乐</view> <view class="swiper-tab-list {{currentTab==5 ? 'on' : ''}}" data-current="5" bindtap="swichNav">体育</view> </scroll-view></view><swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px" bindchange="bindChange"> <swiper-item> <view>要闻</view> </swiper-item> <swiper-item> <view>视频</view> </swiper-item> <swiper-item> <view>推荐</view> </swiper-item><swiper-item> <view>上海</view> </swiper-item><swiper-item> <view>娱乐</view> </swiper-item><swiper-item> <view>体育</view> </swiper-item></swiper>
js
Page({/*** 页面的初始数据*/data: {winWidth: 0,winHeight: 0,scrollleft:0,currentTab: 0, },/** * 滑动切换tab */bindChange: function (e) {var that = this;that.setData({currentTab: e.detail.current});this.checkCor();},/** * 点击tab切换 */swichNav: function (e) {var that = this;if (this.data.currentTab === e.target.dataset.current) {return false;} else {that.setData({currentTab: e.target.dataset.current})}},checkCor:function(){if(this.data.currentTab>4){this.setData({scrollleft:300})}else{this.setData({scrollleft:0})}},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {var that = this;/** * 获取系统信息 */wx.getSystemInfo({success: function (res) {that.setData({winWidth: res.windowWidth,winHeight: res.windowHeight});}}); },
wxss
/**index.wxss**/.tab-h{height: 57rpx;width: 100%;line-height: 51rpx;background: white;font-size: 16px;white-space: nowrap;z-index: 999;margin-top: 20rpx;}.swiper_tab_view{width: 100%;text-align: center;line-height: 80rpx;}.swiper-tab-list {font-size: 30rpx;display: inline-block;width: 20%;color: #777;}.on {color: #da7c0c;border-bottom: 5rpx solid #da7c0c;}.swiper-box {display: block;height: 100%;width: 100%;overflow: hidden;}.swiper-box view {text-align: center;}
这样实现了效果如果顶部tab不是很多的话就可以不实用scroll-view 嵌套在外层
忘了参考谁的代码写的了,实在抱歉, 这里就不给出demo了,复制过去就可以实现效果,
