根据官方文档得知,scroll-view就是里面内容有各种滑动触发事件的p容器,比如滚动条滚动、触底、触顶着三个事件。
其中的三个属性 scroll-top:设置滚动条的位置
,scroll-y:是否允许竖向滑动,height:是组件的高度
Bindscrolltolower是绑定触底触发的事件
Bindscroll 是滚动触发的时间
Bindscrolltoupper 触顶触发的事件,由于是触顶触发事件,所以不合适用来当做下拉刷新
一般来说 对于组件的属性,都是通过JS来动态控制的。
<scroll-view scroll-top="{{scrollTop}}" scroll-y="true" style="height:{{scrollHeight}}px;" bindscrolltolower="bindDownLoad" bindscroll="scroll">
这里面可以加一些loading 组件 和 需要遍历的数据
</scroll-view>
这里面我们要用到的就是 Bindscrolltolower 事件 来实现我们的 上拉加载。
下面我们来说说如何实现:
首先我们需要把 page 页码设置为全局变量 let page
然后再 bindDownLoad 函数里面进行 page++ 的赋值
bindDownLoad:function(){
page++
wx.request({
//这里面的东西就不详细说了 大家应该能在API中找到
主要说一下 在我们成功的获取到data 的时候 需要我们在success 成功回调里面去动态的push 我们所获取到的新的
data 然后 setData 给我们 的dataList 这样就不会出现每次加载完成都是新数据而旧数据被销毁的情况。
还有一点需要注意的就是当数据获取到最后一条数据以后 需要 进行一个if 判断 或者 switch 判断
})
}
简单的介绍了一下 上拉加载 需要大家上机测试,祝你们成功!
KESION 科汛软件
KESION 科汛软件是国内领先的在线教育软件及私域社交电商软件服务提供商,长期专注于为企业提供在线教育软件及社交电商SaaS平台解决方案。
公司核心产品云开店SaaS社交电商服务平台、在线教育SaaS服务平台、教育企业数字化SaaS云平台、企微营销助手、私有化独立部署品牌网校和在线教育咨询等。KESION 不断通过技术创新,提供产品和服务,助力企业向数字化转型,通过科技驱动商业革新,让商业变得更智慧!
wx.createAnimation(OBJECT) 创建一个动画实例animation。调用实例的方法来描述动画。最后通过动画实例的 export 方法导出动画数据传递给组件的 animatio
wx.pageScrollTo(OBJECT) 基础库 1.4.0 开始支持,低版本需做兼容处理 将页面滚动到目标位置。 OBJECT参数说明: 参数名 类型 必填 说明 scrollTop Numb