注意组件：scroll-view、swiper、swiper-tiem (swiper需要注意高度问题：可以获取手机屏幕高度来设置，也可以自适合内容高度设置)
.js源码：
Page({
/** 页面的初始数据 */
data: {
current: 0, //当前所在滑块的 index
scrollLeft: 0, //滚动条的位置,一个选项卡宽度是80（自定义来自css），按比例80*n设置位置
navlist: ["选项卡1","选项卡2", "选项卡3", "选项卡4", "选项卡5", "选项卡6", "选项卡7"],
conlist: ["内容1", "内容2", "内容3", "内容4", "内容5", "内容6", "内容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 }) //锚点处理
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function () { },
/**
* 生命周期函数--监听页面初次渲染完成
* 获取手机屏幕高度来设置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;
}
