tab+swiper+fixed

<!--pages/index2/index2.wxml-->

<scroll-view scroll-y="true" style="height:100vh;" bindscroll="scroll" scroll-top="{{scrollTop}}">

<view class="user_msg">

</view>

<!-- swiper -->

<view class="{{scrollY>173 ? 'topnav' : 'content'}}">

<view class="{{_num==0?'active':''}}" data-index='0' bindtap='toggle'>

后援会

</view>

<view class="{{_num==1?'active':''}}" data-index='1' bindtap='toggle'>

明星说

</view>

<view class="{{_num==2?'active':''}}" data-index='2' bindtap='toggle'>

视频

</view>

<view class="{{_num==3?'active':''}}" data-index='3' bindtap='toggle'>

作品

</view>

</view>

<swiper current="{{_num}}" duration="200" bindchange="bindChange">

<!-- 动态-->

<swiper-item>

<scroll-view scroll-y="{{scrollY>173 ? true : false}}" style="height:100vh;">

<view class='box'></view>

</scroll-view>

</swiper-item>

<!-- 商品-->

<swiper-item>

22

</swiper-item>

<!-- 评分 -->

<swiper-item>

33

</swiper-item>

<swiper-item>

44

</swiper-item>

</swiper>

<!-- 底线 -->

</scroll-view>

<view class="fixed_nav">

<button></button>

</view>

 

 

 

/* pages/zhuye/zhuye.wxss */

.fixed_nav{

position: fixed;

bottom: 50rpx;

left: 167rpx;

}

.fixed_nav button{

width: 415rpx;

height: 108rpx;

background: #EF4578;

border-radius: 54rpx;

}

::-webkit-scrollbar {

width: 0;

height: 0;

color: transparent;

}

.user_msg {

width: 750rpx;

height: 314rpx;

background: linear-gradient(116deg, rgba(102, 31, 190, 1), rgba(247, 72, 116, 1));

}

.topnav {

position: fixed;

top: 0rpx;

left: 0rpx;

display: flex;

flex-direction: row;

align-items: stretch;

">#fff;

height: 67rpx;

padding-bottom: 13rpx;

font-size: 28rpx;

font-family: PingFangSC-Regular;

font-weight: 400;

color: #3c3939;

z-index: 9999;

}

.topnav>view {

display: flex;

align-items: center;

}

.topnav>view:nth-child(1) {

margin-left: 81rpx;

}

.topnav>view:nth-child(2) {

margin-left: 81rpx;

}

.topnav>view:nth-child(3) {

margin-left: 96rpx;

}

.topnav>view:nth-child(4) {

margin-left: 111rpx;

}

.content {

display: flex;

flex-direction: row;

align-items: stretch;

">#fff;

height: 67rpx;

padding-bottom: 13rpx;

font-size: 28rpx;

font-family: PingFangSC-Regular;

font-weight: 400;

color: #3c3939;

}

.content>view {

display: flex;

align-items: center;

}

.content>view:nth-child(1) {

margin-left: 81rpx;

}

.content>view:nth-child(2) {

margin-left: 81rpx;

}

.content>view:nth-child(3) {

margin-left: 96rpx;

}

.content>view:nth-child(4) {

margin-left: 111rpx;

}

.active {

color: #f44775;

position: relative;

}

.active::after {

content: '';

display: block;

position: absolute;

left: 28%;

top: 60rpx;

width: 34rpx;

height: 3rpx;

background: rgba(239, 69, 120, 1);

}

swiper {

height: 100vh;

}

.box {

width: 750rpx;

height: 2000rpx;

border: 1rpx solid red;

}

 

 

 

// pages/index2/index2.js

Page({

/**

* 页面的初始数据

*/

data: {

state: 0,

_num: '1',

scrollTop: '0',

scrollY: '',

 

},

//控制回到顶部按钮的显示与消失

//滚动监听

scroll: function (e) {

var that = this;

that.setData({

scrollY: e.detail.scrollTop

})

console.log(this.data.scrollY)

},

/**

* 生命周期函数--监听页面加载

*/

onLoad: function (options) {

},

/**

* 生命周期函数--监听页面初次渲染完成

*/

onReady: function () {

},

/**

* 生命周期函数--监听页面显示

*/

onShow: function () {

},

/**

* 生命周期函数--监听页面隐藏

*/

onHide: function () {

},

/**

* 生命周期函数--监听页面卸载

*/

onUnload: function () {

},

/**

* 页面相关事件处理函数--监听用户下拉动作

*/

onPullDownRefresh: function () {

},

/**

* 页面上拉触底事件的处理函数

*/

onReachBottom: function () {

},

/**

* 用户点击右上角分享

*/

onShareAppMessage: function () {

},

toggle(e) {

console.log(e.currentTarget.dataset.index);

if (this.data._num === e.currentTarget.dataset.index) {

return false;

} else {

this.setData({

_num: e.currentTarget.dataset.index

})

}

},

bindChange: function (e) {

var that = this;

that.setData({

_num: e.detail.current

});

switch (e.detail.current) {

case 0:

that.data.state = 0

break;

case 1:

that.data.state = 1

break;

case 2:

that.data.state = 2

break;

}

},

})