注意組件：scroll-view尊残、swiper、swiper-tiem (swiper需要注意高度問題：可以獲取手機屏幕高度來設(shè)置汛聚，也可以自適合內(nèi)容高度設(shè)置)
.js源碼：
Page({
??/** 頁面的初始數(shù)據(jù)? */
??data:?{
????current:?0,?????//當前所在滑塊的?index
????scrollLeft:?0,??//滾動條的位置,一個選項卡寬度是80（自定義來自css）嵌赠，按比例80*n設(shè)置位置
????navlist:?["選項卡1","選項卡2",?"選項卡3",?"選項卡4",?"選項卡5",?"選項卡6",?"選項卡7"],
????conlist:?["內(nèi)容1",?"內(nèi)容2",?"內(nèi)容3",?"內(nèi)容4",?"內(nèi)容5",?"內(nèi)容6",?"內(nèi)容7"]
??},
??//tab切換
??tab:?function?(event)?{
????this.setData({?current:?event.target.dataset.current?})
????this.setData({?scrollLeft:?event.target.dataset.current?*?80?})???//錨點處理
??},
??//滑動事件
??eventchange:?function?(event)?{
????this.setData({?current:?event.detail.current?})
????this.setData({?scrollLeft:?event.detail.current*80?})???//錨點處理
??},
??/**
???*?生命周期函數(shù)--監(jiān)聽頁面加載
???*/
??onLoad:?function?()?{? },
??/**
???*?生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
???*?獲取手機屏幕高度來設(shè)置swiper組件高度
???*/
??onReady:?function?()?{
????let?that_?=?this;
????wx.getSystemInfo({
??????success:function(res){
????????var?windowHeight?=?res.windowHeight-35;
????????that_.setData({
??????????style:?'height:'+windowHeight+'px'
????????})
????????console.log("獲取到屏幕高度為："+'height:'+windowHeight+'px');
??????}
????});
??}
})
.wxml源碼：
<view?class="container">
??<view?class='tab'>
??????<scroll-view?scroll-x="true"?class='tab-nav'?scroll-left='{{scrollLeft}}'?scroll-with-animation="true">
????????<view?class='tab-nav-c'?style='width:{{navlist.length*80}}px'>
????????????<view?wx:for="{{navlist}}"?wx:key="unique"?class='{{current==index?"on":""}}'?data-current="{{index}}"?bindtap='tab'>{{item}}</view>?
????????</view>
??????</scroll-view>
??????<!--swiper組件默認高度為150px-->
??????<swiper?class='tab-box'?current="{{current}}"?bindchange="eventchange"?style="{{style}}">
????????<swiper-item?wx:for="{{conlist}}"?wx:key="unique">
??????????{{item}}
??????????<view>滑動整個頁面也可以進行切換</view>
????????</swiper-item>
????</swiper>
??</view>
</view>??
.wxss源碼：
.tab{?padding:?0rpx?0;}
.tab-nav{
??height:?80rpx;
??line-height:?80rpx;
??width:?100%;
}
.tab-nav?.tab-nav-c?view{
??float:?left;
??height:?80rpx;
??line-height:?80rpx;
??background:?#ccc;
??width:?80px;
??font-size:?30rpx;
??text-align:?center;
??color:?#000;
}
.tab-nav?view.on{
??background:?#3c8dbc;
??color:?#fff;
}
