view

視圖容器。

示例：

在開(kāi)發(fā)者工具中預(yù)覽效果

<view class="section">
  <view class="section__title">flex-direction: row</view>
  <view class="flex-wrp" style="flex-direction:row;">
    <view class="flex-item bc_green">1</view>
    <view class="flex-item bc_red">2</view>
    <view class="flex-item bc_blue">3</view>
  </view>
</view>
<view class="section">
  <view class="section__title">flex-direction: column</view>
  <view class="flex-wrp" style="height: 300px;flex-direction:column;">
    <view class="flex-item bc_green">1</view>
    <view class="flex-item bc_red">2</view>
    <view class="flex-item bc_blue">3</view>
  </view>
</view>

image.png

scroll-view：

有時(shí)候我們的一些視圖在手機(jī)指定的寬度和高度不夠存放曙旭。那么可以放在 scroll-view 中盗舰。
設(shè)置橫向滾動(dòng)：

1. 給 scroll-view 添加 scroll-x="true" 屬性。
2. 給 scroll-view 添加 white-space:nowrap; 樣式夷狰。
3. 給 scroll-view 中的子元素設(shè)置為 display:inline-block; 岭皂。
   示例代碼如下：
   index.wxml代碼：

<scroll-view class='scroll-x-view' scroll-x>
<view class='scroll-view-item bg_red'></view>
<view class='scroll-view-item bg_blue'></view>
<view class='scroll-view-item bg_green'></view>
<view class='scroll-view-item bg_yellow'></view>
</scroll-view>

index.wxss代碼：

.scroll-x-view{
width: 100%;
height: 100px;
background: gray;
white-space: nowrap;
}
.scroll-x-view .scroll-view-item{
width: 200px;
height: 100px;
}
.bg_red{
background: red;
}
.bg_blue{
background: blue;
}
.bg_green{
background: green;
}
.bg_yellow{
background: yellow;
}

設(shè)置豎向滾動(dòng)：

1. 給 scroll-view 添加 scroll-y="true" 屬性郊霎。
2. 給 scroll-view 設(shè)置高度沼头。
   wxml 和 wxss 示例代碼如下：

<scroll-view class='scroll-x-view' scroll-y>
<view class='scroll-view-item bg_red'></view>
<view class='scroll-view-item bg_blue'></view>
<view class='scroll-view-item bg_green'></view>
<view class='scroll-view-item bg_yellow'></view>
</scroll-view>
.scroll-x-view{
width: 100%;
height: 200px;
background: gray;
}
.scroll-x-view .scroll-view-item{
width: 100%;
height: 100px;
}
.bg_red{
background: red;
}
.bg_blue{
background: blue;
}
.bg_green{
background: green;
}
.bg_yellow{
background: yellow;
}

scrolltoupper和scrolltolower事件：

鼠標(biāo)滾動(dòng)到距離頂部或者左邊、鼠標(biāo)滾動(dòng)到底部或者右邊多少距離的時(shí)候會(huì)執(zhí)行這個(gè)事件书劝。默認(rèn)的間隔是 50 像
素进倍。示例代碼如下：

<scroll-view class='scroll-x-view' scroll-y bindscrolltoupper="scrollToUpper">
<view style="height:1000px;">
</view>
</scroll-view>
Page({
scrollToUpper: function(event){
console.log(event);
}
});

bindscroll事件：
只要 scroll-view 發(fā)生了滾動(dòng)，就會(huì)執(zhí)行這個(gè)事件购对。

<scroll-view class='scroll-x-view' scroll-y bindscrolltoupper="scrollEvent">
<view style="height:1000px;">
</view>
</scroll-view>
Page({
scrollEvent: function(event){
console.log(event);
}
});

swiper組件

在 app 里面猾昆，輪播圖（ banner ）是非常常見(jiàn)的，因此小程序?qū)ｉT(mén)針對(duì)這個(gè)出了一個(gè)組件就是 swiper 骡苞。

swiper組件基本用法：

swiper 就是一個(gè)包裹輪播圖的容器垂蜗，里面的子元素必須是 swiper-item 組件。 swiper 可以自動(dòng)的輪播子元素解幽，并且
天生就帶有指示點(diǎn)贴见，還可以使用手指左右滑動(dòng)。下面用代碼的方式來(lái)演示一下：

<swiper class='swiper' style='width:NaNrpx;height:NaNrpx;' autoplay indicator-dots indicator-color='blue' indicator-a
ctive-color='red'>
<swiper-item>
<image src='https://static-image.xfz.cn/1539770831_872.jpg'></image>
</swiper-item>
<swiper-item>
<image src='https://static-image.xfz.cn/1541147489_121.jpeg'></image>
</swiper-item>
</swiper>
.swiper image{
width: 100%;
height: 100%;
}
Page({
data:{},
onLoad: function (options) {
var systemInfo = wx.getSystemInfoSync();
var windowWidth = systemInfo.windowWidth;
var width = windowWidth;
var height = width/4;
// 根據(jù)圖片的寬高比例設(shè)置swiper的寬高
this.setData({
width: width,
height: height
});
},
});

image.png

wiper

滑塊視圖容器躲株。

從 1.4.0 開(kāi)始助被，change事件返回detail中包含一個(gè)source字段，表示導(dǎo)致變更的原因切诀，可能值如下：

• autoplay 自動(dòng)播放導(dǎo)致swiper變化揩环；
• touch 用戶(hù)劃動(dòng)引起swiper變化；
• 其他原因?qū)⒂每兆址硎尽?/li>

注意：其中只可放置<swiper-item/>組件幅虑，否則會(huì)導(dǎo)致未定義的行為丰滑。

swiper-item

僅可放置在<swiper>組件中，寬高自動(dòng)設(shè)置為100%倒庵。

示例代碼：

在開(kāi)發(fā)者工具中預(yù)覽效果

<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(e) {
    this.setData({
      indicatorDots: !this.data.indicatorDots
    })
  },
  changeAutoplay(e) {
    this.setData({
      autoplay: !this.data.autoplay
    })
  },
  intervalChange(e) {
    this.setData({
      interval: e.detail.value
    })
  },
  durationChange(e) {
    this.setData({
      duration: e.detail.value
    })
  }
})

movable-view

基礎(chǔ)庫(kù) 1.2.0 開(kāi)始支持褒墨，低版本需做兼容處理。

可移動(dòng)的視圖容器擎宝，在頁(yè)面中可以拖拽滑動(dòng)

除了基本事件外蕉汪，movable-view提供了兩個(gè)特殊事件

movable-view 必須設(shè)置width和height屬性叠赦，不設(shè)置默認(rèn)為10px

movable-view 默認(rèn)為絕對(duì)定位驹马，top和left屬性為0px

注意：movable-view必須在<movable-area/>組件中，并且必須是直接子節(jié)點(diǎn)除秀，否則不能移動(dòng)糯累。

movable-area

基礎(chǔ)庫(kù) 1.2.0 開(kāi)始支持，低版本需做兼容處理册踩。

movable-view 的可移動(dòng)區(qū)域

注意：movable-area 必須設(shè)置width和height屬性，不設(shè)置默認(rèn)為10px

當(dāng)movable-view小于movable-area時(shí)暂吉，movable-view的移動(dòng)范圍是在movable-area內(nèi)胖秒；

當(dāng)movable-view大于movable-area時(shí)，movable-view的移動(dòng)范圍必須包含movable-area（x軸方向和y軸方向分開(kāi)考慮）

示例代碼：

在開(kāi)發(fā)者工具中預(yù)覽效果

<view class="section">
  <view class="section__title">movable-view區(qū)域小于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區(qū)域大于movable-area</view>
  <movable-area style="height: 100px; width: 100px; background: red;">
    <movable-view
      style="height: 200px; width: 200px; background: blue;"
      direction="all"
    ></movable-view>
  </movable-area>
  <view class="section__title">可放縮</view>
  <movable-area
    style="height: 200px; width: 200px; background: red;"
    scale-area
  >
    <movable-view
      style="height: 50px; width: 50px; background: blue;"
      direction="all"
      bindchange="onChange"
      bindscale="onScale"
      scale
      scale-min="0.5"
      scale-max="4"
      scale-value="2"
    ></movable-view>
  </movable-area>
</view>

Page({
  data: {
    x: 0,
    y: 0
  },
  tap(e) {
    this.setData({
      x: 30,
      y: 30
    })
  },
  onChange(e) {
    console.log(e.detail)
  },
  onScale(e) {
    console.log(e.detail)
  }
})