Scroll-View

1.wxml

<view>scroll-view组件</view>
<view class='section'>
<view class='section_title'>竖向滚动</view>
<scroll-view style='height:200rpx;background:red;'
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' style='background:green;height:200rpx;'></view>
<view id='yellow' class='scroll-view-item' style='background:yellow;height:200rpx;'></view>
<view id='yellow' class='scroll-view-item' style='background:blue;height:200rpx;'></view>
<view id='blue' class='scroll-view-item'></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>

 

2.js

var order = ['green', 'yellow','blue'];

Page({
  data:{
    toView:'green',
    scrollTop:0
  },
  clickA(e){
    console.log('click container-A');
  },
  clickB(e) {
    console.log('click container-B');
  },
  clickC(e) {
    console.log('click container-C');
  },
  upper:function(e){
    console.log(e);
  },
  lower:function(e){
    console.log(e);
  },
  tap:function(e){
    console.log('我点击了切换滚动按钮！');
    if (this.data.toView == order[order.length-1])
    {
      this.setData({
        toView: order[0]
      });
      return;
    }
    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
    });
  }
})

 

感谢：https://www.bilibili.com/video/av61418389/?p=31