首页 > 编程语言> 文章详细

小程序上滑下滑效果

2022-01-24 21:00:06 阅读：181 来源： 互联网

标签：效果 100% 程序 height 下滑 scrollTop scroll view

首先上视频，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="{{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
    })
  }
})

关键在于这两个属性：
在这里插入图片描述
查了好久小程序文档，才看到这两个属性的说明：

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

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

标签：效果,100%,程序,height,下滑,scrollTop,scroll,view
来源： https://blog.csdn.net/qq_41180335/article/details/122674506

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

小程序上滑下滑效果