【Kevin Learn 小程序】--＞scroll-view

效果图

属性

参考：scroll-view

实例

1. app.js

//app.js
App({
  onLaunch: function () {
    console.log('App Launch')
  },
  onShow: function () {
    console.log('App Show')
  },
  onHide: function () {
    console.log('App Hide')
  },
  globalData: {
    hasLogin: false
  }
})

2. app.json

{
  "pages": [
    "pages/scroll-view/scroll-view"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

3. scroll-view.wxml

<!--scorllview.wxml-->
<view>scroll-view组件</view>
<view class="section">
    <view class="section__title">竖向滚动</view>
    <scroll-view style="height: 200px;" 
        scroll-y
        bindscrolltoupper="upper" 
        bindscrolltolower="lower" 
        bindscroll="scroll" 
        scroll-into-view="{{toView}}"
        scroll-top="{{scrollTop}}" 
        enable-back-to-top="true" 
        scroll-with-animation="true">

        <view id="green" class="scroll-view-item bc_green"></view>
        <view id="red" class="scroll-view-item bc_red"></view>
        <view id="yellow" class="scroll-view-item bc_yellow"></view>
        <view id="blue" class="scroll-view-item bc_blue"></view>
    </scroll-view>

    <view class="btn-area">
        <button size="mini" bindtap="tap">click me to scroll into view </button>
        <button size="mini" bindtap="tapMove">click me to scroll</button>
    </view>
</view>
<view class="section">
    <view class="section__title">横向滚动</view>
    <scroll-view class="scroll-view_H" 
    scroll-x >
        <view id="green" class="scroll-view-item_H bc_green"></view>
        <view id="red" class="scroll-view-item_H bc_red"></view>
        <view id="yellow" class="scroll-view-item_H bc_yellow"></view>
        <view id="blue" class="scroll-view-item_H bc_blue"></view>
    </scroll-view>
</view>

4. scroll-view.wxss

/* pages/scroll-view/scroll-view.wxss */
.scroll-view-item {
    width: 600rpx;
    margin: 0 auto;
    height: 200px;
}
.scroll-view-item.bc_green,
.scroll-view-item_H.bc_green {
    background: green;
}
.scroll-view-item.bc_red,
.scroll-view-item_H.bc_red {
    background: red;
}
.scroll-view-item.bc_yellow,
.scroll-view-item_H.bc_yellow {
    background: yellow;
}
.scroll-view-item.bc_blue,
.scroll-view-item_H.bc_blue {
    background: blue;
}
.scroll-view_H {
    height: 200px;
    margin: 0 auto;
    white-space: nowrap;
}
.scroll-view-item_H{
  display: inline-block;
  width: 100%;
  height: 200px;
}

5. scroll-view.js

var order = ['red', 'yellow', 'blue', 'green', 'red'];
Page({
  data: {
    toView: 'red',
    scrollTop: 0
  },
  /**
   * scroll-view api
   */
  upper: function (e) {
    console.log(e)
  },
  lower: function (e) {
    console.log(e)
  },
  scroll: function (e) {
    console.log(e)
  },
  tap: function (e) {
    for (var i = 0; i < order.length; ++i) {
      if (order[i] === this.data.toView) {
        this.setData({
          toView: order[i + 1]
        })
        break
      }
    }
  },
  tapMove: function (e) {
    this.setData({
      scrollTop: this.data.scrollTop + 20
    })
  }

})

6. scroll-view.json

{
  "navigationBarTitleText": "scroll-view 组件"
}