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

微信小程序—上拉加载+api交互显示loading提示框(图文)

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

微信小程序—上拉加载+api交互显示loading提示框新建scroll目录=》新建scrollPage1、scroll.wxmlview id=”container”  scroll-view    scroll-y=”true” // 允许纵向滚动    scroll-top=”{{scrollTop}}” // 滚动轴的位置,用于返回顶部    scroll-with-animation=”true” // 返回顶部的动画    bindscroll=”scrollFn” // 滚动时触发事件    bindscrolltolower=”scrollToLower” // 滚动到底部时触发事件,必须给scroll-view设置高度,不然无法触发      view class=”cont” wx:key=”{{index}}” wx:for=”{{list}}”      text{{item}}/text    /view    view bindtap=”backFn” class=”back” wx:if=”{{isShow}}”返回顶部/view     // 绑定事件返回顶部,wx:if用来控制隐藏和显示  /scroll-view/view2、scroll.wxss#container{  width: 100%;  position: absolute;  top: 0;  bottom: 0;}#container scroll-view{  width: 100%;   height: 100%;  /* 必须设置高度,不然bindscrolltoupper不生效 */  position: relative;}#container scroll-view .cont{  width: 100%;  height: 30rpx;  border-bottom: 1rpx solid #ccc;  padding: 60rpx;   font-size: 30rpx;}.back{  width: 80rpx;  height: 100rpx;  text-align: center;  background: red;  color: #FFF;  position: fixed;  right: 0;  bottom: 0;}3、jsdata: {    list: [],    page: 1, // 起始页数,第一页    isShow: false, // 返回顶部的显示和隐藏    scrollTop: ”, // 竖向滚动轴的高度,用来返回顶部  },  onLoad: function (options) {     // 页面一加载就循环出10条信息(第一页)    for (var i = 0; i this.data.page*10; i++) {      this.setData({list: this.data.list.concat(i)}) // 在原有数组上新增元素    }  },  scrollFn: function (e) { // 获取滚动高度,控制返回顶部view的显示和隐藏    if (e.detail.scrollTop 120) { // 如果滚动高度大于120.则显示返回顶部view      this.setData({isShow: true})    } else {      this.setData({isShow: false})    }  },  backFn: function () { // 返回顶部    this.setData({scrollTop: 0}) // 滚动轴距离顶部的距离为0.来实现返回顶部效果  },  scrollToLower: function () { // 向底部滚动    this.showLoading() // 调用显示loading提示框    this.setData({page: this.data.page+1})     // 每次触发该时间都让页数增加    if (this.data.page 10) { // 假设只有10页内容,进行判断      console.log(‘没有更多了’) // 如果加载到第10页    } else { // 如果没有加载到第10页      setTimeout(() = { // 做个延迟效果        for (var i = (this.data.page – 1) * 10; i this.data.page * 10; i++) { // 从上一页的结束部分开始          this.setData({ list: this.data.list.concat(i) })          // 用新增元素的数组来代替原有数组        }        wx.hideLoading() // 数据加载完成之后隐藏loading提示框      }, 1000)    }  },  showLoading: function () { // api交互,显示loading提示框    wx.showLoading({      title: ‘加载中’,    })  }  }效果:初始效果:滚动120rpx的效果:滚动加载数据的效果:点击返回顶部的效果:

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序—上拉加载+api交互显示loading提示框(图文)
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

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

支付宝扫一扫打赏

微信扫一扫打赏