小程序滑动到底部进行分页的功能实例

功能实例：实现小程序滚动到底部进行翻页的功能
适用范围：所有的微信小程序版本

我们在做分页的时候可以使用scroll-view的标签进行开发，通过给他设置宽高来达到滑动的效果，以下是代码片段。

wxml中的代码片段

<scroll-view  class="scrollbar-page"  scroll-y bindscrolltolower='nextPage'><block wx:for="{{pageData}}" wx:key="key">这里写你的内容进行循环输出就好了</block><view class="tips-text" wx:if="{{pageData.length<1}}">页面无数据！</view></scroll-view></view>

注：要记得给scroll-view 外面包一个view。

wxss样式


.scrollbar-page{margin: 0rpx;padding: 0rpx;height: 100%;display: flex;flex-direction: column;
}.temp-text{text-align: center;background: #ffffff;line-height: 38rpx;height: 38rpx;margin-top: 10rpx;padding: 10rpx;
}

js中的代码

Page({data:{page:0
},//获取页面数据的代码
getPage(){//优先请求数据获取到数据后进行设置数据及增加page的值this.setData({pageData: ‘自定义一个页面新整数据的函数，通过它将老数据和新数据拼接。’,page: page + 1,})
},//滚动到底部监听翻页代码nextPage(e) {this.getPage();}})

自定义的拼接函数，可以方在util 中进行调用也可以方在page页面的js里。

//分页数据拼接
function upPageData(data) {let newsArr = data.oldData ? data.oldData : [];let newData = data.newData ? data.newData : [];for (var i = 0; i < newData.length; i++) {newsArr.push(newData[i])}return newsArr;
}

小程序滑动到底部进行分页的功能实例相关推荐

微信小程序怎么添加底部菜单按钮
继续微信小程序方面的教程,今天讲怎么在空白的小程序页面添加几个类似菜单的按钮,实现点击某个按钮跳转到对应界面,而不是单单局限于一个页面. 需要什么: 微信小程序账户电脑一台电脑安装微信开发者工具软 ...
小程序scroll-view，滚动到最低_小程序滚动到底部
小程序scroll-view,滚动到最低_小程序滚动到底部小程序滚动条,滚到最底部解决方案1 小程序滚动到底部使用Scorll-view实现方案: scrill-view:组件要固定高度. scro ...
微信小程序云开发之数据分页云函数
微信小程序云开发之数据分页云函数 2018-10-06 20:23:28 微信小程序的云开发可以自己对数据库进行操作而不需要后台,那么很常见的一个功能就是我们在读取数据的时候需要分页来获取 ...
微信小程序云数据库中实现分页
微信小程序提供skip来实现分页比如数据库中有数据100条 db.collection('story').skip(0).limit(10).get() 而skip就是第skip+1条,比如skip ...
小程序滑动点击切换中间大图两边小图
小程序滑动点击切换中间大图两边小图代码太老了已不建议阅读, 简单看下思路即可整体思路, 使用小程序API的animation动画和组件的canvas中的bindtouchstart.bind ...
微信小程序开发错误——底部导航栏没有显示完全
微信小程序开发错误--底部导航栏没有显示完全原因:由于在app.json中设置跳转页面时,假设有A.B.C.D四个图标(点击可以跳转),B和C的跳转页面相同,C的图标就会覆盖B的图标,B的图标就相当 ...
# 解决微信小程序遮罩层底部页面滚动
解决微信小程序遮罩层底部页面滚动一.wxml文件添加catchtouchmove="move". <view class="" class=" ...
微信小程序滑动侧边栏
微信小程序滑动侧边栏效果图: 手指向右滑动可以显示侧边栏,向左滑动隐藏侧边栏代码附上:.wxml <view class="title"><image cla ...
使用canvas实现微信小程序滑动解锁功能；解决canvas图层随背景能上下滑动导致页面错乱问题；
小程序滑动解锁 : 1.给整个页面设置半透明蒙层背景 2.使用canvas实现缺口图效果问题点:当文字内容超过一页时,被遮罩层遮盖的内容能随屏幕上下滑动,canvas内的图片也会随页面上下滑动效果 ...

小程序滑动到底部进行分页的功能实例

小程序滑动到底部进行分页的功能实例相关推荐

最新文章

热门文章