微信小程序学习记录（4）基础组件之视图容器

基础组件

---

组件是视图层的基本组成单元。

组件自带一些功能与微信风格的样式。

一个组件通常包括开始标签和结束标签，属性用来修饰这个组件，内容在两个标签之内。

 

视图容器--view, scroll-view, swiper ,movable-area,cover-view

---

scroll-view 可滚动视图区域

其中bindscrolltoupper和bindscrolltolower必须给scroll-view设置高度，不然无法触发

 

<!--垂直滚动，这里必须设置高度-->
<text bindtap='click'>垂直方向</text>
<scroll-view scroll-y="true" style="height: 300px" scroll-top="30px"
    bindscrolltoupper="upper"
    bindscrolltolower="lower"
    scroll-into-view="{{toView}}"
    scroll-top="{{scrollTop}}"
    bindscroll="scroll">
    <view id='test' class="item"></view>
    <view id='test1' class="item1"></view>
    <view id='test2' class="item2"></view>
    <view  id='test3' class="item3"></view>
    <view  id='test4' class="item4"></view>
    <view  id='test5' class="item5"></view>
</scroll-view>
 
<!--水平滚动-->
<text>水平方向</text>
<scroll-view scroll-x="true" style=" white-space: nowrap">
  <image src='https://github.com/leon5458/my_use_image/blob/master/my_use_image/a2.jpg?raw=true' class='img1'></image>

    <image src='https://github.com/leon5458/my_use_image/blob/master/my_use_image/a1.jpg?raw=true' class='img1'></image>

      <image src='https://github.com/leon5458/my_use_image/blob/master/my_use_image/a3.jpg?raw=true' class='img1'></image>

        <image src='https://github.com/leon5458/my_use_image/blob/master/my_use_image/1.jpg?raw=true' class='img1'></image>

</scroll-view>


<!--水平滚动-->
<scroll-view scroll-x="true" style=" white-space: nowrap; display: flex" >
 
  <view style="background: red; width: 200px; height: 100px; display: inline-block" ></view>
  <view style="background: green; width: 200px; height: 100px; display: inline-block"></view>
  <view style="background: blue; width: 200px; height: 100px; display: inline-block"></view>
  <view style="background: yellow; width: 200px; height: 100px; display: inline-block"></view>
</scroll-view>

Bug&Tip

1，请勿在scroll-view中使用textarea，map，canvas，video中

2，scroll-into-view的优先级高于scroll-top

3，在滚动scroll-view时会阻止页面回弹，所以在scroll-view中滚动，是无法触发onPullDownRefresh

4， 若要使用下拉刷新，请使用页面的滚动，而不是scroll-view，这样也能通过点击顶部状态栏回到页面顶部

swiper 轮播图

swiper滑块视图容器

注意：其中只可放置<swiper-item/>组件，否则会导致未定义的行为

示例代码

<swiper indicator-dots="{{indicatorDots}}"
  autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  <block wx:for="{{imgUrls}}">
    <swiper-item>
      <image src="{{item}}" class="slide-image" width="355" height="150"/>
    </swiper-item>
  </block>
</swiper>
<button bindtap="changeIndicatorDots"> indicator-dots </button>
<button bindtap="changeAutoplay"> autoplay </button>
<slider bindchange="intervalChange" show-value min="500" max="2000"/> interval
<slider bindchange="durationChange" show-value min="1000" max="10000"/> duration

Page({
  data: {
    imgUrls: [
      'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
    ],
    indicatorDots: false,
    autoplay: false,
    interval: 5000,
    duration: 1000
  },
  changeIndicatorDots: function(e) {
    this.setData({
      indicatorDots: !this.data.indicatorDots
    })
  },
  changeAutoplay: function(e) {
    this.setData({
      autoplay: !this.data.autoplay
    })
  },
  intervalChange: function(e) {
    this.setData({
      interval: e.detail.value
    })
  },
  durationChange: function(e) {
    this.setData({
      duration: e.detail.value
    })
  }
})

 

movable-area

movable-view 可移动区域

注意：movable-area必须设置width和height属性，不设置默认为10px

movable-view

可移动的视图容器，在页面中可以拖拽滑动

注意：

movable-view 必须设置width和height属性，不设置默认为10px

movable-view 默认为绝对定位，top和left属性为0px

当movable-view小于movable-area时，movable-view的移动范围是在movable-area内；当movable-view大于movable-area时，movable-view的移动范围必须包含movable-area（x轴方向和y轴方向分开考虑）

重点：movable-view必须在<movable-area/>组件中，并且必须是直接子节点，否则不能移动。

示例代码

<view class="section">
  <view class="section__title">movable-view区域小于movable-area</view>
  <movable-area style="height: 200px;width: 200px;background: red;">
    <movable-view style="height: 50px; width: 50px; background: blue;" x="{{x}}" y="{{y}}" direction="all">
    </movable-view>
  </movable-area>
  <view class="btn-area">
    <button size="mini" bindtap="tap">click me to move to (30px, 30px)</button>
  </view>
  <view class="section__title">movable-view区域大于movable-area</view>
  <movable-area style="height: 100px;width: 100px;background: red;" direction="all">
    <movable-view style="height: 200px; width: 200px; background: blue;">
    </movable-view>
  </movable-area>
</view>

Page({
  data: {
    x: 0,
    y: 0
  },
  tap: function(e) {
    this.setData({
      x: 30,
      y: 30
    });
  }
})

cover-view

覆盖在原生组件之上的文本视图，可覆盖的原生组件包括map,video，canvas，支持嵌套

cover-image

覆盖在原生组件之上的图片视图，可覆盖的原生组件同cover-view，支持嵌套cover-view

Bug&Tips

1,只可嵌套在原生组件map,video，canvas内，避免嵌套在其他组件内

2，事件模型遵循冒泡模型，但不会冒泡到原生组件

3，只支持基本的定位，布局，文本样式。不支持单边的border，opacity，background-image等

4， 建议子节点不要溢出父节点