微信小程序_scroll-view的使用

官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

 

scroll.wxml 代码

<view>开始</view>
<scroll-view scroll-y="true" bindscroll="scroll" scroll-with-animation="{{true}}" scroll-top="{{top}}">
  <view>222222</view>
  <view>111111</view>
  <view>111111</view>
  <view>111111</view>
  <view>111111</view>
  <view>111111</view>
  <view>111111</view>
  <view>111111</view>
  <view>111111</view>
  <view>111111</view>
  <view>111111</view>
  <view>111111</view>
  <view>111111</view>
  <view>111111</view>
  <view>111111</view>
  <view>111111</view>
  <view>111111</view>
  <view>111111</view>
  <view>111111</view>
  <view>111111</view>
  <view>111111</view>
  <view>111111</view>
  <view>111111</view>
  <view>111111</view>
  <view>111111</view>
  <view>222222</view>
</scroll-view>
<view>结束</view>
<view class="{{now}} dingbu" bindtap="backTop">顶部</view>

scroll.wxss代码：

/* pages/scoroll/scoroll.wxss */
scroll-view{
  height: 500rpx;
}



.dingbu{
  position: fixed;
  top: 540rpx;
  right: 20rpx;
  opacity: 0;
}

.now{
  opacity: 1;
  transition: all 2s;
}

scroll.js代码

// pages/scoroll/scoroll.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    top : 0,
    now : ''
  },

  //点击返回顶部时触发
  backTop(evt){
    let top = this.data.top;
    this.setData(
      {
        top
      }
    );
  },
  //scroll滚动时触发
  scroll(evt){
    //console.log(evt);
    let scrollTop = evt.detail.scrollTop;
    let now = scrollTop >= 100 ? 'now' : '';
    this.setData({
      scrollTop,
      now
    });
  },

})

 实现效果: