E企盈营销工具技术服务商 热线:4006-838-530

小程序开发——自定义下拉刷新和上拉加载更多

E企盈直播平台营销卖货系统

小程序的下拉刷新和上拉加载更多,系统已经提供方法。我这里就是利用系统的方法,用自定义的UI和动画去实现。先附上效果图下拉刷新上拉加载更多第一步想要利用系统的方法,首先要开启。开启方法:在相应的.json文件里面添加”enablePullDownRefresh”: true(当然,这个是默认开启的,如果发现无法使用时,就手动再开启一次)第二步需要在相应的.wxss文件添加加载动画的样式.weui-loadmore {  width: 100%;  height: 100rpx;  font-size: 30rpx;  text-align: center;  margin-top: 30rpx;}.weui-loading {  width: 50rpx;  height: 50rpx;  display: inline-block;  vertical-align: middle;  -webkit-animation: weuiLoading 1s steps(12, end) infinite;  animation: weuiLoading 1s steps(12, end) infinite;  background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=) no-repeat;  background-size: 100%;}.weui-loadmore-tips {  display: inline-block;  vertical-align: middle;}第三步在相应的.js文件添加标识hasMoreData: true,isRefreshing: false,isLoadingMoreData: false第四步 下拉刷新和上拉加载更多利用系统下拉刷新方法onPullDownRefreshonPullDownRefresh: function () {    if (this.data.isRefreshing || this.data.isLoadingMoreData) {      return    }    this.setData({      isRefreshing: true,      hasMoreData: true    })    this.requestData()//数据请求  },利用系统的上拉加载更多方法onReachBottomonReachBottom: function () {    if (this.data.isRefreshing || this.data.isLoadingMoreData || !this.data.hasMoreData) {      return    }        this.setData({      isLoadingMoreData: true    })    this.requestData()//数据请求  },第五步 在相应的.wxml文件添加布局代码(1)在列表的头部添加下拉刷新的布局view class=”weui-loadmore” wx:if='{{isRefreshing}}’  view class=”weui-loading”/view  view class=”weui-loadmore-tips”正在刷新…/view/view(2)在列表的底部添加上拉加载更多的布局view wx:if='{{!isRefreshing}}’ class=”weui-loadmore”  view wx:if='{{isLoadingMoreData}}’    view class=”weui-loading”/view    view class=”weui-loadmore-tips”正在加载更多…/view  /view  view wx:elif='{{hasMoreData}}’    view class=”weui-loadmore-tips” bindtap=’onReachBottom’点击加载更多/view  /view  view wx:else    view class=”weui-loadmore-tips”没有更多内容啦/view  /view/view至此,自定义的下拉刷新和上拉加载更多就完成了

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 小程序开发——自定义下拉刷新和上拉加载更多
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏