android小程序上滑下滑效果怎么实现

今天小编给大家分享一下Android小程序上滑下滑效果怎么实现的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

首先看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"></view>  </scroll-view></view>

page{  height: 100%;}.page-section-spacing{    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    })  }})

关键在于这两个属性

查了好久小程序文档，才看到这两个属性的说明：

疑似是我想要的效果，那么直接试试就行了，你大可以把这两个属性去掉再试一遍，不过还是要注意，只有在手机上才会生效。

另外的，假设换成scroll-x，即横向滑动，就可以做出小说和漫画阅读的那种左右滑动翻页效果了。

以上就是“android小程序上滑下滑效果怎么实现”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网精选频道。