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

下拉刷新

(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 

(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;
    },

你可能感兴趣的:(前端)