小程序下滑触底，切换页面

z.week

于 2019-08-02 13:29:44 发布

阅读量1.2k

点赞数 1

分类专栏：小程序 h5 js

本文链接：https://blog.csdn.net/weixin_45295253/article/details/98193258

版权

本文介绍了如何在小程序中实现在触底时上滑切换页面，下滑取消切换的效果。通过绑定touchstart、touchmove和touchend事件，结合WXML、JS和WXSS代码，动态判断滑动方向和触底状态，实现页面的智能切换。同时提到，可以使用scroll-view组件的bindscrolltolower回调，但需要注意高度设置问题，以确保滚动效果在不同设备上都能正常工作。

摘要由CSDN通过智能技术生成

小程序项目需求，触底后上滑切换页面，下滑取消切换。
用到touch事件，分别绑定touchstart、touchmove、touchend事件
wxml代码

<view class="section" bindtouchstart="handletouchtart" bindtouchmove="handletouchmove" bindtouchend="handletouchend">

    <view class='ul'>
        <view class='' wx:for="list" wx:key="{
  {index}}">
            <view wx:for="list" wx:key="{
  {index}}" class='li'>{
  {text}}{
  {pagenum}}</view>
        </view>
    </view>
</view>
<!-- 遮罩层 -->
<view class='dialog' hidden='{
  {ishidden}}'></view>

js代码

	data: {
        list: 10,
        next: false,
        lastX: 0,
        lastY: 0,
        text: "滑动事件",
        cloheight: 0,
        ishidden: true,
        pagenum: 1