前端特效:小程序导航滑动衔接

效果图

                     

html部分：

<view class='all'>

<view class='head'>

<view class='{{number==0?"one":"color"}}' bindtap='change' data-id='0'>未使用<view></view></view>

<view class='{{number==1?"one":"color"}}' bindtap='change' data-id='1'>已使用<view></view></view>

<view class='{{number==2?"one":"color"}}' bindtap='change' data-id='2'>已失效<view></view></view>

</view>

<swiper class='box' bindchange="swiperChange" circular current='{{index}}'>

<swiper-item> 填写未使用这部分的内容</swiper-item>

<swiper-item>填写已使用这部分的内容</swiper-item>

<swiper-item>填写已失效这部分的内容</swiper-item>

</swiper>

</view>

css样式

.all{

width: 100%;

height: 100%;

position: fixed;

top: 0;

left: 0;

border-top: 1px solid #d6d6d6;

}

.head{

width: 100%;

height: 100rpx;

background: #fffbf2;

display: flex;

line-height: 100rpx;

}

.head>.one,.head>.color{

flex: auto;

text-align: center;

color: #f1a529;

font-size: 30rpx;

position: relative;

font-weight: 600

}

.head>.color{

color: #222

}

.head>.one view{

width: 60rpx;

height: 5rpx;

background: #f1a529;

position: absolute;

left: 0;

right: 0;

margin: auto;

bottom: 0;

}

.head>.color view{

width: 60rpx;

height: 5rpx;

background: transparent;

position: absolute;

left: 0;

right: 0;

margin: auto;

bottom: 0;

}

.box{

width: 100%;

height: 95%;

}

.box .two{

width: 100%;

height: 100%;

overflow-y: auto

}

 

js部分

data: {

number: 0,

index: 0

},

 

//主体滑动

swiperChange(e) {

var that = this

that.setData({

number: e.detail.current

})

console.log(e.detail.current)

console.log(that.data.number)

},

 

//点击导航标题 ，主体滑块跟随移动

change(e) {

var that = this

console.log(e.currentTarget.dataset.id)

if (e.currentTarget.dataset.id === that.data.index) {

return false

} else {

that.setData({

index: e.currentTarget.dataset.id

})

}

},