微信小程序實現(xiàn)性別單選效果
更新時間：2022年07月19日 10:25:47 作者：幽幽靖
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)性別單選效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了微信小程序實現(xiàn)性別單選的具體代碼，供大家參考，具體內(nèi)容如下
效果圖：
代碼：
html:
<view class="inputbox">
? ? ? ? <view class="inptxt">性別</view>
? ? ? ? <view class="inpbox">
? ? ? ? ? <radio-group bindchange="radioChange" class="inp radiogroup">
? ? ? ? ? ? <view class="radiobox" wx:for="{{sex}}" wx:key="value">
? ? ? ? ? ? ? <radio value="{{item.id}}" color="#ff0000" checked="{{item.checked}}"/>
? ? ? ? ? ? ? <view class="radiotxt">{{item.value}}</view>
? ? ? ? ? ? </view>
? ? ? ? ? </radio-group> ? ? ? ? ?
? ? ? ? </view>
</view>js:
data:{
?? ?sex: [{
? ? ? id: 1,
? ? ? value: '男'
? ? }, {
? ? ? id: 2,
? ? ? value: '女'
? ? }],
}// sexinp
? radioChange: function (e) {
? ? // console.log('radio發(fā)生change事件，攜帶value值為：', e.detail.value)
? ? const sex = this.data.sex
? ? for (let i = 0, len = sex.length; i < len; ++i) {
? ? ? sex[i].checked = sex[i].id == e.detail.value
? ? }
? ? this.setData({
? ? ? sex
? ? })
? ? console.log(this.data.sex);
? },(注意：post提交時，提交的是選中的性別的id，所以需要把選中的id 提出來，再提交)
postaddManage: function () {
?? ?let sex = '';
? ? this.data.sex.map((item, index) => {
? ? ? if (item.checked) {
? ? ? ? sex = item.id;
? ? ? }
? ? })
?? ?let params = {
?? ??? ?sex: sex,
?? ?}
?? ?addManage(params).then(res => {
?? ??? ?console.log(res);
?? ?})
}css(less):
.inputbox {
? ? ? ? display: flex;
? ? ? ? flex-direction: row;
? ? ? ? // justify-content: space-between;
? ? ? ? width: 100%;
? ? ? ? height: 80rpx;
? ? ? ? line-height: 80rpx;
? ? ? ? margin-top: 10rpx;
? ? ? ? border-bottom: 1px solid #f1f1f1;
? ? ? ? font-size: 32rpx;
? ? ? ? color: #353535;
? ? ? ? .inptxt {
? ? ? ? ? white-space: nowrap;
? ? ? ? }
? ? ? ? .inpbox {
? ? ? ? ? width: 100%;
? ? ? ? ? margin-left: 20rpx;
? ? ? ? ? display: flex;
? ? ? ? ? flex-direction: row;
? ? ? ? ? justify-content: space-between;
? ? ? ? ? .inp {
? ? ? ? ? ? position: relative;
? ? ? ? ? ? width: 100%;
? ? ? ? ? ? height: 80rpx;
? ? ? ? ? }
? ? ? ? ? .telinpbox {
? ? ? ? ? ? width: 240rpx;
? ? ? ? ? ? // height: 52rpx;
? ? ? ? ? ? overflow: hidden;
? ? ? ? ? ? margin-top: 10rpx;
? ? ? ? ? ? .telinp {
? ? ? ? ? ? ? width: 55rpx;
? ? ? ? ? ? ? height: 55rpx;
? ? ? ? ? ? ? overflow: hidden;
? ? ? ? ? ? ? margin-left: 25rpx;
? ? ? ? ? ? }
? ? ? ? ? }
? ? ? ? ? .radiogroup {
? ? ? ? ? ? display: flex;
? ? ? ? ? ? flex-direction: row;
? ? ? ? ? ? .radiobox {
? ? ? ? ? ? ? display: flex;
? ? ? ? ? ? ? flex-direction: row;
? ? ? ? ? ? ? margin-left: 50rpx;
? ? ? ? ? ? }
? ? ? ? ? }
? ? ? ? }
}以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了js實現(xiàn)點擊圖片改變頁面背景圖的方法,實例分析了javascript操作css與圖片的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
對于JQuery，想必大家都很熟悉。目前，很多web項目，在實施的過程中，考慮到各瀏覽器原生JS API的兼容性，大都會選用JQuery或類似于JQuery這樣的框架來進行網(wǎng)頁效果開發(fā)。這篇文章將給大家深入介紹jQuery()方法的構建原理，有需要的朋友們可以參考借鑒。2016-12-12
本文給大家分享js設置ios中微信瀏覽器中的title的解決方法，實現(xiàn)原理比較簡單，對js微信瀏覽器title相關知識感興趣的朋友一起通過本文學習吧2016-11-11
Javascript highcharts 餅圖顯示數(shù)量和百分比實例代碼
這篇文章主要介紹了Javascript highcharts 餅圖顯示數(shù)量和百分比實例代碼的相關資料,這里附有實例代碼，需要的朋友可以參考下2016-12-12
這篇文章主要給大家介紹了關于JavaScript中分號的一些細節(jié)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-05-05
這篇文章主要給大家介紹了關于自定義Egg.js的請求級別日志的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2018-12-12
JavaScript如何將數(shù)據(jù)處理成樹形結構
這篇文章主要介紹了JavaScript如何將數(shù)據(jù)處理成樹形結構問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
純JS實現(xiàn)五子棋游戲同時兼容各個主流瀏覽器,感興趣的朋友可以下載源碼學習下也是對你js技巧的晉級2013-04-04
經(jīng)理交給我一個網(wǎng)站新聞資訊網(wǎng)頁開發(fā)的活兒，對于我這樣的java程序員，沒有接觸過網(wǎng)頁設計這么高端的東東，該怎么搞呢，去度娘那搜索到不少結果，而且很大部分都是用jquery做的，于是根據(jù)自己的一些的理解，提供了這篇jquery輪播效果的講解，有需要的朋友可以來參考下2015-08-08
JavaScript中常用的五種數(shù)字千分位格式化方法
數(shù)字格式化是開發(fā)中經(jīng)常遇到的任務,特別是在需要為數(shù)字添加千分位符或控制小數(shù)位數(shù)時,以下是幾種常用的數(shù)字格式化方法,每種方法有其優(yōu)缺點,適用于不同的需求場景,感興趣的小伙伴跟著小編一起來看看吧2024-12-12