29. 教你零基礎搭建小程序：小程序的常見組件—radio

子們，來了。

這一章繼續繼續，講解小程序的常見組件（7）— radio單選框。

它與網頁的單選框用法是大致相同的，但是有2個細節需特別注意。

1、可以通過 color屬性來修改顏色

如上圖，"選中"圖標被選中時，默認樣式是呈現綠色，這里可以通過 color屬性來修改顏色。

2、當需要選中某個單選框，觸發某一事件時，需和radio group 一起使用。

啥意思呢？看不懂？

別急，我們用一個需求來講講就懂了。

需求：創建男，女兩個標簽，當選中一個時，在圖標下方顯示文字"你選中的為男/女"

擼起袖子加油干：

1、新建一個頁面 demo15

2、打開demo15.wxml 文件，刪除原先的代碼，寫入如下代碼：

  <radio-group bindchange="    ">
 <radio color="red" value="male">男</radio>
 <radio color="red" value="female" >女</radio>
 </radio-group>

3、保存，小程序界面顯示男，女兩標簽。

點擊男/女標簽，圖標出現紅色選中，但沒有提示文字。

別著急，我們慢慢來。

4、給radio-group 綁定change 事件，修改代碼成如下：

（與上面代碼神似，注意觀察啊）

 <radio-group bindchange="handlechange">
 <radio color="red" value="male">男</radio>
 <radio color="red" value="female" >女</radio>
 </radio-group>

5、在demo15.wxml中，加上view標簽，用來顯示頁面中顯示的值，代碼如下：

<radio-group bindchange="handlechange">  
  <radio color="red" value="male">男</radio> 
 <radio color="red" value="female" >女</radio> 
 </radio-group>

<view>您選中的是：{{gender}}</view>

保存后，小程序頁面選中某個圖標后，出現提示文字。

6、在demo15.js文件中，寫入頁面邏輯的代碼。

首先先刪除原先的代碼，只保留data部分。

寫入如下代碼（內含每步的注釋）：

Page({
  data: {
    gender: ""
 },
 handleChange(e){
 // 1 獲取單選框中的值
 let gender=e.detail.value;
 // 2 把值 賦值給 data中的數據
 this.setData({
 // gender:gender
 gender
 })
 }
})

保存后，小程序顯示如下，選中某一個圖標，下面就會有提示文字。

我們的需求實現了。

以上步驟很好的解釋了radio 單選框的第2個細節：

當需要選中某個單選框，觸發某一事件時，需和radio group 一起使用。

還有第一個細節：radio的顏色屬性。

我們演示一下：

很簡單，只需一步就搞定。

修改demo15.wxml文件中 radio color 的部分，
這里將原先的紅色修改為綠色（green），其余不變。

代碼如下：

  <radio-group bindchange="handlechange">
 <radio color="green" value="male">男</radio>
 <radio color="green" value="female" >女</radio>
 </radio-group>
 
 <view>您選中的是：{{gender}}</view>

保存后，圖標被選中后的顏色發生了變化：

到這里，我們的第一個小細節也演示完了。

單選框的用法基本就這兩點與網頁中的單選框的使用不同，其余具體知識點，請移步官方文檔。

快門傳送：https://developers.weixin.qq.com/miniprogram/dev/component/radio.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登錄頁面</title>
    /*總體的樣式*/
    <style>
    	/*盒子樣式*/
        #box{
            width: 350px; //寬
            height: 450px; //高
            border: 1px solid black; //邊框
            border-radius: 10px; //邊框弧度
            font-family: 黑體; //字體
            letter-spacing:8px; //段間距
            word-spacing: 10px; //字間距
            line-height: 40px; //行高
            font-size: 18px; //字大小
            padding: 20px; //內邊框
        }
        /*給'注冊'賦予樣式*/
        .register{
            width:280px ; //寬
            height: 50px; //高
            background-color: skyblue; //背景顏色
            border-radius: 10px; //邊框弧度

        }
        /*將所有邊框都改變*/
        *{
            border-radius: 5px; 邊框弧度
        }
        /*使用class選擇器，賦予number寬高和邊框*/
        .number{
            width: 185px; //寬
            height: 27px; //高
            border-width: 1px; //邊框寬度

        }
        /*id選擇器*/
        #two{
            width: 55px; //寬
            border-width: 1px; 邊框寬度
        }
        /*id選擇器*/
        #phone{
            width: 103px; //寬
        }
        /*class 選擇器*/
        .boxs{
            zoom: 75%; //清除浮動
            color: darkgray; //顏色
        }
        /*class選擇器*/
        .box_a{
            width: 50px; //寬
            height: 50px; //高
            background-image: url("../image/04.jpg "); //背景圖片
            background-repeat: no-repeat; // 是否平鋪
            background-size: 50px 25px; //背景尺寸
            position: relative; //定位 相對定位
            left: 310px; //定位后左移
            bottom: 32px; //定位后下移

        }
    </style>
</head>
<body>
<div id="box">
    <h1>請注冊</h1>
<p style="color: darkgray">已有帳號?<a href="https://im.qq.com/index">登錄</a></p>
<form action="" method="post">
    <label for="name">用戶名</label>
    <input type="text" placeholder="請輸入用戶名" id="name" class="number"> <br>
    <label for="phone">手機號</label>
    <select name="" id="two" class="number">
    <optgroup>
        <option style="" class="">+86</option>
    </optgroup>
    </select>
    <input type="text" placeholder="請輸入手機號" id="phone" class="number"> <br>
    <label for="mima">密?碼</label>
    <input type="password" placeholder="請輸入密碼" id="mima" class="number"> <br>
    <label for="mima">驗證碼</label>
    <input type="password" placeholder="請輸入驗證碼" id="is" class="number">
    <div class="box_a"></div>
    <div class="boxs">
        <input type="radio" id="" class="accept">閱讀并接受協議<br>
    </div>
    <input type="submit" value="注冊" class="register" >

    </form>
</div>


</body>
</html>
在這里插入圖片描述

TML元素介紹（一）

個人學習總結輸出，持續更新。Day day study！Day day up！

這里的元素大多數是普通元素。此處的普通指的是：幾乎沒有自己特殊的屬性，只指定通用屬性和各種事件屬性。

基本元素

:定義HTML注釋。
<html>:HTML5文檔的根元素，允許省略，但不建議省略。
<head>:HTML5文檔的頁面頭部分，允許省略，但不建議省略。
<title>:HTML5文檔頁面標題。
<body>:頁面主體部分。
<title>:定義標題1-標題6。
<p>:定義段落。
<br>:插入一個換行。
<hr>:水平線，主題結束語義。
<div>:文檔中的節。
<span>:與div類似，表示一般性文本，為內聯元素。

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title></title>
 </head>
 <body>
 <h1>標題1</h1>
 <h2>標題2</h2>
 <h3>標題3</h3>
 <h4>標題4</h4>
 <h5>標題5</h5>
 <h6>標題6</h6>
 <p>
 <span>
 其后無br
 </span>
 <span>
 其后有br
 </span>
 <br>
 <span>
 其后有hr
 </span>
 <hr>
 <span>
 其后有div
 </span>
 <div id="">
 一般p內不包含div，div內可包含一切，所以以往大量使用，造成了語義化不明確。
 </div>
 </p>
 </body>
</html>

文本格式相關元素

<b>:粗體文本
<i>:斜體文本
<em>:表示強調，樣式也是斜體
<strong>:粗體文本,與<b>用法類似。
<small>:小號字體文本。
<sup>：上標文本
<sub>：下標文本
<bdo>：文本顯示方向

?
 <p>
 <b>b加粗</b><strong>strong加粗</strong>正常
 <small>縮小</small>2<sup>2</sup>a<sub>2</sub>
 <hr >
 <bdo dir="ltr">左向右</bdo>
 <hr >
 <bdo dir="rtl">左向右</bdo>
 </p>

舊的語義相關元素

<abbr>：表示縮寫，
title：屬性代表全稱。
<address>：表示地址
<blockquote>：表示長文本引用。
cite：屬性指定出處
<q>：表示短文本引用。
<cite>：作品標題。
<code>：代碼文本。
<dfn>：用于定義專業術語。
<del>：待刪除線文本。
cite：屬性指定原因、
datetime：屬性標注修改時間
<ins>：表示插入的文本。
cite：屬性指定原因、
datetime：屬性標注修改時間
<pre>：預格式化。內部可直接使用本來需要轉移的文本。
<samp>：示范文本。
<kbd>：用于定義鍵盤文本。
<var>：表示變量。

?
 <p>
 <abbr title="中華人民共和國">中國</abbr>
 <address>西安市雁塔區幸福小區3單元403室</address>
 <cite>作品標題</cite>
 <blockquote cite="www.baidu.com">表示長文本引用。通常帶有`cite`屬性指定出處（可以使url）</blockquote>
 <q>表示短文本引用。</q>
 <code>
 let tempDom=document.querrySelect('#id');
 dom.hidden=true;
 </code>
 <dfn>牛頓第三定理：</dfn>
 <br>
 <del>待刪除線文本。通常帶有`cite`屬性指定原因、通常帶有`datetime`屬性標注修改時間</del>
 <br>
 <ins>表示插入的文本。常帶有`cite`屬性指定原因、通常帶有`datetime`屬性標注修改時間</ins>
 <pre>/\'''"""</pre>
 <samp>示范文本。</samp>
 <kbd>ctrl</kbd>
 <var>i</var>
 </p>
?

H5新增語義元素

<mark>：標記重點。
<time>：標注時間。
datetime：提供格式化的時間，內容本身格式標準，可以不使用此屬性。
pubdate：boolean 是否是發布日期
<details>與<summary>：摘要與詳情，如果摘要放在詳情里，摘要可見，點擊摘要顯示詳情。
<ruby>、<rtc>、<rb>、<rt>和<rp>元素：用于為東亞文字定義解釋。
<bdi>:將一段文本隔離出來設置屬性。
<wbr>：建議換行。（可使得瀏覽器在單詞中間換行）
<menu>和<menuitem>:用來定義菜單和菜單項。暫無瀏覽器支持。支持如下屬性：
type：三個值，radio、checkbox、command（默認值）
label：指定菜單項文本
icon：指定菜單項圖標。
disabled：指定菜單項是否不可用。
checked：type為checkbox或radio時候有意義
radiogroup：type為radio時候有意義，指定菜單項所屬分組。
default：指定默認菜單項。

這是一個<mark>重點</mark>
 <time pubdate="true" datetime="2019-10-14 22:05">2019-10-14 22:05</time>
 <details>
 <summary>摘要</summary>
 這是詳情、、、、
 </details>
 <ruby>
 <rb>饕</rb>
 <rp>(</rp>
 <rt>tao</rt>
 <rp>)</rp>
 <rb>餮</rb>
 <rp>(</rp>
 <rt>tie</rt>
 <rp>)</rp>
 </ruby>

H5新增結構元素

沒啥好說的，見名知其意，解決以前全用div語義化缺失的問題。

<article>：一塊獨立內容；
<section>：幾塊分開內容；
<header>、<footer>、<header>、<nav>、<aside>
<figure>和<figcaption>：定義圖片區域，<figcaption>是標題

看到這里了，關注吧，由淺入深，持續更新一起學習進步。如果有什么建議和補充，請積極評論。

在線咨詢

上一篇：丟掉JS，CSS也可以獨立完成許多牛掰的功能
下一篇：男朋友老是說自己R語言很6，快來用這40道題目檢測他

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

29. 教你零基礎搭建小程序：小程序的常見組件—radio

TML元素介紹（一）

您的項目需求