小程序

1.微信开发者工具

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

onReachBottom: function () {//return// page+1 处理// this.setData 修改 为了 触发虚拟dom对比，进而更新页面的效果// this.data.page++;// console.log(this.data.datalist.length,this.total)if(this.data.datalist.length === parseInt(this.total)){return;}console.log("到底了")this.page++wx.request({url: `http://localhost:3000/goods?_page=${this.page}&_limit=8`,success:(res)=>{console.log(res.data)this.setData({datalist:[...this.data.datalist,...res.data]})}})},

2.uniapp

uniapp-scroll-view

<scroll-view class="info-box" scroll-y="true" scroll-with-animation="true" @scrolltolower="upToBottom">......
</scroll-view>

网站

methods: {upToBottom () {var DOM = document.documentElement || document.bodyvar contentHeight = DOM.scrollHeight // 内容高度var scrollTop = DOM.scrollTop // 滚动高度var viewHeight = DOM.clientHeightif (scrollTop / (contentHeight - viewHeight) === 1) {// 到达底部10px时,加载新内容console.log('滚动条到底部')}}
},
mounted () {window.addEventListener('scroll', this.upToBottom, false)
},
beforeDestroy () {window.removeEventListener('scroll', this.upToBottom)
},

小程序和网站中无限滚动的实现相关推荐

不要在网站上无限滚动！
人们在浏览网站的时候是喜欢用"无限滚动",还是喜欢点击""或"查看更多"?无限滚动消除了分页的需要--分页是将数字内容分离到不同页面的过程. ...
小程序 WXS响应事件（滚动菜单栏tab吸顶）
小程序 WXS响应事件(滚动菜单栏tab吸顶) 解决问题: 小程序页面滚动,tab触顶吸顶解决办法: 1)页面滚动事件中监听处理(不推荐) 缺点:在安卓端性能非常差,吸顶效果反应迟钝,不流畅等问题. ...
小程序模板网站平台_小程序模板平台哪个好
小程序模板网站平台_小程序模板平台哪个好?分享一个微信小程序模板平台,超60个行业的小程序模板免费使用,页面内容丰富样式多样的,小程序界面模板. 微信小程序模板网站平台微信小程序模板平台的存在,就是 ...
12_微信小程序之微信视频号滚动自动播放视频效果实现
12_微信小程序之微信视频号滚动自动播放视频效果实现一.获取视频的分辨率.时长.缩略图微信小程序提供了三种方式可以获取视频的分辨率.时长: wx.getVideoInfo(Object) :只能用 ...
微信小程序：scroll-view制作横向滚动导航条特效
微信小程序:scroll-view制作横向滚动导航条特效一.scroll-view介绍微信小程序官方释义为:可滚动视图区域,目前一共有10几个属性,包括:scroll-x.scroll-y.scr ...
微信小程序使用vant-weapp中的索引栏右侧点不动，滚定索引失效问题
微信小程序使用vant-weapp中的索引栏右侧点不动,滚定索引失效问题 vant的索引栏只要使用了定位,或者自定义头部,那么vant的索引栏就会出现各种BUG,基本不能用,这里我是基本重新写了一个 ...
微信小程序在开发中遇到的问题与解决方法
微信小程序在开发中遇到的问题与解决方法参考文章: (1)微信小程序在开发中遇到的问题与解决方法 (2)https://www.cnblogs.com/zjjDaily/p/8032142.html ...
小程序服务器角色,小程序在我们的生活中扮演什么角色？
原标题:小程序在我们的生活中扮演什么角色? 我们给大家讲过关于小程序的相关问题,还有互联网+的相关问题,相信大家还不知道这两者之间的关系,今天我们给大家讲解一下关于小程序与互联网+的关联. 我们再来回 ...
微信小程序云函数中的数据处理后返回
微信小程序云函数中的数据处理后返回本文主要演示的是,在微信云函数中调用数据库后,如何对获取的内容在云函数内处理后返回. 主函数 exports.main = async (event, contex ...

小程序和网站中无限滚动的实现

小程序

1.微信开发者工具

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

2.uniapp

网站

小程序和网站中无限滚动的实现相关推荐

最新文章

热门文章