微信小程序单选框组应用详解

 更新时间:2022年07月19日 09:45:38   作者:不大好不大好  
这篇文章主要为大家详细介绍了微信小程序单选框组应用,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了微信小程序单选框组应用的具体代码,供大家参考,具体内容如下

需求概述

有一个核选项数组,里面存放着核选项名称、内容、ID、选择状态。选择状态有未选择、符合、不符合三种,默认全部为未选择。通过wx:for将数组渲染到页面,每个核选项都有两个单选按钮,分别是符合和不符合按钮,点击对应按钮会将改变对应那条元素中的选择状态的值,且点击不符合时,会显示出一个文本域,让用户输入不符合原因。

页面最下面有一个提交按钮,点击时会遍历核选项数组,若有选择状态为未选择的项,则无法提交,并提醒。

效果图如下

直接上代码

wxml文件

<block wx:for="{{SmallItem}}" wx:key="itemID">
    <view class="SmallItemView">
        <view class="infoView">
            <!-- 核选项的基本信息,例如名称、内容 -->
            <view class="SmallItemName">
                <label for="">核选项名称:</label>
                <text>{{item.itemName}}</text>
            </view>
            <view class="SmallItemContent" >
                <label for="">核选项内容:</label>
                {{item.itemContent}}
            </view>
        </view>
        <view class="reasonView" hidden="{{item.AccordWith=='不符合'?false:true}}">
            <!-- 不符合的时候显示的文本域 -->
            <textarea placeholder="请输入不符合原因" 
                      maxlength="-1" 
                      bindblur="inputChange"
                      data-index="{{index}}">
            </textarea>
        </view>
        <view class="counterView">
            第{{index+1}}项/共{{SmallItem.length}}项
        </view>
        <view class="radioView">
            <!-- 核选项的单选框 -->
            <radio-group bindchange="radioChange" data-index="{{index}}">
                <radio value="符合">符合</radio>  <!--前面有两个中文全角空格-->
                <radio value="不符合">不符合</radio>
            </radio-group>
        </view>
    </view>
</block>
<button type="default" class="SubmitBtn" bind:tap="HXXSubmit">提交</button>

wxss文件

.SmallItemView {
    background-color: rgba(169, 169, 169, 0.329);
    padding: 5px;
    margin: 3px;
    border-radius: 3px;
    margin-bottom: 10px;
    /* box-shadow: 0px 2px 4px 2px #120f0f5c; */
}

.infoView {
    margin-bottom: 5px;
}

.SmallItemName {
    /* 核选项名称view */
    background-color: white;
    margin-bottom: 2px;
    border-radius: 3px;
    padding: 2px;
}

.SmallItemName>label {
    display: block;
    font-weight: bold;
}

.SmallItemContent {
    /* 核选项内容 */
    background-color: white;
    margin-bottom: 2px;
    border-radius: 3px;
    padding: 2px;
}

.SmallItemContent>label {
    display: block;
    font-weight: bold;
}

.reasonView {
    /*不符合原因文本域样式*/
    background-color: white;
    padding: 2px;
    border-radius: 3px;
    margin-bottom: 3px;
}

.radioView {                                                              
    text-align: center;
}

.counterView {
    text-align: center;
    font-size: x-small;
    background-color: white;
    margin-bottom: 5px;
}

.SubmitBtn {
    /* 提交按钮样式 */
    width: 90% !important;
    margin: 5px 10px;
}

js文件

// pages/RadioDemo/RadioDemo.js
Page({
    data: {
        SmallItem: [
            { itemID: "1", itemName: "核选项1", itemType: "核选项", itemContent: "核选项内容1", AccordWith: "未选", textareaContent: "" },
            { itemID: "2", itemName: "核选项2", itemType: "核选项", itemContent: "核选项内容2", AccordWith: "未选", textareaContent: "" },
            { itemID: "3", itemName: "核选项3", itemType: "核选项", itemContent: "核选项内容3", AccordWith: "未选", textareaContent: "" },
            { itemID: "4", itemName: "核选项4", itemType: "核选项", itemContent: "核选项内容4", AccordWith: "未选", textareaContent: "" },
            { itemID: "5", itemName: "核选项5", itemType: "核选项", itemContent: "核选项内容5", AccordWith: "未选", textareaContent: "" },
            { itemID: "6", itemName: "核选项6", itemType: "核选项", itemContent: "核选项内容6", AccordWith: "未选", textareaContent: "" }
        ]
    },
    radioChange: function(e) {
        // console.log("radio的值为:" + e.detail.value); //获取radio的值
        // console.log("元素下标为:" + e.currentTarget.dataset.index); //获取元素在数组中的下标
        let ValRadio = e.detail.value;
        let EleIndex = e.currentTarget.dataset.index;
        let key = 'SmallItem[' + EleIndex + '].AccordWith';
        //更改数组SmallItem[EleIndex]中AccordWith的值
        this.setData({
            [key]: ValRadio
        });
        // console.log("SmallItem数组改变后", this.data.SmallItem);
    },
    HXXSubmit: function(e) {
        //点击提交按钮,会获取data中的数组SmallItem,并且遍历其中的AccordWith属性的值
        //若有AccordWith的值为“未选”,则弹出提示框,且事件执行结束
        //否则将数组传回后台,进行保存

        let arSmallItem = this.data.SmallItem; //获取data中的数组SmallItem
        for (let i = 0; i < arSmallItem.length; i++) {
            //遍历数组
            if (arSmallItem[i].AccordWith == "未选") {
                // console.log(arSmallItem[i].itemName + "未进行选择,请选择后提交");
                wx.showToast({
                    title: '第' + (i + 1) + '项未进行核选\n请核选后提交',
                    icon: 'none',
                    duration: 2000
                })
                return;
            }
        }
        console.log("所有核选项已选择");
        //程序能执行到这里,说明所有核选项都已经进行了选择,可以进行数据保存操作
        // var reqTask = wx.request({
        //     url: '',
        //     data: {},
        //     header: { 'content-type': 'application/json' },
        //     method: 'GET',
        //     dataType: 'json',
        //     responseType: 'text',
        //     success: (result) => {

        //     },
        //     fail: () => {},
        //     complete: () => {}
        // });
    },
    inputChange: function(e) {
        // console.log(e);
        let index = e.currentTarget.dataset.index; //获取元素在数组中的下标
        let content = e.detail.value; //获取在文本域中输入的值
        let key = 'SmallItem[' + index + '].textareaContent';
        this.setData({
            [key]: content
        });
        console.log("SmallItem数组改变后", this.data.SmallItem);
    }
})

当存在核选项未进行选择时,点击保存,弹窗提醒效果图

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

相关文章

  • javascript动态获取登录时间和在线时长

    javascript动态获取登录时间和在线时长

    这篇文章主要为大家详细介绍了javascript动态获取登录时间和在线时长的相关资料,获得登录时候的时间,用来和动态的时间做差来求时长,感兴趣的小伙伴们可以参考一下
    2016-02-02
  • 微信小程序官方动态自定义底部tabBar的例子

    微信小程序官方动态自定义底部tabBar的例子

    这篇文章主要介绍了微信小程序官方动态自定义底部tabBar的例子,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-09-09
  • JavaScript中变量提升和函数提升的详解

    JavaScript中变量提升和函数提升的详解

    这篇文章主要介绍了JavaScript中变量提升和函数提升的详解,文章通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-08-08
  • JS重写Date函数以及兼容IOS系统

    JS重写Date函数以及兼容IOS系统

    这篇文章主要介绍了JS重写Date函数以及兼容IOS系统,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • 微信小程序新手教程之启动页的重要性

    微信小程序新手教程之启动页的重要性

    这篇文章主要给大家介绍了关于微信小程序新手教程之启动页重要性的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-03-03
  • 解读input标签的value属性及name属性

    解读input标签的value属性及name属性

    这篇文章主要介绍了解读input标签的value属性,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • 加载 Javascript 最佳实践

    加载 Javascript 最佳实践

    相信很多与页面打过交道的同学都对 Yahoo 的 Best Practices for Speeding Up Your Web Site 不陌生
    2011-10-10
  • JavaScript创建对象的七种方式(推荐)

    JavaScript创建对象的七种方式(推荐)

    JavaScript创建对象的方式有很多,通过Object构造函数或对象字面量的方式也可以创建单个对象,显然这两种方式会产生大量的重复代码,并不适合量产。接下来介绍七种非常经典的创建对象的方式,他们也各有优缺点
    2017-06-06
  • 全面解析Bootstrap布局组件应用

    全面解析Bootstrap布局组件应用

    这篇文章主要为大家全面解析Bootstrap布局组件应用,几乎对所有Bootstrap布局组件示例进行了解析,感兴趣的小伙伴们可以参考一下
    2016-02-02
  • 纯js实现动态时间显示

    纯js实现动态时间显示

    这篇文章主要为大家详细介绍了纯js实现动态时间显示,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06

最新评论