小程序4.

学习小程序第四天

小程序的视图组件

一，icon组件

icon的九大图标
第一步在data存入九大图表数据

// pages/icon/icon.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    /*icon九大图标*/
    types:["success","success_no_circle","info","warn","waiting","cancel","download","search","clear"

    ],

第三步设计组件样式

/* pages/icon/icon.wxss */
.container{
  display: flex;
  flex-wrap: wrap;
 flex-direction: row;
}
.icon{
  margin: 15rpx;
}

第二部设置组件

<!--pages/icon/icon.wxml-->
<view class="container">
<view class="icon" wx:for="{{types}}">
<icon color="green" size="40" type="{{item}}"></icon>
</view>
</view>

效果

text组件

text组件组要展示文本，在测试工程中新建一个text页面。

<text style="color:aquamarine ;font-size:80rpx;">文本<text style="color:rgb(146, 127, 255) ;font-size:100rpx;">内文本</text></text>

效果

text组件只能嵌套text组件，通过text组件的嵌套可以在一段文本设置不同风格的多块文本块。
默认文本组件只能进行文本显示，不可以进行交互。但可以添加selectable属性支持文本选中，选中的文本可以进行复制，查询等操作。

rich-text组件

<!--pages/icon/icon.wxml-->
<rich-text nodes="{{nodes}}"></rich-text>

// pages/icon/icon.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    /*icon九大图标*/
   /* types:["success","success_no_circle","info","warn","waiting","cancel","download","search","clear"

    ],*/
    //进行节点的数据定义
    nodes:[
{
  //节点的数据类型
  type:"node",
  //定义结点的名称
  name:"h1",
  //定义节点的属性
  attrs:{
    style:"color:red;"
  },
  children:[
    {
      type:"text",
      text:"HelloWorld"
    }
  ]

},  
{
  type:"text",
  text:"hi"
}
    ]

  },

JS 文件用于存储数据。注释/内容，多行注释/单行注释：//内容

rich-text组件支持HTML标签

progress组件

progress组件用来创建进度条视图，其使用非常简单并且提供了丰富可定制化的属性。

<!--pages/icon/icon.wxml-->
<progress style="margin:50rpx;"percent="10"show-info="{{true}}"stroke-width='20'></progress>

progress组件常用属性

button组件

<!--pages/icon/icon.wxml-->
<button style="margin:30rpx;"type="warn"size="default"plain="{{true}}" loading="{{ture}}" open-type="share">警告按钮</button>

button属性

名称	意义	属性值
size	设置组件的尺寸大小	default默认按钮尺寸组件，mini小尺寸按钮
type	设置按钮的风格	primary风格的按钮被渲染成绿色，default风格的按钮被渲染成白色，warm风格的按钮被渲染成红色

用户输入相关组件

用户与程序交互的模式有两种：通过手势进行交互或通过输入数据进行交互。本节主要介绍小程序开发中常用的 用户输入相关组件，如为用户提供选择的选择组件，进行用户输入的表单组件。

checkbox组件

checkbox组件用来创建复选框。复选框是指一组支持多选的选项列表。

<checkbox-group style="margin:30rpx;"bindchange="change">
体育运动：
<checkbox value="1" checked="{{true}}" >足球</checkbox>
<checkbox value="2"color="green">篮球</checkbox>
<checkbox value="3">篮球</checkbox>
</checkbox-group>

checkbox组件的属性

radio组件

checkbox创建多选组件，radio组件创建单选组件。radio的用法语checkbox用法一致

<radio-group style="margin:30rpx;"bindchange="change">
体育运动：
<radio value="1" checked="{{true}}" >足球</radio>
<radio value="2"color="green">篮球</radio>
<radio value="3">篮球</radio>
</radio-group>

radion组件也需要放在radion-group组件中组成单选组件。radio-group也可以绑定bind-change属性设置用户选择的回调函数。回调函数回调函数会把用户选中的value值包装在事件对象传入中。
radio组件shuxing

input组件获取用户键盘输入信息

<input style="background-color:#fafafa;color:gray;height:45rpx;" placeholder="输入内容"></input>

switch组件

switch组件创建开关视图

开关组件<switch type="switch"bindchange="change"></switch>

switch的常用属性

lable组件

在这里插入代码片<view >
<label>
<checkbox-group  style="margin:30rpx;"bindchange="change">体育
<checkbox  value="1" checked="{{true}}">足球</checkbox>
<checkbox value="2"color="green">篮球</checkbox>
<checkbox value="3"color="green">排球</checkbox>
</checkbox-group>
</label>
<label for="radio">for属性关联单选框</label>
<radio-group style="margin:30rpx;"bindchange="change">体育
<radio  value="1" checked="{{true}}" >排球</radio>
<radio  value="2" checked="{{true}}" >足球</radio>
</radio-group>
<radio for="switch">控制开关图标
<icon type="warn"></icon>
</radio>
<switch id="switch"></switch>
</view>

slider组件

slider组件允许用户拖拽的方式设置滑块的值，，并且提供了丰富的接口对其却只范围，步长，颜色的设定

<slider show-value="{{true}}" backgroundColor="red" value="50" activeColor="blue" block-color="green"></slider>

slider属性

textarea组件

textarea组件的作用与使用import的作用一致的

<textarea style="background-color:aqua;padding:0;width:100%;"placeholder="输入文本"></textarea>

选择器组件

小程序组件库提供了丰富的组件库：如时间选择，日期选择，城市选择，自定义选择器。
普通选择器picker

<!--moode:不同模式，selector普通模式选择期 range不同属性-->
<picker mode="selector" value="{{index}}" range="{{data}}" bindchange="change">选择性别：{{data[index]}}</picker>

  data: {
    data:["男","女","未知"],
    index:1

  },
change:function(event){
    this.setData({
        index:event.detail.value
      });
      },

模拟器上不显示，真机调试可以

range属性设置为对象；

<picker mode="selector" value="{{index}}" range="{{data2}}"  range-key='key' bindchange="change"> 选择性别：{{data2[index]["value"]}}</picker>

 data: {
    data2:[
      {
        key:"boy",
        value:"男"
      },{
      key:"girl",
      value:"女"
      }],
    index:0

  },
  change:function(event){
    this.setData({
        index:event.detail.value
      });
      },

模拟器上不显示，真机调试可以
普通模式下选择器组件的常用属性

多列选择器

  data: {
    city:[
      [
        "A1","a1"
      ],
      [ "B1","b1"],
      ["S ","7"]
  
    ],
    currentCity:[0,1]

  },

<picker mode="multiSelector" range="{{city}}" value="{{currentCity}}" bindchange="changeCity">
地址选择：{{city[0][currentCity[0]]}},{{city[1][currentCity[1]]}}</picker>

模拟器上不显示，真机调试可以

多模式下的选择器组件的常用属性

时间选择器time

时间选择器专门为用户提供时间选择。需要把picker 中的mode属性设置为time

<picker mode="time" bindchange="changeTime">shijia{{}}</picker>

模拟器上不显示，真机调试可以

属性

日期选择

日期选择为用户提供了年月日，需要把picker 中的mode属性设置为data

<picker mode="date" >日期选择</picker>

属性

地区选择

<picker mode="region" fields="year">地区选择</picker>

属性

选择组件

picker-view组件的属性