原生小程序下拉刷新，上拉加载更多、左右翻页

清疚 2021-12-13 20:01 365阅读 0赞

## 下拉刷新 ##

**（1）开启下拉刷新（json文件中）**

"enablePullDownRefresh": true

**（2）在Js文件中加入如下代码**

/**
           * 页面相关事件处理函数--监听用户下拉动作
           */
        onPullDownRefresh: function () {
            wx.showNavigationBarLoading();
            this.setData({
                pageNum: 1
            });
            this.xxx();
        },`

**（3）在xxx成功时加入如下代码**

`wx.hideNavigationBarLoading();
          wx.stopPullDownRefresh();`

## 上拉加载更多 ##

**（1）js中加入如下代码**

/**
           * 页面上拉触底事件的处理函数
           */
        onReachBottom: function () {
            // 显示加载图标
            if (this.data.pageNum <this.data.last_page) {
                wx.showLoading({
                    title: '玩命加载中',
                })
                // 页数+1
                this.setData({
                    pageNum: this.data.pageNum + 1
                })
    
                this.xxx();
            }

**(2)在xxx函数中记得要（比如）**

this.setData({
                    rss_list: this.data.rss_list.concat(res.data.rss_list.data),
                    last_page: res.data.rss_list.last_page
                })

## 左右翻页 ##

**（1）在所要翻页容器中加入**

**(2)在全局中定义**

var startDot = {X: 0,Y: 0};
    	var touchDot = {X: 0,Y: 0};
    	var time = 0; //触屏时间var number; //定时器ID

**(3)写对应的函数（左滑右滑中间的逻辑可换）**

/**
         * 触屏开始计时和获取坐标
         */
        touchStart: function(event) {
            startDot.X = event.touches[0].pageX;
            startDot.Y = event.touches[0].pageY;
            number = setInterval(function() {
                time++;
            }, 100);
        },
        /**
         * 判断滑动距离和时间是否需要切换页面
         */
        touchMove: function(event) {
            console.log("滑动");
            touchDot.X = event.touches[0].pageX;
            touchDot.Y = event.touches[0].pageY;
            //向左滑处理
            if ((startDot.X - touchDot.X) > 200 && (startDot.Y - touchDot.Y) < 150 && time < 5 && time > 0.1) {
                if (this.data.pageNum < this.data.last_page) {
                    wx.showLoading({
                        title: '玩命加载中',
                    });
                    // 页数+1
                    this.setData({
                        pageNum: this.data.pageNum + 1
                    })
    
                    this.rec_rss();
                }
                clearInterval(number);
                time = 0;
            }
            //向右滑处理
            if ((touchDot.X - startDot.X) > 200 && (touchDot.Y - startDot.Y) < 150 && time < 5 && time > 0.1) {
    
                if (this.data.pageNum > 1) {
                    wx.showLoading({
                        title: '玩命加载中',
                    })
    
                    // 页数-1
                    this.setData({
                        pageNum: this.data.pageNum - 1
                    })
    
                    this.rec_rss(); 
                }
                clearInterval(number);
                time = 0;
            }
        },
        /**
         * 结束触屏重置计时
         */
        touchEnd: function(event) {
            clearInterval(number);
            time = 0;
        },