一、这里的测试页面是参照（小打卡的-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/templatewxss代码：（其实在这里已经有了点击切换样式了）
/* 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 }) },有问题可以看下里面的备注哈，备注的很清楚了
