微信小程序实现tab页面切换效果

本文实例为大家分享了微信小程序实现tab页面切换的具体代码，供大家参考，具体内容如下

html 页面

    
        
            第1题
            第2题
            第3题
            第4题
            第5题
            第6题
        
    


    
        
            
                单选
                题目1
            
            
                
                
                    
                
                A、1111
                
                
                
                    
                
                B、2222
                
                
                
                    
                
                C、3333
                
                
                
                    
                
                D、4444
                
            
        
    
    
        
            
                单选
                题目2
            
            
            
                
                
                    
                
                A、1111
                
                
                
                    
                
                B、2222
                
                
                
                    
                
                C、3333
                
                
                
                    
                
                D、4444
                
            
        
    
    
    
    
    
    
    



    
        
            
            上一题
        
        交卷
        
            下一题
            
        
    

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 页面

data: {
        currentData:0,
    },
    //获取当前滑块的index
    bindchange(e){
        const that  = this;
        that.setData({
            currentData: e.detail.current
        })
    },
    //点击切换，滑块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
        })
    },

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。