微信小程序radio組件使用詳解
更新時間：2018年01月31日 14:14:49 作者：Rattenking
這篇文章主要為大家詳細(xì)介紹了微信小程序radio組件的使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文為大家分享了微信小程序radio組件的使用方法，供大家參考，具體內(nèi)容如下
效果圖
WXML
<view class="tui-content">
<radio-group class="radio-group" bindchange="radioChange">
<label class="radio" wx:for="{{items}}">
<view class="tui-menu-list"><radio color="#007aff" value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}</view>
</label>
</radio-group>
<view class="tui-show-name">
{{radioStr}}
</view>
</view>
JS
Page({
data: {
items: [
{ name: 'USA', value: '美國' },
{ name: 'CHN', value: '中國', checked: 'true' },
{ name: 'BRA', value: '巴西' },
{ name: 'JPN', value: '日本' },
{ name: 'ENG', value: '英國' },
{ name: 'TUR', value: '法國' },
],
radioStr: '中國'
},
radioChange: function (e) {
var str = null;
for (var value of this.data.items) {
if (value.name === e.detail.value) {
str = value.value;
break;
}
}
this.setData({ radioStr: str });
}
})
總結(jié)
由于e.detail.value是一個字符串，所以直接采用for…of…對比就可以確定點擊目標(biāo)。
DEMO下載
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了微信公眾平臺開發(fā)教程（五）詳解自定義菜單，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2016-12-12
JS多重繼承實例，js新手學(xué)習(xí)資料2008-03-03
非常不錯的，收藏效果代碼，增加當(dāng)前頁的現(xiàn)實，實現(xiàn)對比2008-08-08
Firefox 包含了一個非標(biāo)準(zhǔn)的 JavaScript 擴(kuò)展，使正則像函數(shù)一樣可調(diào)用。2008-04-04
這篇文章主要為大家詳細(xì)介紹了原生js實現(xiàn)購物車邏輯和功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
幾款極品的javascript壓縮混淆工具...2007-05-05
java和javascript獲取word文檔的書簽位置對比
這篇文章主要介紹了java和javascript獲取word文檔的書簽位置代碼對比,需要的朋友可以參考下2014-06-06
JS實現(xiàn)的一個簡單的Autocomplete自動完成例子
這篇文章主要介紹了JS實現(xiàn)的一個簡單的Autocomplete自動完成例子,需要的朋友可以參考下2014-04-04
這篇文章主要為大家詳細(xì)介紹了uniapp實現(xiàn)橫屏簽字版，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
本文主要介紹了微信小程序骨架屏的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01