Small program project requirements, after touching the bottom, slide up to switch pages, slide down to cancel the switch.
Use touch events to bind touch start, touch move, touch end events, respectively
wxml code

<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>
<!-- mask -->
<view class='dialog' hidden='{{ishidden}}'></view>

js code

	data: {
        list: 10,
        next: false,
        lastX: 0,
        lastY: 0,
        text: "Sliding events",
        cloheight: 0,
        ishidden: true,
        pagenum: 1
    },

Record touch start position

	handletouchtart: function (event) {
        // assignment
        event.preventDefault
        this.data.lastX = event.touches[0].pageX
        this.data.lastY = event.touches[0].pageY
    },

Judging whether to slide up or down in touchmove events

	handletouchmove (event) {
        event.preventDefault
        console.log(event)
        let currentX = event.touches[0].pageX
        let currentY = event.touches[0].pageY
        let tx = currentX - this.data.lastX
        let ty = currentY - this.data.lastY

        if (Math.abs(tx) < Math.abs(ty)) {
            //Sliding up and down
            if (ty < 0) {
                console.log('Up slide', this.data.next)
                if (this.data.next) {
                    this.setData({
                        ishidden: false
                    })
                }
            } else if (ty > 0) {
                console.log('Slide downward', this.data.next)
                this.setData({
                    next: false,
                    ishidden: true
                })
            }
        }

        //Save the current coordinates for the next calculation
        this.data.lastX = currentX
        this.data.lastY = currentY

    },

Touch end determines whether or not to touch the bottom and switch pages

	handletouchend(event){
        event.preventDefault
        if (this.data.next) {
            console.log('next page')
            this.setData({
                pagenum: Number(this.data.pagenum) +1
            })
            wx.redirectTo({
                url: './index?num=' + this.data.pagenum
            })
        }else {
            console.log('No Toggle')
        }
        this.setData({
            ishidden: true
        })
    },

	/**
     * Handler for bottom-touching events on pages
     */
    onReachBottom: function () {
        var that = this
        that.setData({
            next: true
        })
        console.log('Touch bottom', that.data.next)
    },

wxss code

page {
    width: 100%;
    height: 100%;
}
.ul {
    width: 100%;
    overflow-y: scroll;
}
.section {
    width: 100%;
}
.li {
    width:100%;
    height: 200rpx;
    background: #f0f0f0;
}
.dialog {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background: rgba(000, 000, 000, .6);
    z-index: 2;
}

The scroll-view component can also be used to implement the bottom-touching callback of bindscroll tolower, but the scroll-view component should set the height, otherwise the scroll will not take effect.
Screen sizes on mobile devices are inconsistent, so scroll-view height cannot be written to death

<scroll-view scroll-y="true" bindscrolltolower="lower" style="height:{{cloheight}}px;overflow-y: scroll;">
// content
</scroll-view>

Getting the usable window height in the widget onload event

	onLoad: function () {
        var that = this
        wx.getSystemInfo({
            success(res) {
                that.setData({ cloheight: res.windowHeight })
            }
        })
    },
    lower(){ // Touch bottom
        console.log(11)
        var that = this
        that.setData({
            next: true
        })
    },

If there is a better solution, please come here.