精华内容
下载资源
问答
  • 微信小程序上拉触底
    千次阅读
    2020-08-01 16:14:04

    造成不触发的原因可能有以下几种情况

    • 配置属性问题
    • 高度问题
    • 滚动条不在顶部 需要回到顶部重新计算高度
    • onReachBottom函数被覆盖

    1.配置属性问题

    在app.json或者本页的json文件中配置onReachBottomDistance属性,区别在于全局还是只在本页生效

    2.高度问题

    //设置容器高度为100%
    page{
      height: 100%
    }

    3. 切换页面时 滚动条滚回到顶部

    //切换页面时调用API
    wx.pageScrollTo({
      scrollTop: 0
    })

    4.onReachBottom()函数被覆盖

    每个页的js文件创建时自带onReachBottom函数 不需要自己单独写

    更多相关内容
  • 微信小程序

    一 什么是上拉触底

    上拉触底是移动端的专有名词,通过手指在屏幕上的上拉滑动操作,从而加载更多数据的行为。

    二 监听页面的上拉触底事件

    在页面的 .js 文件中,通过 onReachBottom() 函数即可监听当前页面的上拉触底事件。示例代码如下。

    /**

     * 页面上拉触底事件的处理函数

     */

    onReachBottom: function () {

      console.log('触发了上拉触底的事件')

    }

    三 配置上拉触底距离

    上拉触底距离指的是触发上拉触底事件时,滚动条距离页面底部的距离。

    可以在全局或页面的 .json 配置文件中,通过 onReachBottomDistance 属性来配置上拉触底的距离。

    小程序默认的触底距离是 50px,在实际开发中,可以根据自己的需求修改这个默认值。

    四 案例

    1 展示效果

    2 实现步骤

    a 定义获取随机颜色的方法

    b 在页面加载时获取初始数据

    c 渲染 UI 结构并美化页面效果

    d 在上拉触底时调用获取随机颜色的方法

    e 添加 loading 提示效果

    f 对上拉触底进行节流处理

    3 定义获取随机颜色的方法

    data: {

      colorList: [] // 随机颜色列表

    },

    // 获取随机颜色的方法

    getColors() {

      wx.request({

        url: 'https://www.escook.cn/api/color',

        method: 'get',

        success: ({ data: res }) => {

          this.setData({

            colorList: [...this.data.colorList, ...res.data]

          })

        }

      })

    }

    4 在页面加载时获取初始数据

    /**

     * 生命周期函数--监听页面加载

     */

    onLoad: function (options) {

      this.getColors()

    },

    5 渲染 UI 结构并美化页面效果

    <view wx:for="{{colorList}}" wx:key="index" class="num-item" style="background-color: rgba({{item}});">{{item}}</view>

    .num-item {

      border: 1rpx solid #efefef;

      border-radius: 8rpx;

      line-height: 200rpx;

      margin: 15rpx;

      text-align: center;

      text-shadow: 0rpx 0rpx 5rpx #fff;

      box-shadow: 1rpx 1rpx 6rpx #aaa;

      color: black;

    }

    6 在上拉触底时调用获取随机颜色的方法

    /**

     * 页面上拉触底事件的处理函数

     */

    onReachBottom: function () {

      // 调用获取随机颜色方法

      this.getColors()

    }

    7 添加 loading 提示效果

    getColors() {

      // 展示 loading 效果

      wx.showLoading({title: '数据加载中...'})

        // 发起请求,获取随机颜色值的数组

        wx.request({

          url: 'https://www.escook.cn/api/color',

          method: 'get',

          success: ({ data: res }) => {

            this.setData({

              colorList: [...this.data.colorList, ...res.data]

            })

          },

          complete: () => {

            wx.hideLoading() // 隐藏 loading 效果

          }

        })

      }

    8 对上拉触底进行节流处理

    a 在 data 中定义 isloading 节流阀

    • false 表示当前没有进行任何数据请求

    • true 表示当前正在进行数据请求

    b 在 getColors() 方法中修改 isloading 节流阀的值

    • 在刚调用 getColors 时将节流阀设置 true

    • 在网络请求的 complete 回调函数中,将节流阀重置为false

    c 在 onReachBottom 中判断节流阀的值,从而对数据请求进行节流控制

    • 如果节流阀的值为 true,则阻止当前请求

    • 如果节流阀的值为 false,则发起数据请求

    9 完整代码

    // pages/contact/contact.js
    Page({
      /**
       * 页面的初始数据
       */
      data: {
        colorList: [],
        isloding: false
      },
    
      getColors() {
        this.setData({
          isloding: true
        })
        // 需要展示 loading 效果
        wx.showLoading({
          title: '数据加载中...'
        })
        wx.request({
          url: 'https://www.escook.cn/api/color',
          method: 'get',
          success: ({ data: res }) => {
            this.setData({
              colorList: [...this.data.colorList, ...res.data]
            })
          },
          complete: () => {
            wx.hideLoading()
            this.setData({
              isloding: false
            })
          }
        })
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        this.getColors()
      },
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
        if (this.data.isloding) return
        this.getColors()
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
      }
    })

     

    展开全文
  • 微信小程序自带的各种方法和api ; 箭头函数 ;三点运算符拼接字符串 ;节流思想;对象解构重新命名。 大概思路 首先在js页面中获取页面数据,此次用颜色来看,更方便辨认。如下图所示。 所以先用get方法去获取...

    主要技术

    微信小程序自带的各种方法和api ; 箭头函数 ;三点运算符拼接字符串 ;节流思想;对象解构重新命名。

    大概思路

    首先在js页面中获取页面数据,此次用颜色来看,更方便辨认。如下图所示。

    所以先用get方法去获取颜色数据:

    在data里定义colorList数组来接受GET请求来的数据,这里要注意需要重构以下对象命,因为作者请求的api里需要的数据被两层data包着,所以用对象解构重新命名的方法将数据获得,如果不去重新命名会报undefined的错误。但是如果你需要的数据后端给你包的比较好可以直接用res接收过来就行,然后用三点运算符拼接法把新老数据拼接起来。

     

     

    然后在页面加载时运行方法

     再去搭建wxml页面,直接用行内表达式把颜色的rgba值给进去就好了

     在美化一下页面

     上面都是正常的页面搭建。然后给上拉触底效果和自动弹出加载框效果,运用微信自带的 wx.showLoading(), wx.hideLoading()两个方法实现弹出加载框和加载完自动消失的效果,

    然后在onReachBottom中添加getColors()方法。wx.showLoading()方法写在getColors()开头,wx.hideLoading()写在getColors()结尾,注意wx.hideLoading()要写在request里面

    节流操作

    目的:以防单次下拉多次请求数据。

    思路:在data里定义一个isloading来判断是否在请求数据,给它初始的false值。在数据开始请求前将isloading改为true,在请求完成时再改为false,同时再页面开始加载的函数下加一个判断条件,只有当isloading是false时才请求数据,完整代码如下:

     路漫漫兮其修远兮,任重而道远啊

     

     

     

     

     

    展开全文
  • js中编写触底加载更多数据大致逻辑,根据自身情况稍作修改即可 var app = getApp(); const api = require('../utils/api'); Page({ data: { dataList: [], //数据列表 pageNum: 1, //页数 pageSize: 12, //每页...

    js中编写触底加载更多数据大致逻辑,根据自身情况稍作修改即可

    var app = getApp();
    const api = require('../utils/api');
    Page({
      data: {
        dataList: [],  //数据列表
        pageNum: 1,  //页数
        pageSize: 12,  //每页数据条数
        dataBack: true, //触底加载
      },
      loadMoreData: function() {
          var _this = this;
          var data = { 
              pageNum: _this.data.pageNum, 
              pageSize: _this.data.pageSize
          }
          // 带页码数请求后台数据
          api.getData(data, {
              success: res => {
                if (typeof(res) == 'object' && 'data' in res ) {
                  if (res.data.length > 0) {
                    // 向数组追加数据,并更新列表、页数及触底状态
                    var newDataList = _this.data.dataList.concat(res.data);
                    _this.setData({
                      dataList: newDataList, 
                      pageNum: _this.data.pageNum + 1dataBack: true
                    });
                  }
                }
              }
          });    
      },
      // 页面上拉触底事件的处理函数
      onReachBottom: function () {
        if (this.data.dataBack) {
          // 调用追加数据方法
          this.loadMoreData();
          this.setData({
            dataBack: false,
          });
        }
      }
    }
    展开全文
  • 微信小程序 上拉触底分页 文章目录 前言 一、pandas是什么? 二、使用步骤 1.引入库 2.读入数据 总结 前言 提示:这里可以添加本文要记录的大概内容: 例如:随着人工智能的不断发展,机器学习这门...
  • 主要介绍了微信小程序实现上拉加载功能,结合实例形式分析了微信小程序加载更多数据、触底加载或点击加载更多数据的相关实现技巧与操作注意事项,需要的朋友可以参考下
  • 这篇文章是用的laravel8+微信小程序。 要实现微信小程序下拉加载首先我们要缕清他的思路。在我看来,可以这样实现:首先我们给js一个data属性page,page的值默认为1,也就是第一页。然后加载出第一页后 page自增1 ...
  • 小程序自带能检测到到用户触底事件的函数 小程序自带能检测到到用户触底事件的函数 小程序自带能检测到到用户触底事件的函数 开发中可能会遇到写个底部触发事件,但是运行却没生效? //底部触发 ...
  • 关于微信小程序下拉刷新、上拉触底方法的实现
  • 如下图,往下面拖动时,会触发函数,获取颜色数据并使自增,但是你在数据没有返回之前多次触发上拉触底,那么就会多次request1.在data中定义idloading节流阀2.在getColors()方法中修改isloading节流阀的值3.在...
  • page, title : title }) } }) } }) }, 七 : 然后是上拉触底onReachBottom事件 onReachBottom: function () { var that = this var page = that.data.page+1 wx.getStorage({ "key" : "token", success(res){ var ...
  • 微信小程序上拉触底分页加载 2020/10/22 data:{ page: 1, //当前页码 endpage: '', //总页码 }, // 列表数据 lists: function () { let self = this; var token = wx.getStorageSync('token');//获取缓存token ...
  • 1.概念:下拉刷新是移动端的专有名词,指的是通过手指在屏幕的下拉滑动操作,从而重新加载页面数据的行为。 2. 启用下拉刷新 启用下拉刷新有两种方式: ①全局开启下拉刷新 在 app.json 的 window 节点中,...
  • 微信小程序】实现下拉刷新和上拉触底加载更多数据的页面事件
  • 小程序的时候经常会用到上拉刷新的功能,所以总结了下,以后就可以开开心心的command+c、command+v了!嗨呀、我可真是个聪明的小机灵鬼、哈哈哈 当我们对列表数据进行渲染时所做的分页处理,总结如下 第一步:先...
  • 小程序中的上拉触底事件
  • 全局配置-window相关设置讲解,详解下拉刷新和上拉触底两个事件。
  • 下拉刷新1、在需要下拉刷新...上拉触底1、在*页面上拉触底事件的处理函数* async onReachBottom() 中添加要触底刷新的内容2、做分页显示时,需要在函数中添加判断是否为最后一页数据,否则小程序会自动随机读取。...
  • 本文实例为大家分享了微信小程序实现列表下拉刷新上拉加载的具体代码,供大家参考,具体内容如下 DEMO下载 效果图 原理 利用微信小程序的onPullDownRefresh函数(下拉刷新监听函数)和onReachBottom函数(上拉加载...
  • 上拉触底 手指在屏幕上的上拉滑动操作 从而加载更多数据 页面上拉触底事件触发时距页面的距离 默认50px (滚动条距离底部的距离 自动加载更多数据) "onReachBottomDistance" : Number 页面相关事件处理函数 Page({ ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,484
精华内容 2,193
关键字:

微信小程序上拉触底