pp电子

登录
免费开通

小程序改变radio巨细,微信小程序修改radio巨细

 
小程序自带的radio似乎是不可调解巨细的 ,,,,在项目中使用时很不利便 ,,,,时;;;嵊跋煺鼋缑娴男Ч。。。。。为相识决这个问题 ,,,,使用text标签连系icon标签实现了radio效果。。。。。

小程序改变radio巨细,微信小程序修改radio巨细

接下来看看怎样实现的吧。。。。。

思绪: 
左边一个< 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就这么简朴。。。。。

小程序改变radio巨细,微信小程序修改radio巨细


【本站声明】
  1、本站文章中所选用的图片及文字泉源于网络以及用户投稿 ,,,,由于未联系到知识产权人或未发明有关知识产权的挂号 ,,,,若有知识产权人并不肯意我们使用 ,,,,若是有侵权请连忙联系。。。。。
  2、本网站差池文章中所涉及的内容真实性、准确性、可靠性认真 ,,,,仅系客观性形貌 ,,,,如您需要相识该类商品/服务详细的资讯 ,,,,请您直接与该类商品/服务的提供者联系。。。。。


KESION pp电子软件

KESION pp电子软件是海内领先的在线教育软件及私域社交电商软件服务提供商 ,,,,恒久专注于为企业提供在线教育软件及社交电商SaaS平台解决方案。。。。。
公司焦点产品云开店SaaS社交电商服务平台、在线教育SaaS服务平台、教育企业数字化SaaS云平台、企微营销助手、私有化自力安排品牌网校和在线教育咨询等。。。。。

KESION 一直通过手艺立异 ,,,,提供产品和服务 ,,,,助力企业向数字化转型 ,,,,通过科技驱动商业刷新 ,,,,让商业变得更智慧!



▼点击进入pp电子官网相识更多



热门标签
微信小程序 SaaS
上/下篇
  • 微信小程序工具第三方平台,小程序官方认可的第三方开发商

  • 小程序服务类目可以修改吗

换一换相关推荐
精选内容
热门精选
pp电子·模拟器(试玩游戏)官方网站 pp电子·模拟器(试玩游戏)官方网站 pp电子·模拟器(试玩游戏)官方网站
【网站地图】
小程序改变radio巨细,微信小程序修改radio巨细 -