微信小程序 多选功能

最新推荐文章于 2024-05-28 01:43:14 发布
最新推荐文章于 2024-05-28 01:43:14 发布
阅读量5.7k 收藏 12
点赞数
分类专栏： 微信小程序 文章标签： 小程序 答题 多选
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangguang1995/article/details/82688043
版权 

<!--hotblood_gongkao/pages/answer/answer.wxml-->
<!-- content -->
<view class='answer-list'>
    <view class='answer-child'>
        <text class='answer-title'><text style='margin-right:28rpx;'>{{num + 1}}/{{quesyion.length}}</text>{{question[num][0]}}</text>
        <view class='answer-options'>
            <view class="options {{selectIndex[0].sureid?'select':''}}" data-index='{{idx}}1' data-text='A' bindtap="{{whether?'':'selectAnswer'}}">
                <image class="dui {{selectIndex[0].sureid?'dui2':''}}" src='../../images/icon-dui.png' />
                <text><text style='margin-right:36rpx;'> A </text>{{question[num][1]}}</text>
            </view>
            <view class="options {{selectIndex[1].sureid?'select':''}}" data-index='{{idx}}2' data-text='B' bindtap="{{whether?'':'selectAnswer'}}">
                <image class="dui {{selectIndex[1].sureid?'dui2':''}}" src='../../images/icon-dui.png' />
                <text><text style='margin-right:36rpx;'> B </text>{{question[num][2]}}</text>
            </view>
            <view class="options {{selectIndex[2].sureid?'select':''}}" data-index='{{idx}}3' data-text='C' bindtap="{{whether?'':'selectAnswer'}}">
                <image class="dui {{selectIndex[2].sureid?'dui2':''}}" src='../../images/icon-dui.png' />
                <text><text style='margin-right:36rpx;'> C </text>{{question[num][3]}}</text>
            </view>
            <view class="options {{selectIndex[3].sureid?'select':''}}" data-index='{{idx}}4' data-text='D' bindtap="{{whether?'':'selectAnswer'}}">
                <image class="dui {{selectIndex[3].sureid?'dui2':''}}" src='../../images/icon-dui.png' />
                <text><text style='margin-right:36rpx;'> D </text>{{question[num][4]}}</text>
            </view>
        </view>
    </view>
    <view class="answer {{isWan?'isShow':'isHide'}}">
        <text>正确答案{{question[num][3]}}</text>
    </view>
    <view class="subBtn {{isque?'isShow':'isHide'}}" bindtap='confirm'>
        <text>确定</text>
    </view>
    <view class="subBtn {{isOne?'isHide':'isShow'}}" bindtap='next'>
        <text>{{con}}</text>
    </view>
    <view class="subBtn {{iswancheng?'isShow':'isHide'}}" bindtap='submit'>
        <text>提交答卷</text>
    </view>
</view>


/* hotblood_gongkao/pages/answer/answer.wxss */

/* title */
.titleImg{
    width: 734rpx;
    height: 45rpx;
    position: fixed;
    top: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    left: 50%;
    background: #fbfbfb;
    margin-left: -367rpx;
    z-index: 10;
}
.titleImg image{
    height: 35rpx;
    width: 100%;
}
/* end */
page{
    height: 100%;
    width: 100%;
    background: #fbfbfb;
}
.isHide{
    display: none;
}
.isShow{
    display: block;
}
.title{
    font-size: 34rpx;
    color: #a6a6a6;
    margin: 69rpx 0 0 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.answer-list{

}
.answer-child{
    width: 672rpx;
    margin: 0 auto;
    background: #fff;
    border-radius: 20rpx;
    padding-top:34rpx; 
    margin-bottom: 20rpx;
    margin-top: 72rpx;
    box-sizing: border-box;
    box-shadow: 0 0 4rpx #dcdcdc;
}
.answer-title{
    font-size: 32rpx;
    margin: 0 0 0 52rpx;
}
.answer-options{
    display: flex;
    flex-direction: column;
    width: 642rpx;
    margin: 32rpx auto 0 auto;
}
.options{
    width: 100%;
    height: 72rpx;
    line-height: 72rpx;
    font-size: 32rpx;
    padding-left: 30rpx;
    box-sizing: border-box;
    margin-bottom: 4rpx;
    position: relative;
    border: 2rpx solid #fff;

}
.dui{
    position: absolute;
    height: 41rpx;
    width: 59rpx;
    top:50%;
    margin-top: -20rpx;
    right: 16rpx;
    display: none;
}
.dui2{
    display: block!important;
}
.select{
    border: 2rpx solid #4ab07e;
    box-sizing: border-box;
    
}
.submit{
    height: 120rpx;
    width: 100%;
    background: #4ab07e;
    color: #fff;
    font-size: 34rpx;
    line-height: 120rpx;
    text-align: center;
    position: fixed;
    left: 0;
    bottom: 0;
}
/* 正确答案 */
.answer{
    width: 100%;
    text-align: center;
    color: #ff122f;
    font-size: 34rpx;
    font-weight: bold;
    margin-top: 64rpx;
}

/* end */
/* 下一题 */
.subBtn{
    width: 304rpx;
    height: 86rpx;
    background: #4ab07e;
    color: #fff;
    font-size: 34rpx;
    text-align: center;
    line-height: 86rpx;
    border-radius: 20rpx;
    margin: 190rpx auto 0 auto;
}

// hotblood_gongkao/pages/answer/answer.js
const app = getApp();
Page({

    /**
     * 页面的初始数据
     */
    data: {
        question: [
            ["今天是个好日子", "halou word", "java", "javascript", 'c#'],
            ["今天是个好日子", "halou word", "java", "javascript", 'c#'],
        ], //题库
        index: 0, //选择的索引
        wrong: [], //错误
        border: '',
        num: 0,
        con: '下一题',
        isOne: true,
        isWan: false,
        iswancheng: false,
        isque: false,
        whether: false,
        correct: [], //正确
        duiList: 0, //答对的个数
        cuoList: 0, //答错的个数
        selectIndex: [{
                sureid: false
            },
            {
                sureid: false
            },
            {
                sureid: false
            },
            {
                sureid: false
            },
        ],
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function(options) {
        this.setData({

        })
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function() {

    },
    // 提交答卷
    submit: function(e) {
        console.log(this.data.duiList);
        console.log(this.data.cuoList);
        var num = this.data.num; //当前题目下标
        var question = this.data.question; //题库
        var duiList = this.data.duiList; //答对多少题
        var cuoList = this.data.cuoList; //答错多少题
        //获得题目对象的长度
        var arr = Object.keys(question);
        var len = arr.length;
        if ((num + 1) == len) {
            var grade = (100 / len) * duiList;
            console.log(grade);
            wx.redirectTo({
                url: '../chengjiu/chengjiu?grade=' + grade,
            })
        }
    },
    // 确认选择
    confirm: function() {
        var num = this.data.num;
        var question = this.data.question; //题库
        //获得题目对象的长度
        var arr = Object.keys(question);
        var len = arr.length;
        if ((num + 1) == len) {
            this.setData({
                iswancheng: true,
                isOne: true,
                isWan: true,
                isque: false
            })
        } else {
            this.setData({
                isOne: false,
                whether: true,
                isque: false,
                isWan: true
            })
        }

    },
    // 下一题
    next: function() {
        var num = this.data.num; //当前题目下标
        this.setData({
            num: num + 1,
            isOne: true,
            isWan: false,
            whether: false,
            index: 0
        })
    },
    // 选择答案
    selectAnswer: function(e) {
        console.log(e);
        var index1 = e.currentTarget.dataset.index - 1; //当前点击元素的自定义数据，这个很关键
        var selectIndex = this.data.selectIndex; //取到data里的selectIndex
        selectIndex[index1].sureid = !selectIndex[index1].sureid; //点击就赋相反的值
        console.log(selectIndex[index1])
        this.setData({
            selectIndex: selectIndex //将已改变属性的json数组更新
        })
        console.log(this.data.selectIndex.in_array(true))
        if (selectIndex.in_array(true) == false) {
            this.setData({
                isque: false
            })
        } else {
            var question = this.data.question; //题库
            var num = this.data.num; //当前题目下标
            var text = e.currentTarget.dataset.text; //选择的答案
            var duiList = this.data.duiList; //答对多少题
            var cuoList = this.data.cuoList; //答错多少题

            //获得题目对象的长度
            var arr = Object.keys(question);
            var len = arr.length;
            //当前答题为最后一题
            if ((num + 1) == len) {
                //判断选择的答案和正确答案是否一致
                if (text == question[num][3]) {
                    duiList = duiList + 1;
                    this.setData({
                        duiList: duiList,
                        isque: true
                    })
                } else {
                    cuoList = cuoList + 1;
                    this.setData({
                        cuoList: cuoList,
                        isque: true
                    })
                }
            } else {
                //判断选择的答案和正确答案是否一致
                if (text == question[num][3]) {
                    duiList = duiList + 1;
                    this.setData({
                        duiList: duiList,
                        isque: true
                    })
                } else {
                    cuoList = cuoList + 1;
                    this.setData({
                        cuoList: cuoList,
                        isque: true
                    })
                }
            }
        }


    },
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function() {
        this.question();
    },
    
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function() {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function() {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function() {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function() {

    }
})
Array.prototype.in_array = function(element) {
    for (var i = 0; i < this.length; i++) {
        if (this[i].sureid == element) {
            return true;
        }
    }
    return false;
}

 

进阶的码农
关注
  • 0
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
微信小程序如何自定义单选和多选
tl437002770的博客
01-24 1020
微信小程序如何自定义单选和多选
微信小程序实现多选功能
10-17
在微信小程序中实现多选功能是一项常见的需求，尤其在创建互动性强、用户参与度高的应用时。本教程将深入探讨如何在微信小程序中实现在答题或问卷类应用中添加多选题的功能。 首先，我们需要了解微信小程序的基础...
微信小程序多选组件
weixin_43383840的博客
03-12 362
主要实现通过**Js+wxml+wxss+vant**实现点击一组复选框，动态添加1个或者多个input输入框，输入框中自动填充所选复选框的内容, 并且可以实现选中的颜色变化，输入长度可以根据内容的长度自定义显示全部，可以在wxml循环中限制input个数。
微信小程序封装vant 下拉框select 多选组件_微信小程序下拉框
最新发布
2401_85124866的博客
05-28 252
本组件主要由小程序vant ui组件，
微信小程序多选组件封装
Wangyuan_wo的博客
10-10 1025
微信小程序多选组件封装
微信小程序多选，全选
LiXiao_Lan的博客
10-08 439
微信小程序多选，全选。
微信小程序 多选————四选二
Faaaaaaq的博客
08-03 442
微信小程序 多选————四选二。
微信小程序checkbox多选
曲小强
02-04 2048
【代码】微信小程序checkbox多选。
uniapp-微信小程序 实现多选功能
qq_47255575的博客
12-29 905
uniapp-微信小程序 实现多选功能
微信小程序单选多选
静如雪的博客
03-22 874
data riderCommentList: [{ value: '安全', selected: false, title: '安全', field: 'topic6' }, { value: '颜值', selected: false, title: '颜值', field: 'topic3' }, { value: '功能', selected: fals.
微信小程序多选标签的实现（单选或者多选）
aaa123aaasqw的博客
01-04 984
暑假留在社团跟别人一起开发一个校园小程序，如今也基本快开发完成了，整理一下日后可能用到的小组件。类似于上图，下方的待选项为一个组件，根据父组件传入传入的参数决定是否为多选。父组件的HTML代码如下。接下来是CSS样式。
微信小程序实现多选删除列表数据功能示例
10-17
在微信小程序中，实现多选删除列表数据功能是一项常见的需求，尤其适用于需要用户进行批量操作的场景，如管理错题本、购物车等。以下将详细介绍如何在微信小程序中实现这一功能。 首先，我们需要创建一个包含列表...
微信小程序select下拉框实现
10-16
在微信小程序中，由于没有H5中的`<select>`标签，因此实现下拉框功能需要开发者自定义组件。本文将详细介绍如何在微信小程序中创建一个类似下拉框的效果。 首先，我们来看一下HTML部分的代码。在这个例子中，下拉框...
微信小程序select下拉框实现效果
11-26
这个实例展示了如何通过微信小程序的自定义组件和事件处理机制，实现类似HTML下拉框的功能，对于微信小程序开发者来说是非常实用的技巧。在实际开发中，可以根据需求进一步扩展，如增加多级选择、搜索功能等。
微信小程序解决 加载图片出现渲染层网络层错误
热门推荐
王光
05-10 7万+
在我们加载图片的时候往往会出现一些小问题，例如：明明图片加载成功了，但是控制台还是会报 渲染层网络层错误，找了很多地方，也发现不出来问题。 出现这种情况的原因在于，页面显示加载的时候image里面的值是空的，从后台拿值是需要一定的额时间的，在这个时间内image的src是空的，所以报错。解决方法也很简单 加一个wx:if="{{arr.length&gt;0}}" 想要获得更多资料的 ...
微信小程序获取input输入框里面的value值
王光
04-09 5万+
相信有很多刚进入小程序这一行的时候会遇到很多的坑，其中有一个就是怎么都获取不到input输入框里面的内容，今天来再说一下这个value如何获取到。 小程序input组件上有一个方法上有一个方法叫做bindinput 现在来给大家看一下具体的用法 ： wxml： &lt;view class='regPhone'&gt; &lt;image src='../../image...
分享几个微信小程序的视频教程
王光
04-03 4万+
最近微信小程序的发展势头很火，各大公司开始重视这一块，很多新手看文档可能觉得不是特别容易理解（包括我），所以闲来无事整理了几个小程序的视频教程分享给大家，如果链接失效了可以给我留言。 极客学院小程序视频教程： 链接：https://pan.baidu.com/s/15Ysexba8D5HypvLXcphyPg 密码：levy 小程序项目实战： 链接：https://pan.baidu.co...
微信小程序获取手机验证码
王光
04-26 4万+
一种比较常见的功能获取手机验证码 先看效果图： 其实这个功能实现起来很简单，主要就是调取第三方接口，拿到返回值验证的问题 直接上代码吧： &lt;view class='changeInfo'&gt; &lt;view class='changeInfoName'&gt; &lt;input placeholder='请输入姓名' bindinput='getNameV...
微信小程序列表多选功能组件 可搜索
05-10
微信小程序中有一个官方提供的组件是"checkbox-group"，可以实现多选功能。可以通过设置"bindchange"属性来监听选中状态的改变。另外，如果需要实现搜索功能，可以使用小程序提供的"input"组件和"wx:if"属性结合使用，根据输入的关键词动态展示对应的选项。具体实现可以参考微信小程序官方文档。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值