码迷,mamicode.com
首页 > 其他好文 > 详细

tab+swiper+fixed

时间:2018-11-10 12:51:52      阅读:178      评论:0      收藏:0      [点我收藏+]

标签:options   item   mes   use   tab   pad   active   height   初始   

<!--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

标签:options   item   mes   use   tab   pad   active   height   初始   

原文地址:https://www.cnblogs.com/ylblogs/p/9938659.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!