微信小程序 radio-group（排列） 及事件绑定、点击切换样式

最新推荐文章于 2024-06-13 14:49:15 发布
最新推荐文章于 2024-06-13 14:49:15 发布
阅读量3.2w 收藏 21
点赞数 5
文章标签： 微信小程序 radio-group
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yingtian648/article/details/80181390
版权

一、这里的测试页面是参照（小打卡的-tab页“发现”）来设计的
wxml代码：

<import src='../userlist/listItem.wxml' />
<!--导入列表项模板-->

<view class='window'>
   <view class='searchbox' bindtap='search'>
      <view class='searchbox_in'>
         <icon class='search_img' type='search' size='13'></icon>
         <text class='search_txt'>搜索</text>
      </view>
   </view>
   <scroll-view>
      <view class='rg_view'>
         <radio-group class='rg' bindchange='radiochange'><!-- 事件绑定 -->
            <view class="class_r_g" wx:for="{{classes_array}}">
               <radio id="{{item.name}}" hidden value="{{item.name}}" checked="{{item.checked}}" data-id='item.index'></radio>           
               <label class="label-2__text" for="{{item.name}}">
                  <text class='{{item.checked?"checkedt":"normalt"}}'>{{item.name}}</text><!-- 根据每一项的checked属性来切换点击radio中的文本的点击效果 -->
               </label>
            </view>
         </radio-group>
      </view>

      <!-- 引入列表模板 -->
      <view wx:for="{{arrays}}">
         <template is="list" data="{{id:index,path:item.path,title:item.title,content:item.content,slogan:item.slogan}}" />
      </view>
   </scroll-view>
</view>

模板wxml代码：

<template name='list'>
   <view style="display:flex;flex-direction:row;margin-top:5px;background-color:#ffffff" 
      bindtap='readDetail' data-id='{{id}}'>
      <image style="width:40%;height:80px;margin-left:5px;margin-right:5px" src='{{path}}' mode='widthFix'/>
      <view style="display:flex;flex-direction:column;margin-left:10px;justify-content: space-between;padding:3px 0px 3px 0px">
         <text style='font-size:16px'>{{title}}</text>
         <text style='font-size:15px;padding:2px 2px;color:red;border:1px solid red'>{{slogan}}</text>
         <text style='font-size:16px'>{{content}}</text> 
      </view>
   </view>
</template>

wxss代码：（其实在这里已经有了点击切换样式了）

/* pages/find/find.wxss */

page {
   width: 100%;
   height: 100%;
}

.window {
   width: 100%;
   height: 100%;
}

.searchbox {
   width: 100%;
   display: flex;
   flex-direction: row;
   justify-content: center;
   background-color: #f6f6f6;
}

.searchbox_in {
   height: 35px;
   width: 720rpx;
   margin: 8px 10px;
   background-color: white;
   border-radius: 8px;
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
}

.search_img {
   width: 12px;
   height: 13px;
}

.search_txt {
   margin-left: 6px;
   font-size: 13px;
   color: #999;
}

.classesbox {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
}

.classes_item {
   padding: 3px auto 3px auto;
   border: #e6e6e6 1px solid;
   margin: 5px;
   border-radius: 4px;
   font-size: 14px;
   width: 100%;
}

.rg_view {
   padding: 6px;
   background-color: #fff;
}

/* 注意点：使用columns时，每一行中的组件本身的高度不能高于组件所在行的行高，
否则会发现组件的好似被切割成2块或多块了  */
.rg {
   width: 100%;
   height: 100%;
   columns: 4;
   column-gap: 20rpx;
   letter-spacing: 5px;
   line-height: 28px;
}

/* 
   注意点：columns分列后，最好使用margin-bottom控制行间距，
   margin-top会导致第一项与后面的项不一致，很丑
  */
.class_r_g {
   text-align: center;
   width: 100%;
   margin-bottom: 5px;
}

/* radio文本的点击效果  */
.checkedt {
   color: #40E0D0;
   border: #40E0D0 1px solid;
   border-radius: 4px;
   font-size: 14px;
   padding: 3px 18px;
}

/* 
   radio文本的默认效果  
   注意点：组件本身的高度不能高于组件所在行的行高，否则会发现组件的好似被切割成2块或多块了
*/
.normalt {
   color: #666666;
   border: #e6e6e6 1px solid;
   border-radius: 4px;
   font-size: 14px;
   padding: 3px 18px;
}

js代码：

/**
    * 页面的初始数据
    */
   data: {
      arrays: [{
         id: 0,
         path: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1522750024551&di=2a3059f66cada3c3fcf09ed6fbfa7ff0&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2Feaf81a4c510fd9f9a499b16e2f2dd42a2834a42f.jpg',
         title: '大源中央公园',
         slogan: '每天优惠点',
         content: '大源'
      },
      {
         id: 1,
         path: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1522749957085&di=f63a53aa11dc3d2c6ee656ecf26a734e&imgtype=0&src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fphotoblog%2F1109%2F09%2Fc1%2F8912689_8912689_1315533674830.jpg',
         title: '花园国际',
         slogan: '每天阅读一点，心情愉悦',
         content: '花儿'
      },
      {
         id: 2,
         path: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1522749957089&di=52d63a22521f4928cefc91097853bae4&imgtype=0&src=http%3A%2F%2Fscimg.jb51.net%2Fallimg%2F140812%2F11-140Q21045523K.jpg',
         title: '大源中央公园',
         slogan: '陪你共读，是我爱你的方式',
         content: '大源'
      },
      {
         id: 3,
         path: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1522749848712&di=c12381be5ff7dea1de88bbdf0128eb23&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F1c950a7b02087bf407286efaf8d3572c10dfcfd8.jpg',
         title: '大源中央公园',
         slogan: '每天一首经典诗词',
         content: '大源'
      },
      {
         id: 4,
         path: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1522749848714&di=5a60edbf62ceff57de82e46de6f28b35&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2Fb219ebc4b74543a9f58db25114178a82b801149c.jpg',
         title: '大源中央公园',
         slogan: '每天一首经典诗词',
         content: '大源'
      },
      {
         id: 5,
         path: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1522749848720&di=96beca6c27cf406900332cdd7bda8515&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dpixel_huitu%252C0%252C0%252C294%252C40%2Fsign%3Dc5f68d1bb81bb0519b29bb685f02bfd8%2F10dfa9ec8a1363270e51430a9a8fa0ec08fac74f.jpg',
         title: '大源中央公园',
         slogan: '每天一首经典诗词',
         content: '大源'
      },
      {
         id: 6,
         path: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1522749957089&di=52d63a22521f4928cefc91097853bae4&imgtype=0&src=http%3A%2F%2Fscimg.jb51.net%2Fallimg%2F140812%2F11-140Q21045523K.jpg',
         title: '大源中央公园',
         slogan: '每天一首经典诗词',
         content: '大源'
      },
      {
         id: 7,
         path: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1522749848712&di=c12381be5ff7dea1de88bbdf0128eb23&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F1c950a7b02087bf407286efaf8d3572c10dfcfd8.jpg',
         title: '大源中央公园',
         slogan: '每天一首经典诗词',
         content: '大源'
      },
      {
         id: 8,
         path: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1522749848714&di=5a60edbf62ceff57de82e46de6f28b35&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2Fb219ebc4b74543a9f58db25114178a82b801149c.jpg',
         title: '大源中央公园',
         slogan: '每天一首经典诗词',
         content: '大源'
      },
      {
         id: 9,
         path: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1522749848720&di=96beca6c27cf406900332cdd7bda8515&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dpixel_huitu%252C0%252C0%252C294%252C40%2Fsign%3Dc5f68d1bb81bb0519b29bb685f02bfd8%2F10dfa9ec8a1363270e51430a9a8fa0ec08fac74f.jpg',
         title: '大源中央公园',
         slogan: '每天一首经典诗词',
         content: '大源'
      },],

      //radio-group数据源
      classes_array: [{ name: '全部', checked: false }, { name: '阅读', checked: false }, { name: '外语', checked: false }, { name: '亲子', checked: false }, { name: '技能', checked: false }, { name: '习惯', checked: false }, { name: '运动', checked: false }, { name: '艺术', checked: false }]
   },

   //搜索事件
   search: function () {
      console.log("搜索");
   },

   //点击radio-group中的列表项事件
   radiochange: function (res) {
      console.log("选中的标签：" + res.detail.value);
      var arrs = this.data.classes_array;
      var that = this;
      for (const x in arrs) {
         if (arrs[x].name == res.detail.value) {
            arrs[x].checked = true;
         } else {
            arrs[x].checked = false;
         }
      }
      that.setData({
         classes_array: arrs
      })
   },

有问题可以看下里面的备注哈，备注的很清楚了
这里写图片描述

风正吹
关注
  • 5
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
单项选择器radio-group
weixin_43167546的博客
08-12 1万+
单项选择器 radio-group 内部由多个组成. 通过把多个包裹在一个下, 实现radio的单选 @change:选中项改变时触发 value: radio的标识, 选中时触发chang事件, 会携带的value值 disabled: 是否禁用, 默认为false checked: 当前是否选中, 可用来设置默认选中 color: radio的颜色, 同css的颜色 调节CheckBox的大小:在css中使用transform:scale(num) <!-- 单选
04.封装radio与radio-group组件
a2274001782的博客
07-28 1002
封装组件库
【菜鸡记录】微信小程序调整原生radio样式
最新发布
m0_69315397的博客
06-13 207
记得加有条件编译，踩了个坑，微信小程序最好是浏览器和开发者工具一起打开，H5和微信原生的radio标签不一样，我只写了H5的样式，没注意小程序的。微信小程序的radio选择是绿色白勾的，不满足ui样式。
vue3 antd项目实战——radiogroup单选组合、radiobutton单选按钮【v-model双向绑定数据、v-for循环输出options选择项】
XSL_HR的博客
12-29 1万+
一文带你学会vue3 ant design vue项目实战——Radio单选框【后台管理系统 v-model双向绑定、v-for循环输出】
【mpvue】radio-group 标签组设置默认选择checked: 'true'，选择了单选按钮的非默认选项，再点击其他的选择，单选按钮又会变成默认的选项
腾讯云云开发布道师，慕课网合作讲师
03-06 6447
问题描述： 默认状态如下： 基金类型选择非默认状态，场外 但是点击选择完手续费率之后，基金类型又变成了场内 目前代码 &amp;amp;lt;template&amp;amp;gt; &amp;amp;lt;div class=&amp;quot;row&amp;quot;&amp;amp;gt; &amp;amp;lt;label class=&amp;quot;label&amp;quot;&amp;amp;g
RadioGroup总结
qq_39064700的博客
03-04 4079
RadioGroup:实现单选功能的控件 一组RadioButton必须放在一个RadioGroup中。意思就是说单选按钮中的值我们可以看作是一个数组也就是这里说的这个数组是RadioGroup数组中的值是RadioButton，在这个数组中我们通常都有且只能选择一个值，而这个值是这个组中唯一的选择（如:男、女），而这里的RadioButton就是这里举例的男、女的意思。RadioButton常用...
微信小程序之radio-group
Chocolate的博客
06-20 1909
imgType也默认设置成第一个的值。初始化的时候默认勾选第一个。
微信小程序单选radio及多选checkbox按钮用法示例
11-28
在微信小程序中，开发者可以利用内置的组件来创建交互丰富的用户界面。本文主要介绍的是如何使用单选按钮（radio）和多选按钮（checkbox）这两种常见的表单元素。以下是对标题和描述中提及的知识点的详细说明： 1. ...
微信小程序如何实现radio单选框单击打勾和取消
10-15
在微信小程序中，实现`radio`单选框的单击打勾和取消功能，开发者需要对小程序的`radio`组件有深入的理解，并掌握相应的样式定制技巧。以下将详细阐述这一过程。 1. **使用`radio`组件** 微信小程序提供了`radio`...
微信小程序开发-调查问卷-案例分析.pptx
11-28
微信小程序是一种轻量级的应用开发平台，主要针对移动端，尤其在微信生态系统内运行。它提供了一套基于JavaScript的开发框架，让开发者能够构建原生体验的轻应用，无需安装即可在微信内使用。本讲义将围绕“调查问卷...
微信小程序-媒体及表单组件demo
01-23
本“微信小程序-媒体及表单组件demo”是专门针对微信小程序中的媒体元素和表单控件的实例展示，旨在帮助开发者更好地理解和运用这些功能。 在微信小程序中，媒体组件主要用于展示图像、音频、视频等多媒体内容。...
微信小程序使用radio显示单选项功能【附源码下载】
08-28
本文将深入讲解如何在微信小程序中使用`radio`组件显示单选项功能，并介绍相关的事件响应操作。 1. **效果展示** 在微信小程序中，`radio`组件通常被用在一组相互排斥的选项中，用户只能选择其中的一个。当你完成...
【微信小程序】之单选框、radio-group、radio组件使用
热门推荐
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
10-24 1万+
wxml <radio-group bindchange="radioChange"> <label wx:for="{{radioItems}}" wx:key="*this"> <radio value="{{item.value}}" checked="{{item.checked}}" /> {{item.name}} </label> </radio-group> js Page({ data: {
uniapp中单选按钮的实现
weixin_64103049的博客
10-25 1万+
uniapp中单选按钮的实现
RadioGroup和CheckBox
火星男孩的分享空间
01-04 2074
RadioButton和CheckBox
微信小程序radio-group 组件的使用
yinge0508的博客
02-06 8573
效果图： wxml 文件代码如下： <view class="change"> <radio-group class="block lang_btn" bindchange="changeLanguage"> <view class="cu-form-group margin-top"> <view class="lef...
多组radio-group的实现
gyueh的博客
09-23 2593
1.实现两组互斥的radio-group框 2.radio-group框中的radio按钮需要循环得到 html部分如下所示: <a-form-model-item label="区位号"> <a-input placeholder="区号" style="width:48%;margin-right:4%;" v-model="oldAreaValue" /> </a-form-model-item> <!-----第一个radio-group框--->
微信小程序开发笔记（1.2）单项选择框radio的使用
小姚的博客
05-26 5237
微信小程序组件滚动选择器radio使用详解
微信小程序开发入门教程（十二）
QStack的博客
05-21 1833
背景 上一篇文章我们讲述了微信小程序的三个基础组件icon、text和progress。这些基础组件主要用途是进行信息展示，微信小程序除了信息展示还需要与用户交互，而表单是应用中获取用户输入的重要手段，它对于系统极其重要，用户在应用中输入的大部分内容都是在表单元素中完成的，本篇文章着重介绍表单组件的特性，至于数据如何传输到后段会在之后的文章着重介绍。 radio组件 单选框可以用来生成一组单选按钮，供用户从一批固定的选项中做出选择，它适用于数据不多的情况，小程序中的单选框是由ra-group和radio两个
微信小程序 vant radio组件
06-13
Vant 是一个基于 Vue.js 的轻量级移动端组件库，其中也包括 radio 组件。radio 组件可以用来表示单选框，用户只能选择一个选项。在使用 radio 组件时，需要在 data 中声明一个选项数组，每个选项需要包括 label 和 value 两个属性。然后在模板中使用 vant 的 radio 组件，并通过 v-model 绑定选中的值即可。例如： ```html <van-radio-group v-model="selected"> <van-radio :label="option.value" v-for="option in options" :key="option.value"> {{ option.label }} </van-radio> </van-radio-group> ``` 其中，`options` 是一个数组，每个元素都包括 `label` 和 `value` 属性，`selected` 是当前选中的值。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值