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

最新推荐文章于 2024-09-09 08:30:48 发布
最新推荐文章于 2024-09-09 08:30:48 发布
阅读量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
      })
   },

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

风正吹
关注
【微信小程序---radio单选框讲解】
m0_56349322的博客
02-22 1万+
radio 单选框 1 radio 标签 必须要和 父元素 radio-group 来使用 2 value 选中的单选框的值 3 需要给 radio-group 绑定 change 事件 bindchange=“handleChange” 4 需要在页面中显示选中的值 radio单选框.wxml <radio-group bindchange="handleChange"> <radio value="male">男</radio> <radio
RadioGroup自定义选项卡样式
07-30
RadioGroup自定义选项卡样式
Radio Group 开源项目教程
最新发布
gitblog_01041的博客
09-09 551
Radio Group 开源项目教程 radio-group845 byte WAI-ARIA 1.1 compliant radio group React component项目地址:https://gitcode.com/gh_mirrors/ra/radio-group 项目介绍 Radio Group 是一个由 PalmerHQ 团队开发的开源项目，旨在提供一种简洁高效的方式来管理一组...
【Material-UI】深入探讨Radio Group组件的自定义功能
lph159的博客
08-24 1361
是一个表单组件，允许用户从多个选项中选择一个。每个选项都由一个单选按钮（Radio Button）表示，通常伴随着一个标签（Label）。这个组件广泛应用于各种表单场景，比如性别选择、问卷调查等。Material-UI 的组件不仅功能强大，还支持高度自定义。通过对其外观和行为进行调整，开发者可以创建更符合项目需求的用户界面。尽管Material-UI提供了开箱即用的样式，但在实际项目中，往往需要根据品牌、设计规范或者用户体验要求进行定制化。
微信小程序之radio-group
Chocolate的博客
06-20 2080
imgType也默认设置成第一个的值。初始化的时候默认勾选第一个。
微信小程序通过＜radio-group＞按钮实现单页面多组件选择功能
Tom_yangyang的博客
07-03 545
文章简介：针对小程序某个单页面多切换组件的操作。下面展示的是中针对的的随意。
关于微信小程序<radio-group>布局排列
weixin_30326741的博客
01-10 1677
微信小程序更新以后今天<radio>全部变成垂直排列了，布局乱了。 一开始尝试给外层<view>添加display:flex;flex-direction:row；未果。 后来在开发者社区查找，发现是微信更新后的bug，很多线上的项目都受影响了。 解决： 1、在<radio-group>里添加包一个<view></view> 2...
微信小程序RadioGroup代替方案
weixin_34195546的博客
10-22 275
2019独角兽企业重金招聘Python工程师标准>>> ...
小白开发微信小程序10--表单组件之checkbox-group/radio-group/label
hqwest的专栏
03-06 1900
富文本组件内部引入了一些基本的样式使得内容可以正确的展示，开发时可以进行覆盖。需要注意的是，在其它组件或环境中使用富文本组件导出的html时，需要额外引入 这段样式，并维护 的结构。小程序中的组件也是非常丰富的，开发者可以基于组件快速搭建出漂亮的页面结构。使用for属性找到对应的id，或者将控件放在该标签下，当点击时，就会触发对应的控件。for优先级高于内部控件，内部有多个控件的时候默认触发第一个控件。
微信小程序获取复选框全选反选选中的值(实例代码)
10-15
首先，我们需要了解微信小程序中几个关键组件的使用方法，包括`checkbox`、`checkbox-group`以及它们的事件绑定。 ### 1. checkbox组件 `checkbox`组件用于创建一个复选框，它有以下几个属性： - `value`：复选框...
微信小程序单选radio及多选checkbox按钮用法示例
11-28
在微信小程序中，开发者可以利用内置的组件来创建交互丰富的用户界面。本文主要介绍的是如何使用单选按钮（radio）和多选按钮（checkbox）这两种常见的表单元素。以下是对标题和描述中提及的知识点的详细说明： 1. ...
微信小程序仿RadioGroup改变样式的处理方案
10-18
本文给大家分享一段简单的代码来实现微信小程序仿RadioGroup改变样式的方法，代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
微信小程序如何实现radio单选框单击打勾和取消
10-15
在微信小程序中，实现`radio`单选框的单击打勾和取消功能，开发者需要对小程序的`radio`组件有深入的理解，并掌握相应的样式定制技巧。以下将详细阐述这一过程。 1. **使用`radio`组件** 微信小程序提供了`radio`...
微信小程序开发入门教程（十二）
QStack的博客
05-21 1877
背景 上一篇文章我们讲述了微信小程序的三个基础组件icon、text和progress。这些基础组件主要用途是进行信息展示，微信小程序除了信息展示还需要与用户交互，而表单是应用中获取用户输入的重要手段，它对于系统极其重要，用户在应用中输入的大部分内容都是在表单元素中完成的，本篇文章着重介绍表单组件的特性，至于数据如何传输到后段会在之后的文章着重介绍。 radio组件 单选框可以用来生成一组单选按钮，供用户从一批固定的选项中做出选择，它适用于数据不多的情况，小程序中的单选框是由ra-group和radio两个
Android RadioGroup 横向显示（两行两列）
热门推荐
你好邱林和的专栏
12-30 3万+
做的android平板项目中，需要做一个调查问卷的界面，所以需要使用radiogroup的单选按钮，在listview的一个item上添加四个radiobutton，具体的demo是参考这位博主的，链接如下：http://blog.csdn.net/who0am0i/article/details/45200709，里面解决了我最大的难题就是如何在一个item中，识别用户点击的是哪一个radio，
uniapp：单选框radio-group的自定义样式
weixin_58791464的博客
11-04 2068
项目中使用单选框radio-group不想使用原来的样式，怎么自己自定义呢？
【微信小程序】之单选框、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: {
使用微信小程序组件 template 配合 radio-group label checkbox 封装展开收起的操作
m0_63281943的博客
12-02 468
【代码】使用微信小程序组件 template 配合 radio-group label checkbox 封装展开收起的操作。
微信小程序radio-group 组件的使用
yinge0508的博客
02-06 8659
效果图： wxml 文件代码如下： <view class="change"> <radio-group class="block lang_btn" bindchange="changeLanguage"> <view class="cu-form-group margin-top"> <view class="lef...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值