小程序组件

微信小程序内置了很多组件，开发中可以直接使用他们来展示响应的内容

视图容器

scroll-view

滚动组件，可滚动视图区域

<!-- wxml -->
<!-- scroll-view横向滚动 
-->
<scroll-view class="scroll-view" scroll-x="{{true}}">
  <view class="scroll-item red"></view>
  <view class="scroll-item green"></view>
  <view class="scroll-item yellow"></view>
  <view class="scroll-item black"></view>
  <view class="scroll-item blue"></view>
  <view class="scroll-item orange"></view>
</scroll-view>

<!-- scroll-view纵向滚动 -->
<scroll-view class="scroll-view-y" scroll-into-view="yellow" scroll-y="{{true}}" >
  <view class="scroll-item-y red"></view>
  <view class="scroll-item-y green"></view>
  <view id="yellow" class="scroll-item-y yellow"></view>
  <view class="scroll-item-y black"></view>
  <view class="scroll-item-y blue"></view>
  <view class="scroll-item-y orange"></view>
</scroll-view>

/* wxsss */
.scroll-view {
  width: 100%;
  height: 100px;
  white-space: nowrap;
}
.scroll-view .scroll-item {
  display: inline-block;
  width: 100px;
  height: 100px;
}
.red {
  background: red;
}
.green {
  background: green;
}
.yellow {
  background: yellow;
}
.black {
  background: black;
}
.blue {
  background: blue;
}
.orange {
  background: orange;
}
/* scroll-view纵向滚动 */
.scroll-view-y {
  width: 100%;
  height: 300px;
  background: palegoldenrod;
  white-space: nowrap;
}
.scroll-view-y .scroll-item-y {
  width: 100%;
  height: 180px;
}
.red {
  background: red;
}
.green {
  background: green;
}
.yellow {
  background: yellow;
}
.black {
  background: black;
}
.blue {
  background: blue;
}
.orange {
  background: orange;
}

swiper

轮播图组件

<!-- wxml -->
<view>
  <swiper indicator-dots="true" indicator-active-color="red" autoplay="true" interval="1000">
    <!-- 图片链接来自百度图片 -->
    <view wx:for="{{image}}" wx:for-item="item" wx:key="key">
       <swiper-item>
          <image src="{{item}}"></image>
        </swiper-item>
    </view>
  </swiper>
</view>

/* wxss */
image{
  width: 100%;
  height: 100%;
}

// js
data: {
    image:[
      'https://t7.baidu.com/it/u=2604797219,1573897854&fm=193&f=GIF',
      'https://t7.baidu.com/it/u=2942499027,2479446682&fm=193&f=GIF',
      'https://t7.baidu.com/it/u=3165657288,4248157545&fm=193&f=GIF'
    ]
}

view

视图容器

<view class="test">
  1
</view>

.test{
  width: 200px;
  height: 200px;
  background-color: aqua;
}

基础内容

icon

图标。组件属性的长度单位默认为px

<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>

.intro {
  margin: 30px;
  text-align: center;
}

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'
    ]
  }
})

progress

进度条。组件属性的长度单位默认为px

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

progress {margin: 10px;}

rich-text

富文本

<rich-text nodes="{{nodes}}" bindtap="tap"></rich-text>

Page({
  data: {
    nodes: [{
      name: 'div',
      attrs: {
        class: 'div_class',
        style: 'line-height: 60px; color: red;'
      },
      children: [{
        type: 'text',
        text: 'Hello World!'
      }]
    }],
  },
  tap() {
    console.log('tap')
  }
})

text

文本

<text>文本</text>

text{
  color: red;
  background-color: aqua;
}

form表单

<form>
  <label for="name">姓名</label>
  <!-- 输入框 -->
  <input type="text" id="name" placeholder="请输入姓名" />
  <label for="pwd">密码</label>
  <input type="password" placeholder="请输入密码" id="id"/>
  <!-- 关联属性 -->
  <label>性别</label>
  <!-- 单项选择器 -->
  <radio-group>
    <radio value="1">男</radio>
    <radio value="2">女</radio>
  </radio-group>
  <label>爱好</label>
  <!-- 多项选择器 -->
  <checkbox-group>
    <checkbox value="1">看电影</checkbox>
    <checkbox value="2">打游戏</checkbox>
    <checkbox value="3">听音乐</checkbox>
  </checkbox-group>
  <!-- 滑动选择器 -->
  <slider max="100" min="1" show-value="true"></slider>
  <view class="section__title">时间选择器</view>
  <picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
    <view class="picker">
      当前选择: {{time}}
    </view>
  </picker>
  <label>开关</label>
  <switch></switch>
  <!-- 多行文本输入框 -->
  <textarea hold-keyboard="true" auto-focus="true">
</textarea>
</form>

bindTimeChange: function(e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      time: e.detail.value
    })
}