E企盈小程序营销工具技术服务商 热线:4006-838-530

微信小程序radiogroup(排列)及事件绑定、点击切换样式

E企盈小程序直播系统

一、这里的测试页面是参照(小打卡的-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      })   },有问题可以看下里面的备注哈,备注的很清楚了

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序radiogroup(排列)及事件绑定、点击切换样式
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏