本节知识点

• 视图容器
• 基础内容
• 表单组件
• 导航
• 媒体组件
• 地图
• 画布
• 开放数据
• 客服会话

###（1）组件概述

概述: 框架为开发者提供了一系列基础组件。开发者可以通过这些基础组件快速开发。
1.组件是视图层的基本组成单元。
2.组件是自带一些功能与微信风格的样式。
3.一个组件通常包括开始标签和结束标签。属性用来修饰这个组件。内容在两个标签之内。

<tagname propety="value">
Content goes here
</tagname>

如组件就可以如下书写。

<view class="container"></view>

所有组件与属性都是小写，以连字符-连接。
属性:
1.属性类型
2.共同属性
3.特殊属性

（2）视图容器

view 视图容器

• 组件之view，view是视图容器。所谓容器就是页面上用来划分区域的块,view就是用来将页面划分块的，使用view，我们可以将一个页面按照我们的需要划分成多个区块。在不同的区块，存放我们相应的内容。类似HTML里面的div
• hover-class 类型string 默认值none 指定按下去的样式类。当hover-class = “none”时候，没有点击态效果
• hover-stop-propagation 类型Boolean false 指定是否阻止本节点的祖先节点数显点击态
• hover-start-time 默认值50 按住后多久出现点击态，单位毫秒
• hover-stay-time 默认值400 手指松开后点击态保留时间。单位毫秒

scroll-view 可滚动视图的区域

• 组件之scroll-view 这个标签不支持flex布局。必须要在里面在套一层view标签才可以实现view布局。横向的需要子元素撑开
  scroll-view具有view相同的功能。但是它是可以滚动的。使用竖向滚动的时候，需要给一个固定高度,通过wxss设置height

• scroll-x
  类型Boolean 默认值false 允许横向滚动

• scroll-y
  类型Boolean 默认值false 允许纵向滚动

• upper-threshold
  类型Numer 默认值50 距离顶部/左边多远(单位PX)触发scrolltoupper事件

• lower-threshold
  类型Number 默认值50 距离底部/右边多远(单位PX)触发scrolltolower事件

• scroll-top
  类型Number 设置竖向滚动条位置

• scroll-left
  类型Number 设置横向滚动条位置

• scroll-into-view
  类型String 值应为某子元素id（id不能用数字开头）设置哪个方向可滚动，则在哪个方向滚动到该元素

• scroll-with-animation
  类型Boolean 默认值false 在设置滚动条位置时候使用动画过渡。

• enable-back-to-top
  类型Boolean 默认值是false IOS点击顶部状态栏。安卓双击标题栏，滚动条返回顶部，只支持竖向。

• bindscrolltoupper
  类型EventHandle 滚动到顶部/左边。触发scrolltoupper事件.

• bingdscrolltolower
  类型:EventHandlw滚动到底部/右边。会触发scrolltolower事件

• bindscroll
  类型:EventHandle 滚动时候触发。

使用竖向滚动的时候需要给容器一个固定高度，通过wxss设置height,

下面见实例代码:

index.html文件里面
<!--index.html-->
<view class="container">
<!--纵向滚动-->
 <scroll-view scroll-y style="height:400rpx;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
   <view class="part1">
     <view id="red"class="scroll-item">1</view>
      <view class="scroll-item">2</view>
       <view class="scroll-item">3</view>
        <view class="scroll-item">4</view>
         <view class="scroll-item">5</view>
   </view>
 </scroll-view>
<!--纵向滚动结束-->
<view class="part2">

</view>
<!--横向滚动-->
 <scroll-view scroll-x style='width:100%;'>

   <view class="part3">
     <view class="scroll-item1">1</view>
      <view class="scroll-item1">2</view>
       <view class="scroll-item1">3</view>
        <view class="scroll-item1">4</view>
         <view class="scroll-item1">5</view>
   </view>
</scroll-view>
<!--横向滚动结束-->
</view>

下面是index.js

//index.js
//获取应用实例
Page({
  data: {
    toView: 'red',
    upper:200,
    scrolltop:200
  }
  top:function(){
    console.log("距离顶部200的位置");
  },
  tapMove:function(){
     this.setData({
       scrolltop:this.data.scrolltop+100
     })
  }
})

下面是index.wxss文件

.container{
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-around;
  align-content: space-around;
}
.part1{
  flex:1 1 400rpx;
  width:100%;
  background:red;
  display: flex;
  flex-flow: column nowrap;
}
.scroll-item{
  flex: 0 1 200rpx;
  background:blue;
  width:100%;
}
.part2{
  flex:1 1 300rpx;
  width:100%;
  background:yellow;
}
.part3{
  flex:1 1 200rpx;
  width:100%;
  display: flex;
  flex-flow: row nowrap;
}
.scroll-item1{
  flex: 0 0 200rpx;
  border:1px solid white;
  margin-right:10px;
  background:blue;
  height:200rpx;
  background:red;
}

Swiper 滑块容器

• swiper是滑块视图容器
• 它可以通过手指对于屏幕的滑动达到切换容器内的效果其中只可以放置组件，其他节点会被自动删除。
• swiper-item仅可放置在组件中，宽高设置为100%要是想循环，请把循环加在他的上面wx:for

Swiper属性

• indicator-dots
  类型Boolean 默认值false 说明是否显示面板指示点
• autoplay
  类型Boolean 默认值false 是否自动切换
• current
  类型Number 默认值 0 当前所在页面的index
• interval
  类型Number 默认值 5000 自动切换时间间隔
• duration
  类型Number 默认值 1000 滑动动画时长
• bindchange
  类型EventHandle current改变时会触发change事件，event.detail = {current:current}

<!--swiperhtml文件-->
<!--pages/swiper/swiper.wxml-->
<view class="container">
<swiper class="swiperall" indicator-dots='{{anniu}}'autoplay='{{autoplay}}'interval='{{interval}}'duration='{{duration}}'>
<swiper-item wx:for="{{textall}}">
   <view class="swiper1">
        <text>{{item}}</text>
   </view>
</swiper-item>
</swiper>
<!--按钮开始-->
<view>
 <button type="primary" bindtap="changebutton">changebutton</button>
 <button type="primary" bindtap="changeAutoPlay">changeAutoPlay</button>
</view>
<!--按钮结束-->
<!--滑块开始-->
<view>
 <slider bindchange='changeInterval'show-value min="500"max="2000">changeInterval</slider>
  <slider bindchange='changeduration'show-value min="1000"max="10000">changeDuration</slider>
</view>
<!--滑块结束-->
</view>

swiper.css文件

/* pages/swiper/swiper.wxss */
.container{
  display:flex;
  flex-flow: column nowrap;
  justify-content: space-around;
  align-content: space-around;
}
.swiperall{
height:300rpx;
width:100%;
flex-flow:row wrap;
justify-content: space-around;
align-content: space-around;
}
.swiper1{
  width:100%;
  height:100%;
  background:pink;
  font-size: 18px;
  text-align:center;
  color:white;
  line-height:300rpx;
}

swiper.js文件

// pages/swiper/swiper.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
       "textall":["1","2","3","4"],
       "anniu":true,
       "autoplay":true,
       "interval":5000,
       "duration":1000
  },
  /*轮播开始*/
  changebutton:function(){
    this.setData({
      anniu:!this.data.anniu
    })
  },
  changeAutoPlay:function(){
     this.setData({
       autoplay:!this.data.autoplay
     })
  },
  changeInterval:function(e){
    this.setData({
      interval:e.detail.value
    })
  },
  changeduration:function(e){
      this.setData({
        duration: e.detail.value
      })
  },
  /*轮播结束*/
})

自定义轮播 简单来说就是改变swiper上面current的值。但是自定义的就没有办法加定时器了

<!--pages/lunbo/lunbo.wxml-->
<view class="container">
  <view class="wrap">
  <!--内容开始-->
  <swiper class="wrap_content" bindchange="swiperchange" current="{{swiperCurrent}}">
    <swiper-item>
        <view class="wrap_content_1">1</view>
    </swiper-item>
        <swiper-item>
        <view class="wrap_content_1">2</view>
    </swiper-item>
        <swiper-item>
        <view class="wrap_content_1">3</view>
    </swiper-item>
        <swiper-item>
        <view class="wrap_content_1">4</view>
    </swiper-item>
        <swiper-item>
        <view class="wrap_content_1">5</view>
    </swiper-item>
  </swiper>   
    <!--内容结束-->
    <!--左边箭头开始-->
    <view class="left" bindtap = "Changeleft">
    左
    </view>
    <!--左边箭头结束-->
    <!--右边箭头开始-->
     <view class="right" bindtap = "Changeright">
    右
     </view>
    <!--右边箭头结束-->   
  </view>
</view>

index.js文件

// pages/lunbo/lunbo.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
     swiperCurrent:0
  },
  /*右边按钮开始*/
  Changeright:function(e){
       var swiperindex = this.data.swiperCurrent;
       console.log(swiperindex);
       swiperindex++;
       if(swiperindex>4)
       {
        swiperindex=0;
       }
      this.setData({
        swiperCurrent:swiperindex
      })
  },
  /*左边按钮开始*/
  Changeleft: function (e) {
    var swiperindex = this.data.swiperCurrent;
    console.log(swiperindex);
    swiperindex--;
    if (swiperindex <0) {
      swiperindex = 4;
    }
    this.setData({
      swiperCurrent: swiperindex
    })
  },
  /*给swiper容器绑定好了,只要改变就都改变*/
  swiperchange:function(e){
    this.setData({
      swiperCurrent: e.detail.current
    })
    console.log(this.data.swiperCurrent);
  }

index.css

/* pages/lunbo/lunbo.wxss */
.container{
  display: flex;
  flex-flow:column nowrap;
}
.wrap{
  width:100%;
  height:400rpx;
  position:relative;
}
.left{
  position:absolute;
  left:0px;
  width:100rpx;
  height:100rpx;
  top:150rpx;
  background:black;
  color:white;
  line-height:100rpx;
  text-align:center;
}
.right{
  position:absolute;
  right:0px;
  top:150rpx;
  width:100rpx;
  height:100rpx;
  background:black;
  color:white;
  line-height:100rpx;
  text-align:center;
}
.wrap_content{
  width:100%;
  height:400rpx;
  display: flex;
  flex-flow:row nowrap;
}
.wrap_content_1{
  width:100%;
  height:400rpx;
  background:red;
}

轮播从上到下

简单来说就是把vertical这个属性

<!--index.html-->
<view class="swipershangxia">
 <swiper class="swiperall_shang" vertical="{{true}}" indicator-dots="{{false}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
     <swiper-item wx:for="{{textall}}">
          <view class="swiper_shu">
          <text>{{item}}</text>
          </view>
     </swiper-item>
 </swiper>
</view>

下面是index.css文件

.swipershangxia
{
  flex:1 1 400rpx;
  width:100%;
  background:pink;
}
.swiperall_shang
{
  width:100%;
  height:400rpx;
  display:flex;
  flex-flow:column nowrap;
  justify-content: space-around;
  align-content: space-around;
}
.swiper_shu
{
  width:100%;
  height:400rpx;
  background:#ccc;
  color:white;
  text-align:center;
  line-height:400rpx;
}