求助! 微信小程序单选框 radio 的圆圈和文字总是不在同一行怎么办

218 天前
 odingo

我正在开发一个自用的微信小程序,没什么编程经验。现在遇到一个问题,就是单选框的圆圈和文字总是不在同一行。

微信开发者工具里预览的时候,圆圈和文字是同一行。但是放到手机上,无论苹果还是安卓,文字总在圆圈下面,特别难看。

使用的就是 radio-group 和 radio 两个自带元素。

android 和 ios 下的小程序截图如下(不好意思图源不太稳定):

https://ibb.co/Qvc0Kf7L

https://ibb.co/gLzCs3kK

微信开发工具预览窗口的截图如下(不好意思图源不太稳定):

https://ibb.co/FkjxJdgF

1433 次点击
所在节点    程序员
4 条回复
montaro2017
218 天前
代码呢
odingo
218 天前
.wxml:

<radio-group bindchange="yingyang_cal_param3">
<radio value="0" checked="{{yingyang_params.checked}}">小于 70 岁</radio>
<radio value="1" checked="{{yingyang_params.checked}}">大于等于 70 岁</radio>
</radio-group>

.wxss:

radio {
flex: 1;
border: none;
border-radius: 4px;
border-left: 1px solid #4a7c59;
/* padding-left: 3px; */
margin-right: 3px;
margin-left: 20px;
margin-top: 2px;
margin-bottom: 2px;
padding: 2px 6px;
/* height: 22px; */
/* width: 100%; */
background-color: #f4f8f5;
color: #1f3b29;
/* font-size: 13px; */
display: flex !important;
align-items: center;
line-height: normal;
}
odingo
218 天前
wxss 是根据 chatgpt 改的,不过和 css 无关,没有 radio 对应的 css 也是一样的情况
canvascat
218 天前
官方文档的例子是这样写的,用 label 标签包裹
https://developers.weixin.qq.com/miniprogram/dev/component/radio.html
<view class="page-section">
<view class="page-section-title">推荐展示样式</view>
<view class="weui-cells weui-cells_after-title">
<radio-group bindchange="radioChange">
<label class="weui-cell weui-check__label" wx:for="{{items}}" wx:key="{{item.value}}">

<view class="weui-cell__hd">
<radio value="{{item.value}}" checked="true"/>
</view>
<view class="weui-cell__bd">{{item.name}}</view>
</label>
</radio-group>
</view>
</view>

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/1127337

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX