tab+swiper+fixed
Posted ylblogs
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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;
}
},
})
以上是关于tab+swiper+fixed的主要内容，如果未能解决你的问题，请参考以下文章
关于Tab切换中嵌套Swiper移动端滑动插件，导致Swiper插件失效的问题
swiper在tab切换的时候，swiper不生效，当display:none 后 再次显示 无法自动滑动问题解决方案
swiper tab切换 点击每一按钮，怎么可以使swiper容器，移动