• 小程序API:上拉加载


    第一种:onReachBottom

    • 这个事件表示:页面上拉触底会触发事件
    • 但是这个事件有一个缺点:只能触发一次,想要触发第二次的话,就必须上拉一下

    第二种:使用scroll-view组件

    • 有一个属性:bindscrolltolower
      • 这个属性表示:滚动到底部/右步会触发事件
      • 但是想要使用这个属性,必须给scroll-view添加一个高度,并且这个高度小于内容的高度才会起效
    <scroll-view scroll-y="true" bindscrolltolower="bindMore" style="height:450px">
                <view class="all-class-title">班级列表</view>
                <view bindtap="onChoice">
                    <view class="class-name all-class-title-list" wx:for="{{state.list_ten}}"
                          data-clazzName="{{item.clazzName}}" data-id="{{item.id}}">{{item.clazzName}}
                    </view>
                    <view wx:if="{{state.bottom}}">正在加载</view>
                </view>
    </scroll-view>
    bindMore(){
        this.setState({bottom:true})
        //发送请求
    }
    • 在使用这个事件的时候,scroll-view还有一个属性:lower-threshold
      • 表示:距离底部/右边还有多少px的时候,触发事件,没有设置这个属性的时候,默认距离50px就触发
    <scroll-view scroll-y="true" lower-threshold="400" bindscrolltolower="bindMore" style="height:450px">
               
    </scroll-view>
    • scroll-y:允许纵向滚动

    以上仅为个人想法,如有不同见解请评论哦

  • 相关阅读:
    vue路由动态过渡效果
    完美解决safari、微信浏览器下拉回弹效果
    从零开始搭建VUE项目
    上传图片(photoClip)
    手机移动端input date placehoder不显示
    evaluate-reverse-polish-notation
    Minimum Depth of Binary Tree
    前端学习02-01分帧的作用
    前端学习02-01表格标签
    前端学习01-07图像地图
  • 原文地址:https://www.cnblogs.com/yang-xiao-fan/p/8343001.html
Copyright © 2020-2023  润新知