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

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

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

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

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

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

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

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

直接貼程式碼吧：

<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">ugAch
 
</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%;
  heighhttp://www.cppcns.com
 
t: 100%;
}
.demo-text-1{
  backhttp://www.cppcns.comground-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.setDaugAchta({
      scrollTop: this.data.scrollTop + 10
    })
  }
})

關鍵在於這兩個屬性

查了好久小程式文件，才看到這兩個屬性的說明：

疑似是我想要的效果，那麼直接試試就行了，你大可以把這兩個屬性去掉再試一遍，不過還是要注意，只有在手機上才會生效。

另外的，假設換成scroll-x，即橫向滑動，就可以做出小說和漫畫閱讀的那種左右滑動翻頁效果了。

到此這篇關於小程式上滑下滑效果的示例程式碼的文章就介紹到這了,更多相關小程式上滑下滑內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！