大boosM先生：全栈技术一枚支付功能上线了！

M先生：全栈技术

近日，M先生上线了支付功能。 支付功能大家都知道。 如果你不知道，你可以打开某个东东或者某个群，享受你的消费看看。 支付前，您需要选择支付平台。 微信支付、银行卡支付，有很多。

对于NB Plus的全栈M先生来说，第一个想到的就是使用radio按钮，于是他使用uview-ui打开了官方文档，找到了radio部分，现在就学习和销售。 这很简单。 对于M先生来说是不费吹灰之力就完成的，主要是没有什么技术含量。 按照文档中的demo复制cat即可。基本代码如下图

对应的视图如下图2所示。 组、单选、文本分别添加了边框，可以直观地看到各个部分所占用的空间。

官方文档明确指出，中的“wrap”属性可以控制是一行显示还是每个radio独行。 个人测试失败。 不知道大部分开发者是不是和我一样的情况，但是反正不行。 如果读者有不同意见，请在评论区留言，不胜感激。

uview还是很受欢迎的。 现在第一次写前端作为后端，可以说是“兴奋”。

线上配送不间断进行。 我立即微信联系L先生，说：“支付功能上线了，现在就试试吧，你觉得怎么样？我的开发效率很高吧？” 内心感觉很尴尬，NB不可思议。

不到10分钟后，L先生在微信上发消息称：“现在只能点击文字选择，体验不好，我们需要改成点击整行选择，用户体验不好”最重要的是，这个问题已经尽快得到纠正。”

M先生突然心里一寒，以为我只是在等着夸奖他。 他为什么会遇到这个问题呢？ 事实上，M先生在上线之前就已经遇到过这个问题。 他只是想尽快上线，早点占领市场，早点得到反馈。 无论如何，迭代是永恒的。

既然L先生已经提出来了，那我们就修改一下吧。

首先，将文本的宽度属性设置为100%。 我亲自测试过，发现反复有效；

第二步，打开开发者工具，代码审查，发现总有一层封装。 继续深挖，发现这样一个class.u-，它会包裹整个文本标签，导致文本标签宽度不是100%。 所以我添加了以下样式：

我高兴地刷新了页面，但我仍然无法选择整行（你必须点击非文本部分才能选择它）。 哎呀，看来老虎不显威了，还以为我是病猫呢。

第三招是，既然外层不能动摇你，那就从里面渗透你。 于是我打开u-radio的组件源码，发现了如下代码。 红框部分是M先生添加的。

抱着试一试的心情，我刷新了页面，哈哈哈哈，成功了，“达到了你想要的效果。”

同时我还勾选了>，可以理解为私有化组件，字面意思就是生命周期。添加这个关键字，vue就会在对应的标签中添加data--xxxxx，如下图

模块化本来是一件好事。 但它也是一把双刃剑，并不会导致优先级选择的问题。

既然问题解决了，就愉快地放松一下吧。

TAG标签：微信小程序单选框