首页 > 代码库 > 小程序学习（二）

小程序学习（二）

2024-10-13 10:11:39   210人阅读

今天继续学习小程序,上次讲到小程序中的视图容器,接下来要说的是关于第二大部分：基础内容

基础内容中也包括了三部分：1.icon 2.text 3.progress

icon:图标 

属性名类型默认值说明
type String   icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear
size Number 23 icon的大小，单位px
color Color   icon的颜色，同css的color

示例：

<view class="group">
  <block wx:for="{{iconSize}}">
    <icon type="success" size="{{item}}"/>
  </block>
</view>

<view class="group">
  <block wx:for="{{iconType}}">
    <icon type="{{item}}" size="40"/>
  </block>
</view>


<view class="group">
  <block wx:for="{{iconColor}}">
    <icon type="success" size="40" color="{{item}}"/>
  </block>
</view>
Page({
  data: {
    iconSize: [20, 30, 40, 50, 60, 70],
    iconColor: [
      ‘red‘, ‘orange‘, ‘yellow‘, ‘green‘, ‘rgb(0,255,255)‘, ‘blue‘, ‘purple‘
    ],
    iconType: [
      ‘success‘, ‘success_no_circle‘, ‘info‘, ‘warn‘, ‘waiting‘, ‘cancel‘, ‘download‘, ‘search‘, ‘clear‘
    ]
  }
})

text:文本

属性名类型默认值说明最低版本
selectable Boolean false 文本是否可选 1.1.0

支持转义符"\"。<text/> 组件内只支持 <text/> 嵌套。除了文本节点以外的其他节点都无法长按选中。

示例：

<view class="btn-area">
  <view class="body-view">
    <text>{{text}}</text>
    <button bindtap="add">add line</button>
    <button bindtap="remove">remove line</button>
  </view>
</view>
var initData = http://www.mamicode.com/‘this is first line/nthis is second line‘"color: #0000ff">var extraLine = [];
Page({
  data: {
    text: initData
  },
  add: function(e) {
    extraLine.push(‘other line‘)
    this.setData({
      text: initData + ‘\n‘ + extraLine.join(‘\n‘)
    })
  },
  remove: function(e) {
    if (extraLine.length > 0) {
      extraLine.pop()
      this.setData({
        text: initData + ‘\n‘ + extraLine.join(‘\n‘)
      })
    }
  }
})

progress:进度条

属性名类型默认值说明
percent Float 无 百分比0~100
show-info Boolean false 在进度条右侧显示百分比
stroke-width Number 6 进度条线的宽度，单位px
color Color #09BB07 进度条颜色 （请使用 activeColor）
activeColor Color   已选择的进度条的颜色
backgroundColor Color   未选择的进度条的颜色
active Boolean false 进度条从左往右的动画

示例：

<progress percent="20" show-info />
<progress percent="40" stroke-width="12" />
<progress percent="60" color="pink" />
<progress percent="80" active />

表单组件:

其中主要包括一下几个部分：

1.button(按钮)

2.checkbox(多项选择器)内部由多个checkbox组成。

3.form(表单)将组件内的用户输入的<switch/> <input/> <checkbox/> <slider/> <radio/> <picker/> 提交。当点击 <form/> 表单中 formType 为 submit 的 <button/> 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。

4.input(输入框)

5.label() 用来改进表单组件的可用性，使用for属性找到对应的id，或者将控件放在该标签下，当点击时，就会触发对应的控件。for优先级高于内部控件，内部有多个控件的时候默认触发第一个控件。目前可以绑定的控件有：<button/>, <checkbox/>, <radio/>, <switch/>。

6.picker 从底部弹起的滚动选择器，现支持三种选择器，通过mode来区分，分别是普通选择器，时间选择器，日期选择器，默认是普通选择器。

7.picker-view(嵌入页面的滚动选择器)

8.radio-group (单项选择器) 内部由多个<radio/>组成。

9.silder(滑动选择器)

10.switch(开关选择器)

11.textarea(多行输入框)

这里就简单介绍到这里，至于其中所包含的属性内容过多，建议有需要的到网上搜索一下。

 

小程序学习（二）


联系
我们