1000字范文 > 微信小程序 radio-group（排列）及事件绑定点击切换样式

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

时间：2023-03-25 18:54:33

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

wxml代码：

模板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: '/timg?image&quality=80&size=b9999_10000&sec=1522750024551&di=2a3059f66cada3c3fcf09ed6fbfa7ff0&imgtype=0&src=http%3A%2F%%2Fimgad%2Fpic%2Fitem%2Feaf81a4c510fd9f9a499b16e2f2dd42a2834a42f.jpg',title: '大源中央公园',slogan: '每天优惠点',content: '大源'},{id: 1,path: '/timg?image&quality=80&size=b9999_10000&sec=1522749957085&di=f63a53aa11dc3d2c6ee656ecf26a734e&imgtype=0&src=http%3A%2F%%2Fimages%2Fupload%2Fupc%2Ftx%2Fphotoblog%2F1109%2F09%2Fc1%2F8912689_8912689_1315533674830.jpg',title: '花园国际',slogan: '每天阅读一点，心情愉悦',content: '花儿'},{id: 2,path: '/timg?image&quality=80&size=b9999_10000&sec=1522749957089&di=52d63a22521f4928cefc91097853bae4&imgtype=0&src=http%3A%2F%%2Fallimg%2F140812%2F11-140Q21045523K.jpg',title: '大源中央公园',slogan: '陪你共读，是我爱你的方式',content: '大源'},{id: 3,path: '/timg?image&quality=80&size=b9999_10000&sec=1522749848712&di=c12381be5ff7dea1de88bbdf0128eb23&imgtype=0&src=http%3A%2F%%2Fimgad%2Fpic%2Fitem%2F1c950a7b02087bf407286efaf8d3572c10dfcfd8.jpg',title: '大源中央公园',slogan: '每天一首经典诗词',content: '大源'},{id: 4,path: '/timg?image&quality=80&size=b9999_10000&sec=1522749848714&di=5a60edbf62ceff57de82e46de6f28b35&imgtype=0&src=http%3A%2F%%2Fimgad%2Fpic%2Fitem%2Fb219ebc4b74543a9f58db25114178a82b801149c.jpg',title: '大源中央公园',slogan: '每天一首经典诗词',content: '大源'},{id: 5,path: '/timg?image&quality=80&size=b9999_10000&sec=1522749848720&di=96beca6c27cf406900332cdd7bda8515&imgtype=0&src=http%3A%2F%%2Fimage%2Fc0%253Dpixel_huitu%252C0%252C0%252C294%252C40%2Fsign%3Dc5f68d1bb81bb0519b29bb685f02bfd8%2F10dfa9ec8a1363270e51430a9a8fa0ec08fac74f.jpg',title: '大源中央公园',slogan: '每天一首经典诗词',content: '大源'},{id: 6,path: '/timg?image&quality=80&size=b9999_10000&sec=1522749957089&di=52d63a22521f4928cefc91097853bae4&imgtype=0&src=http%3A%2F%%2Fallimg%2F140812%2F11-140Q21045523K.jpg',title: '大源中央公园',slogan: '每天一首经典诗词',content: '大源'},{id: 7,path: '/timg?image&quality=80&size=b9999_10000&sec=1522749848712&di=c12381be5ff7dea1de88bbdf0128eb23&imgtype=0&src=http%3A%2F%%2Fimgad%2Fpic%2Fitem%2F1c950a7b02087bf407286efaf8d3572c10dfcfd8.jpg',title: '大源中央公园',slogan: '每天一首经典诗词',content: '大源'},{id: 8,path: '/timg?image&quality=80&size=b9999_10000&sec=1522749848714&di=5a60edbf62ceff57de82e46de6f28b35&imgtype=0&src=http%3A%2F%%2Fimgad%2Fpic%2Fitem%2Fb219ebc4b74543a9f58db25114178a82b801149c.jpg',title: '大源中央公园',slogan: '每天一首经典诗词',content: '大源'},{id: 9,path: '/timg?image&quality=80&size=b9999_10000&sec=1522749848720&di=96beca6c27cf406900332cdd7bda8515&imgtype=0&src=http%3A%2F%%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})},

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

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。