微信小程序?qū)崿F(xiàn)tab頁(yè)面切換效果
更新時(shí)間：2022年08月24日 16:37:01 作者：小Zzzzzzz菇?jīng)?
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)tab頁(yè)面切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)tab頁(yè)面切換的具體代碼，供大家參考，具體內(nèi)容如下
html 頁(yè)面
<view class="bgwhite">
? ? <scroll-view scroll-x="true">
? ? ? ? <view class="width100 row nowrap">
? ? ? ? ? ? <view class="f32 c666 p-tb-20 p-lr-30 {{currentData == 0 ? 'topic' : ''}}" data-current="0" bindtap='checkCurrent'>第1題</view>
? ? ? ? ? ? <view class="f32 c666 p-tb-20 p-lr-30 {{currentData == 1 ? 'topic' : ''}}" data-current="1" bindtap='checkCurrent'>第2題</view>
? ? ? ? ? ? <view class="f32 c666 p-tb-20 p-lr-30 {{currentData == 2 ? 'topic' : ''}}" data-current="2" bindtap='checkCurrent'>第3題</view>
? ? ? ? ? ? <view class="f32 c666 p-tb-20 p-lr-30 {{currentData == 3 ? 'topic' : ''}}" data-current="3" bindtap='checkCurrent'>第4題</view>
? ? ? ? ? ? <view class="f32 c666 p-tb-20 p-lr-30 {{currentData == 4 ? 'topic' : ''}}" data-current="4" bindtap='checkCurrent'>第5題</view>
? ? ? ? ? ? <view class="f32 c666 p-tb-20 p-lr-30 {{currentData == 5 ? 'topic' : ''}}" data-current="5" bindtap='checkCurrent'>第6題</view>
? ? ? ? </view>
? ? </scroll-view>
</view>
<swiper current="{{currentData}}" class='width100' style="height:600px;" duration="300" bindchange="bindchange">
? ? <swiper-item>
? ? ? ? <view class="m-lr-20">
? ? ? ? ? ? <view class="row p-t-30 p-b-10">
? ? ? ? ? ? ? ? <view class="radio_singel f22 p-lr-10">單選</view>
? ? ? ? ? ? ? ? <view class="m-l-20 weight500 f28">題目1</view>
? ? ? ? ? ? </view>
? ? ? ? ? ? <radio-group bindchange="radioChange">
? ? ? ? ? ? ? ? <label class="row alignitems bgwhite p-tb-25 p-lr-20 radius15 m-t-20">
? ? ? ? ? ? ? ? <view class="weui-cell__hd">
? ? ? ? ? ? ? ? ? ? <radio checked="true" color="#1989f9"/>
? ? ? ? ? ? ? ? </view>
? ? ? ? ? ? ? ? <view class="f30 weight500 m-l-10">A、1111</view>
? ? ? ? ? ? ? ? </label>
? ? ? ? ? ? ? ? <label class="row alignitems bgwhite p-tb-25 p-lr-20 radius15 m-t-20">
? ? ? ? ? ? ? ? <view class="weui-cell__hd">
? ? ? ? ? ? ? ? ? ? <radio color="#1989f9"/>
? ? ? ? ? ? ? ? </view>
? ? ? ? ? ? ? ? <view class="f30 weight500 m-l-10">B、2222</view>
? ? ? ? ? ? ? ? </label>
? ? ? ? ? ? ? ? <label class="row alignitems bgwhite p-tb-25 p-lr-20 radius15 m-t-20">
? ? ? ? ? ? ? ? <view class="weui-cell__hd">
? ? ? ? ? ? ? ? ? ? <radio color="#1989f9"/>
? ? ? ? ? ? ? ? </view>
? ? ? ? ? ? ? ? <view class="f30 weight500 m-l-10">C、3333</view>
? ? ? ? ? ? ? ? </label>
? ? ? ? ? ? ? ? <label class="row alignitems bgwhite p-tb-25 p-lr-20 radius15 m-t-20">
? ? ? ? ? ? ? ? <view class="weui-cell__hd">
? ? ? ? ? ? ? ? ? ? <radio color="#1989f9"/>
? ? ? ? ? ? ? ? </view>
? ? ? ? ? ? ? ? <view class="f30 weight500 m-l-10">D、4444</view>
? ? ? ? ? ? ? ? </label>
? ? ? ? ? ? </radio-group>
? ? ? ? </view>
? ? </swiper-item>
? ? <swiper-item>
? ? ? ? <view class="m-lr-20">
? ? ? ? ? ? <view class="row p-t-30 p-b-10">
? ? ? ? ? ? ? ? <view class="radio_singel f22 p-lr-10">單選</view>
? ? ? ? ? ? ? ? <view class="m-l-20 weight500 f28">題目2</view>
? ? ? ? ? ? </view>
? ? ? ? ? ? <video src="" style="width:100%;"></video>
? ? ? ? ? ? <radio-group bindchange="radioChange">
? ? ? ? ? ? ? ? <label class="row alignitems bgwhite p-tb-25 p-lr-20 radius15 m-t-20">
? ? ? ? ? ? ? ? <view class="weui-cell__hd">
? ? ? ? ? ? ? ? ? ? <radio checked="true" color="#1989f9"/>
? ? ? ? ? ? ? ? </view>
? ? ? ? ? ? ? ? <view class="f30 weight500 m-l-10">A、1111</view>
? ? ? ? ? ? ? ? </label>
? ? ? ? ? ? ? ? <label class="row alignitems bgwhite p-tb-25 p-lr-20 radius15 m-t-20">
? ? ? ? ? ? ? ? <view class="weui-cell__hd">
? ? ? ? ? ? ? ? ? ? <radio color="#1989f9"/>
? ? ? ? ? ? ? ? </view>
? ? ? ? ? ? ? ? <view class="f30 weight500 m-l-10">B、2222</view>
? ? ? ? ? ? ? ? </label>
? ? ? ? ? ? ? ? <label class="row alignitems bgwhite p-tb-25 p-lr-20 radius15 m-t-20">
? ? ? ? ? ? ? ? <view class="weui-cell__hd">
? ? ? ? ? ? ? ? ? ? <radio color="#1989f9"/>
? ? ? ? ? ? ? ? </view>
? ? ? ? ? ? ? ? <view class="f30 weight500 m-l-10">C、3333</view>
? ? ? ? ? ? ? ? </label>
? ? ? ? ? ? ? ? <label class="row alignitems bgwhite p-tb-25 p-lr-20 radius15 m-t-20">
? ? ? ? ? ? ? ? <view class="weui-cell__hd">
? ? ? ? ? ? ? ? ? ? <radio color="#1989f9"/>
? ? ? ? ? ? ? ? </view>
? ? ? ? ? ? ? ? <view class="f30 weight500 m-l-10">D、4444</view>
? ? ? ? ? ? ? ? </label>
? ? ? ? ? ? </radio-group>
? ? ? ? </view>
? ? </swiper-item>
? ? <swiper-item>
? ? </swiper-item>
? ? <swiper-item>
? ? </swiper-item>
? ? <swiper-item>
? ? </swiper-item>
</swiper>
<view class="footer p-tb-25">
? ? <view class="m-lr-30 row just-btw">
? ? ? ? <view class="row alignitems" bindtap="prevClick">
? ? ? ? ? ? <image src="../../images/prev_icon.png" mode="aspectFit" style="width:48rpx;height:42rpx;"></image>
? ? ? ? ? ? <view class="f36 weight500 m-l-10">上一題</view>
? ? ? ? </view>
? ? ? ? <view class="jiaojuanbtn f30 white p-tb-20">交卷</view>
? ? ? ? <view class="row alignitems" bindtap="nextClick">
? ? ? ? ? ? <view class="f36 weight500 m-r-10">下一題</view>
? ? ? ? ? ? <image src="../../images/next_icon.png" mode="aspectFit" style="width:48rpx;height:42rpx;"></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:1px solid #91d4fe;
? ? color:#1890ff;
}
.footer{
? ? position: fixed;
? ? bottom: 0;
? ? background-color: #fff;
? ? left:0;
? ? right:0;
}js 頁(yè)面
data: {
? ? ? ? currentData:0,
? ? },
?? ?//獲取當(dāng)前滑塊的index
? ? bindchange(e){
? ? ? ? const that ?= this;
? ? ? ? that.setData({
? ? ? ? ? ? currentData: e.detail.current
? ? ? ? })
? ? },
? ? //點(diǎn)擊切換，滑塊index賦值
? ? checkCurrent(e){
? ? ? ? const that = this;
? ? ? ? if (that.data.currentData === e.target.dataset.current){
? ? ? ? ? ? return false;
? ? ? ? }else{
? ? ? ? ? ? that.setData({
? ? ? ? ? ? ? ? currentData: e.target.dataset.current
? ? ? ? ? ? })
? ? ? ? }
? ? },
? ? //上一題
? ? prevClick(){
? ? ? ? var currentData = 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
? ? ? ? })
? ? },以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 微信小程序開(kāi)發(fā)之實(shí)現(xiàn)選項(xiàng)卡(窗口頂部TabBar)頁(yè)面切換
- 微信小程序?qū)崿F(xiàn)tab左右切換效果
- 微信小程序 Tab頁(yè)切換更新數(shù)據(jù)
- 微信小程序 swiper制作tab切換實(shí)現(xiàn)附源碼
- 微信小程序開(kāi)發(fā)之選項(xiàng)卡(窗口底部TabBar)頁(yè)面切換
- 微信小程序?qū)崿F(xiàn)tab切換效果
- 微信小程序滾動(dòng)Tab實(shí)現(xiàn)左右可滑動(dòng)切換
- 微信小程序?qū)崿F(xiàn)tab和swiper切換結(jié)合效果
- 微信小程序?qū)崿F(xiàn)tab頁(yè)面切換功能
- 微信小程序開(kāi)發(fā)實(shí)現(xiàn)的選項(xiàng)卡(窗口頂部/底部TabBar)頁(yè)面切換功能圖文詳解
相關(guān)文章
詳解JavaScript中的數(shù)據(jù)類(lèi)型轉(zhuǎn)換
在JavaScript中，數(shù)據(jù)類(lèi)型的轉(zhuǎn)換是一項(xiàng)常見(jiàn)的任務(wù)，不同的數(shù)據(jù)類(lèi)型之間需要相互轉(zhuǎn)換以滿足程序的需求，本篇博客將深入探討JavaScript中的數(shù)據(jù)類(lèi)型轉(zhuǎn)換，包括隱式轉(zhuǎn)換和顯式轉(zhuǎn)換的概念、轉(zhuǎn)換規(guī)則和常見(jiàn)的數(shù)據(jù)類(lèi)型轉(zhuǎn)換示例2023-06-06
基于jsbarcode 生成條形碼并將生成的條碼保存至本地+源碼
這篇文章主要介紹了基于jsbarcode 生成條形碼并將生成的條碼保存至本地，本文給大家提供最新源代碼，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2020-04-04
JS檢測(cè)頁(yè)面中哪個(gè)HTML標(biāo)簽觸發(fā)點(diǎn)擊事件的方法
這篇文章主要介紹了JS檢測(cè)頁(yè)面中哪個(gè)HTML標(biāo)簽觸發(fā)點(diǎn)擊事件的方法,涉及javascript頁(yè)面元素事件響應(yīng)機(jī)制,需要的朋友可以參考下2016-06-06
.net JS模擬Repeater控件的實(shí)現(xiàn)代碼
一個(gè)模板控件規(guī)定了它的模板語(yǔ)法和js api，這是一個(gè)repeater控件的JS實(shí)現(xiàn):2013-06-06
本篇文章主要介紹了RequireJS按需加載樣式文件，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04
js中onclick和addEventListener的區(qū)別詳解
這篇文章深入探討了JavaScript中處理事件的兩種不同方法,即熟悉的onclick和多功能的addEventListener方法，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-08-08
這篇文章主要介紹了JavaScript格式化json和xml的方法,結(jié)合實(shí)例形式分析了javascript格式化json及格式化xml數(shù)據(jù)的具體操作技巧,需要的朋友可以參考下2019-01-01
如何在CocosCreator里畫(huà)個(gè)炫酷的雷達(dá)圖
這篇文章主要介紹了如何在CocosCreator里畫(huà)個(gè)炫酷的雷達(dá)圖，對(duì)Graphics感興趣的同學(xué)，一定要看看，并且把代碼實(shí)踐一下2021-04-04
JavaScript檢測(cè)彈出窗口是否已經(jīng)關(guān)閉的方法
這篇文章主要介紹了JavaScript檢測(cè)彈出窗口是否已經(jīng)關(guān)閉的方法,涉及javascript中window屬性的closed屬性的使用技巧,需要的朋友可以參考下2015-03-03
兩種方法實(shí)現(xiàn)在HTML頁(yè)面加載完畢后運(yùn)行某個(gè)js
這篇文章主要介紹了通過(guò)兩種方法實(shí)現(xiàn)在HTML頁(yè)面加載完畢后運(yùn)行某個(gè)js,需要的朋友可以參考下2014-06-06