欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2022年01月29日 11:16:00   作者：TandK  
本文主要介紹了小程序上滑下滑效果的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

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

請(qǐng)?zhí)砑訄D片描述

就像圖里展示的那樣，我要的是這種效果，滑動(dòng)一下就進(jìn)入下個(gè)頁(yè)面，而不是劃一下就動(dòng)一點(diǎn)點(diǎn)。

H5營(yíng)銷(xiāo)頁(yè)面倒是很經(jīng)常能看到這種效果。

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

但是我之前用過(guò)touchstart和touchend，感覺(jué)其實(shí)體驗(yàn)很不好。

在這里插入圖片描述


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

在這里插入圖片描述

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

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

直接貼代碼吧：

<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
    })
  }
})

關(guān)鍵在于這兩個(gè)屬性

在這里插入圖片描述

查了好久小程序文檔，才看到這兩個(gè)屬性的說(shuō)明：

在這里插入圖片描述

疑似是我想要的效果，那么直接試試就行了，你大可以把這兩個(gè)屬性去掉再試一遍，不過(guò)還是要注意，只有在手機(jī)上才會(huì)生效。

另外的，假設(shè)換成scroll-x，即橫向滑動(dòng)，就可以做出小說(shuō)和漫畫(huà)閱讀的那種左右滑動(dòng)翻頁(yè)效果了。

到此這篇關(guān)于小程序上滑下滑效果的示例代碼的文章就介紹到這了,更多相關(guān)小程序上滑下滑內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論