小程序上滑下滑效果的示例代碼

更新時間：2022年01月29日 11:16:00 作者：TandK

本文主要介紹了小程序上滑下滑效果的示例代碼，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

首先上視頻，csdn上傳視頻還要上傳到騰訊視頻或者B站才能發(fā)，太撈了，視頻之前錄好了，弄成gif圖將就看吧。

請?zhí)砑訄D片描述

就像圖里展示的那樣，我要的是這種效果，滑動一下就進入下個頁面，而不是劃一下就動一點點。

H5營銷頁面倒是很經常能看到這種效果。

本人前端菜雞，百度了好久，都是什么touchstart和touchend，還有輪播圖的實現(xiàn)效果。

但是我之前用過touchstart和touchend，感覺其實體驗很不好。

在這里插入圖片描述

在我的手機上能體現(xiàn)出明細的卡頓效果，有的時候還不生效，可能是在提醒我可以換手機了。

在這里插入圖片描述

輪播圖的話，這次我要實現(xiàn)的效果還要左右滑動，左右滑動用輪播圖實現(xiàn)，這個上下滑動就不能用輪播圖實現(xiàn)了。

要注意的是，這個效果我這邊只在手機端能實現(xiàn)，電腦端是出現(xiàn)不了這個效果的。

直接貼代碼吧：

<view class="page-section-spacing"> <scroll-view scroll-y="true" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{<!--{C}%3C!%2D%2D%20%2D%2D%3E-->{toView}}" scroll-top="{<!--{C}%3C!%2D%2D%20%2D%2D%3E-->{scrollTop}}" paging-enabled="true" enhanced="true" class="scroll-view" show-scrollbar="false"> <view id="demo1" class="scroll-view-item demo-text-1"></view> <view id="demo2" class="scroll-view-item demo-text-2"></view> <view id="demo3" class="scroll-view-item demo-text-3"></view> </scroll-view></view><view class="page-section-spacing">
  <scroll-view scroll-y="true" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}" paging-enabled="true" enhanced="true" class="scroll-view" show-scrollbar="false">
    <view id="demo1" class="scroll-view-item demo-text-1"></view>
    <view id="demo2" class="scroll-view-item demo-text-2"></view>
    <view id="demo3" class="scroll-view-item demo-text-3"></view>
  </scroll-view>
</view>

page{
  height: 100%;
}
.page-section-spacing{
  /* margin-top: 60rpx; */
  height: 100%;
}
.scroll-view{
  height: 100%;
}
.scroll-view_H{
  white-space: nowrap;
}
.scroll-view-item{
  height: 100%;
}
.scroll-view-item_H{
  display: inline-block;
  width: 100%;
  height: 100%;
}
.demo-text-1{
  background-color: green;
}
.demo-text-2{
  background-color: black;
}
.demo-text-3{
  background-color: blue;
}

const order = ['demo1', 'demo2', 'demo3']

Page({
  onShareAppMessage() {
    return {
      title: 'scroll-view',
      path: 'page/component/pages/scroll-view/scroll-view'
    }
  },

  data: {
    toView: 'green'
  },

  upper(e) {
    console.log(e)
  },

  lower(e) {
    console.log(e)
  },

  scroll(e) {
    console.log(e)
  },

  scrollToTop() {
    this.setAction({
      scrollTop: 0
    })
  },

  tap() {
    for (let i = 0; i < order.length; ++i) {
      if (order[i] === this.data.toView) {
        this.setData({
          toView: order[i + 1],
          scrollTop: (i + 1) * 200
        })
        break
      }
    }
  },

  tapMove() {
    this.setData({
      scrollTop: this.data.scrollTop + 10
    })
  }
})

關鍵在于這兩個屬性

在這里插入圖片描述