1. 程式人生 > >微信小程式把玩(十九)radio元件

微信小程式把玩(十九)radio元件

這裡寫圖片描述

radio元件為單選元件與radio-group組合使用,使用方式和checkbox沒啥區別

主要屬性:

這裡寫圖片描述

這裡寫圖片描述

wxml

<!--設定監聽器,當點選radio時呼叫-->
<radio-group bindchange="listenerRadioGroup">
<!--label通常與radio和checkbox結合使用-->
    <label style="display: flex" wx:for-items="{{array}}">
        <radio value="{{item.name}}" checked
="
{{item.checked}}"/>{{item.value}} </label> </radio-group>

js

Page({
  data:{
    array:[
        {name: 'Jave', value: 'Android', checked: 'true'},
        {name: 'Object-C', value: 'IOS'},
        {name: 'jsx', value: 'ReactNative'},
        {name: 'js', value: 'WeChat'},
        {name: 'Python'
, value: 'Web'}, ] }, /** * radio監聽事件 */ listenerRadioGroup:function(e) { console.log(e); }, onLoad:function(options){ // 頁面初始化 options為頁面跳轉所帶來的引數 }, onReady:function(){ // 頁面渲染完成 }, onShow:function(){ // 頁面顯示 }, onHide:function(){ // 頁面隱藏 }, onUnload:function
(){
// 頁面關閉 } })