微信小程序之组件

1.view

把文档分割为独立的、不同的部分。

view组件类似于html中的div标签，默认为块级元素，独占一行，可以通过设置display:inline-block改为行级元素。

• view.wxml代码如下：

<view class="outerView">
    <view class="innerView1"></view>
    <view class="innerView2"></view>
    <view class="innerView3"></view>
<view>

• view.wxss代码如下

.outerView{
    width:100%;height: 100px;margin: 0 auto;background-color: brown; 
}
.innerView1{
    width: 40%;height: 40px;background: blue;display: inline-block;
}
.innerView2{
    width: 40%;height: 40px;background: yellow;display: inline-block;
}
.innerView3{
    width: 40%;height: 40px;background: peru;
}

• 显示效果：

2.scroll-view

可滚动（点击滑动）视图区域。

• 官方给出的属性列：

•  scroll-view.wxml代码如下：

<view class="section">
    <scroll-view scroll-y="true" style="height: 200px;" bindscrolltoupper="upper"
     bindscrolltolower="lower" bindscroll="scroll" lower-threshold="50"  scroll-into-view="{{toView}}"
      scroll-top="1000px">
        <view id="green" class="scroll-view-item bc_green" style="100px;height:100px;background:red"></view>
        <view id="red"  class="scroll-view-item bc_red" style="100px;height:100px;background:blue"></view>
        <view id="yellow" class="scroll-view-item bc_yellow" style="100px;height:100px;background:yellow"></view>
    </scroll-view>
</view>
<view class="section section_gap">
    <scroll-view class="scroll-view_H" scroll-x="true" style=" white-space: nowrap" >
        <view id="green" style="400px;height:100px;background:red;display: inline-block"></view>
        <view id="red"  style="400px;height:100px;background:blue;display: inline-block"></view>
    </scroll-view>
</view>

• scroll-view.js代码如下：

Page({
  data: {
    toView: "red",//设置初始滑动区顶部显示的view，可通过this.setdata({toView:"blue"})来改变
    scrollTop: 10,
    threshold:0
  },
  upper: function(e) {
    console.log("到达顶部")
  },
  lower: function(e) {
    console.log("到达底部")
  },
  scroll: function(e) {
    console.log("一次滑动结束")
  }
})

• 运行效果：

 

3.swiper

滑动面板，定时滑动切换图片或手动滑动切换图片。

• swiper.wxml

<!--indicator-dots是否显示圆点，autoplay自动播放，current初始显示的item（0代表第一个item）, duration滑动速度， bindchange监听滚动和点击事件，interval滑动间隔时间-->
<swiper indicator-dots="true" autoplay="true" current="1" duration="1000" bindchange="listenSwiper" interval="2000">
<!--swiper-item只能包含一个节点再多会自动删除-->
   
    <swiper-item>
        <view style="height: 150px"><image src="../../pic/pic2.png" style="100%;height:100%"/></view>
    </swiper-item>
    <swiper-item>
         <view style="height: 150px"><image src="../../pic/pic1.png" style="100%;height:100%;"/>
         </view>
    </swiper-item>
     <swiper-item>
          <view style="height: 150px"><image src="../../pic/pic3.png"  style="100%;height:100%;"/>
          </view>
    </swiper-item> 
</swiper>

• 运行效果：

4.icon，text，progress，checkbox，input，readio-group，slider，switch

<!-- type=[ 'success', 'info', 'warn', 'waiting', 'safe_success', 'safe_warn',
'success_circle', 'success_no_circle', 'waiting_circle', 'circle', 'download',
'info_circle', 'cancel', 'search', 'clear'] -->
<icon type="success" size="23" color="red"/>
<view><text>可以长按选中</text></view>
<!-- percent:百分比，active:是否显示从左往右的动画（但是经过测试无论设置为true还是false动画都会显示，去掉该属性则不显示动画），showInfo：是否显示百分比，strokeWidth：进度条宽度 -->
<progress percent="100" active="false" showInfo="true" strokeWidth="7" />
<!-- type：[primary, default, warn],size:[default,mini],loading:按钮前是否带loading图标,plain:按钮是否镂空，disabled：是否生效，formType:[submit,reset],hover-class:按下时的样式类名 -->
<button type="warn" size="mini" loading="true" plain="true" disabled="true" bindtap="default" formType="reset" hover-class="none"> default </button>
<!-- disabled:不可选中，value：当value改变时触发bindchange绑定的函数 -->
<checkbox-group bindchange="checkboxChange">
    <label class="checkbox" wx:for-items="{{[1,2,3,4,5]}}">
        <checkbox value="{{item}}" checked='false' disabled="true"/>{{item}}
    </label>
</checkbox-group>

<input placeholder="禁用了的input" value="禁用了的input" type="text" auto-focus/>

<radio-group bindchange="test">
    <label class="radio" wx:for-items="{{[1,2,3,4]}}">
        <radio value="{{item}}" checked="true"/>{{item}}
    </label>
</radio-group>

<!-- disabled:禁用无法滑动，step:步长如果设置为2则显示value为50 52 54...
     show-value:是否显示当前值
 -->
<slider bindchange="test" min="50" max="200" show-value step="2"/>

<!-- type:[checkbox,switch]两种样式，disabled,checked -->
<switch checked="true" bindchange="test" type="checkbox"/>
<switch checked="true" bindchange="test" type="switch"/>