小程序模板网

微信小程序radio不能改变大小?那我自己写一个吧


小程序自带的radio似乎是不能调整大小的,在项目中使用时很不方便,时常会影响整个界面的效果。为了解决这个问题,我使用text标签结合icon标签实现了radio效果。

这里我们实现一个选择地区的单选框

1.使用radio的效果

可以清楚的看出来圆圈的大小和字体的大小非常不协调。至于radio如何实现的,这里就不赘述了,大家可以在官方教程中学习简易教程-小程序

2.使用text加 icon实现radio效果

先上效果图 

这里的icon可以调整大小,调整位置。

接下来看看如何实现的吧。

思路: 
左边一个< text>右边一个< icon>来实现radio效果。 
以列表方式排列所有地区area,给地区设置isSelect属性,如果isSelect=true则显示的icon 的type为success否则icon的type显示circle。 
当text被点击时,根据area的id来确定被点击的text,被点击的text对应的area的isSelect属性设置为true否则设置为false。

先附上wxml文件代码部分:


  1. <scroll-view hidden="{{hideArea}}" scroll-y="true" style="height: 100px;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
  2. <view class="radio-group" >
  3. <label wx:for="{{areas}}" wx:for-item="area">
  4. <text bindtap="selectAreaOk" data-areaId="{{area.id}}">{{area.name}}</text>
  5. <icon wx:if="{{area.isSelect}}" type="success" size="10"/>
  6. <icon wx:else type="circle" size="10"/>
  7. </label>
  8. </view>
  9. </scroll-view>

先设定一个scroll-view,设置选择框的父容器位置大小其中radio-group的wxss设定了容器内字体大小已经排练方式


  1. .radio-group{
  2. font-size: 26rpx;
  3. display: flex;
  4. flex-direction: column;
  5. }

接下来遍历了areas数组用来显示 地区名称+icon 其中为地区名称 < text>设置了 bindtap、data-areaId 。这里要跟js进行数据交互,其中data-areaId为传递过去的参数。

根据area对象的isSelect属性来确定显示的< icon>,其中一个是圆圈,一个是绿色的对勾。示例中icon的大小设置为10,这里可以随意改变其大小。

接下来是js代码部分。


  1. //选择区域
  2. selectAreaOk: function(event){
  3. var selectAreaId = event.target.dataset.areaid;
  4. var that = this
  5. areaId = selectAreaId
  6. for(var i = 0;i<this.data.areas.length;i++){
  7. if(this.data.areas[i].id==selectAreaId){
  8. this.data.areas[i].isSelect=true
  9. }else{
  10. this.data.areas[i].isSelect=false
  11. }
  12. }
  13. this.setData({
  14. areas:this.data.areas,
  15. skus:[],
  16. hideArea:true
  17. })
  18. getSkus(that,selectAreaId)
  19. }

在js代码里面接收text的点击事件并接收到传递过来的参数,遍历areas数组,将选中的area的isSelect属性设置为true,其余设置为false,再刷新wxml的areas部分。

ok就这么简单。


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/21647.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询