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

一、这里的测试页面是参照（小打卡的-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>
               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
      })
   },

有问题可以看下里面的备注哈，备注的很清楚了