微信小程序怎么实现tab页面切换效果(tab,微信小程序,开发技术)

效果图

html 页面

<viewclass="bgwhite">
<scroll-viewscroll-x="true">
<viewclass="width200rownowrap">
<viewclass="f32c666p-tb-20p-lr-30{{currentData==0?'topic':''}}"data-current="0"bindtap='checkCurrent'>第1题</view>
<viewclass="f32c666p-tb-20p-lr-30{{currentData==1?'topic':''}}"data-current="1"bindtap='checkCurrent'>第2题</view>
<viewclass="f32c666p-tb-20p-lr-30{{currentData==2?'topic':''}}"data-current="2"bindtap='checkCurrent'>第3题</view>
<viewclass="f32c666p-tb-20p-lr-30{{currentData==3?'topic':''}}"data-current="3"bindtap='checkCurrent'>第4题</view>
<viewclass="f32c666p-tb-20p-lr-30{{currentData==4?'topic':''}}"data-current="4"bindtap='checkCurrent'>第5题</view>
<viewclass="f32c666p-tb-20p-lr-30{{currentData==5?'topic':''}}"data-current="5"bindtap='checkCurrent'>第6题</view>
</view>
</scroll-view>
</view>
<swipercurrent="{{currentData}}"class='width200'duration="300"bindchange="bindchange">
<swiper-item>
<viewclass="m-lr-20">
<viewclass="rowp-t-30p-b-10">
<viewclass="radio_singelf22p-lr-10">单选</view>
<viewclass="m-l-20weight500f28">题目1</view>
</view>
<radio-groupbindchange="radioChange">
<labelclass="rowalignitemsbgwhitep-tb-25p-lr-20radius15m-t-20">
<viewclass="weui-cellhd">
<radiochecked="true"color="#1989f9"/>
</view>
<viewclass="f30weight500m-l-10">A、1111</view>
</label>
<labelclass="rowalignitemsbgwhitep-tb-25p-lr-20radius15m-t-20">
<viewclass="weui-cellhd">
<radiocolor="#1989f9"/>
</view>
<viewclass="f30weight500m-l-10">B、2222</view>
</label>
<labelclass="rowalignitemsbgwhitep-tb-25p-lr-20radius15m-t-20">
<viewclass="weui-cellhd">
<radiocolor="#1989f9"/>
</view>
<viewclass="f30weight500m-l-10">C、3333</view>
</label>
<labelclass="rowalignitemsbgwhitep-tb-25p-lr-20radius15m-t-20">
<viewclass="weui-cellhd">
<radiocolor="#1989f9"/>
</view>
<viewclass="f30weight500m-l-10">D、4444</view>
</label>
</radio-group>
</view>
</swiper-item>
<swiper-item>
<viewclass="m-lr-20">
<viewclass="rowp-t-30p-b-10">
<viewclass="radio_singelf22p-lr-10">单选</view>
<viewclass="m-l-20weight500f28">题目2</view>
</view>
<videosrc=""></video>
<radio-groupbindchange="radioChange">
<labelclass="rowalignitemsbgwhitep-tb-25p-lr-20radius15m-t-20">
<viewclass="weui-cellhd">
<radiochecked="true"color="#1989f9"/>
</view>
<viewclass="f30weight500m-l-10">A、1111</view>
</label>
<labelclass="rowalignitemsbgwhitep-tb-25p-lr-20radius15m-t-20">
<viewclass="weui-cellhd">
<radiocolor="#1989f9"/>
</view>
<viewclass="f30weight500m-l-10">B、2222</view>
</label>
<labelclass="rowalignitemsbgwhitep-tb-25p-lr-20radius15m-t-20">
<viewclass="weui-cellhd">
<radiocolor="#1989f9"/>
</view>
<viewclass="f30weight500m-l-10">C、3333</view>
</label>
<labelclass="rowalignitemsbgwhitep-tb-25p-lr-20radius15m-t-20">
<viewclass="weui-cellhd">
<radiocolor="#1989f9"/>
</view>
<viewclass="f30weight500m-l-10">D、4444</view>
</label>
</radio-group>
</view>
</swiper-item>
<swiper-item>
</swiper-item>
<swiper-item>
</swiper-item>
<swiper-item>
</swiper-item>
</swiper>
<viewclass="footerp-tb-25">
<viewclass="m-lr-30rowjust-btw">
<viewclass="rowalignitems"bindtap="prevClick">
<imagesrc="../../images/prev_icon.png"mode="aspectFit"></image>
<viewclass="f36weight500m-l-10">上一题</view>
</view>
<viewclass="jiaojuanbtnf30whitep-tb-20">交卷</view>
<viewclass="rowalignitems"bindtap="nextClick">
<viewclass="f36weight500m-r-10">下一题</view>
<imagesrc="../../images/next_icon.png"mode="aspectFit"></image>
</view>
</view>
</view>

css样式

.topic{
position:relative;
color:#000;
}
.topic::before{
position:absolute;
content:"";
width:80rpx;
height:6rpx;
background:#1989f9;
border-radius:20rpx;
bottom:0;
left:50%;
transform:translateX(-50%);
}
.radio_singel{
background:#e6f7ff;
border:1pxsolid#91d4fe;
color:#1890ff;
}
.footer{
position:fixed;
bottom:0;
background-color:#fff;
left:0;
right:0;
}

js 页面

data:{
currentData:0,
},
//获取当前滑块的index
bindchange(e){
constthat=this;
that.setData({
currentData:e.detail.current
})
},
//点击切换，滑块index赋值
checkCurrent(e){
constthat=this;
if(that.data.currentData===e.target.dataset.current){
returnfalse;
}else{
that.setData({
currentData:e.target.dataset.current
})
}
},
//上一题
prevClick(){
varcurrentData=this.data.currentData-1
if(currentData+1==0){
wx.showToast({
title:'这是第1题了',
})
}else{
this.setData({
currentData:currentData
})
}
},
//下一题
nextClick(){
this.setData({
currentData:this.data.currentData+1
})
},