具体内容如下

html 页面

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

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
        })
    },

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• node.js中间件类型有多少种？作用是什么？

  node.js中间件类型有多少种？node中间件就是封装在程序中处理http请求的功能，其类型包括应用级中间件、路由级中间件、内置中间件、第三方中间件、错误级中间件这几种，那么他们的作用分别是什么呢？接下来我们一起来了解一下。

• JavaScript中this指向问题怎样理解？如何改变this指向？

  今天我们来了解JavaScript中this指向的内容，下文会给大家介绍this的指向问题以及改变this指向的方法，对于学习和理解this的指向有一定的帮助，需要的朋友可以参考了解看看，接下来就跟随小编一起学习一下吧。

• 用JavaScript怎样写带动画效果的返回顶部

  JavaScript实现网页带动画返回顶部的方法详解 服务器由阿里云换到了腾讯云,我的代码之前一直都是托管在git上的,但是搬家的时候,可能是着急了,之前有些新加的文件没有托管到git上,所以,就丢了. 不过无所谓了,可以重新写嘛. 之前博客的回到顶部功能是请之前的一位前端的同事帮忙写的,这次打算自己尝试一下. 返回顶部无非就是锚点. 第一个版本: <body style="height:2000px;"> <div id="topAnchor"></div> <a ...

• JavaScript中的数组拍平是什么意思，如何进行数组拍平处理

  数组扁平化是指将一个多维数组变为一维数组,下面这篇文章主要给大家介绍了关于JavaScript面试之如何实现数组拍平（扁平化）方法的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下

• DOM是什么，JavaScript的DOM操作可以实现什么

  本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于DOM的相关问题，文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口，下面一起来看一下，希望对大家有帮助。