时间:2021-05-18
滑动屏幕加载数据是任何小程序中都会用到的功能,本文我就将这个功能整理给大家,希望对大家有意。我们先看看效果图:
创建目录
首先我们现在项目中创建资讯目录,以下是我自己创建的目录,大家可以根据自己的需求创建。如图所示:
创建lists.js文件
以下是lists.js代码
var app = getApp()Page({ data: { newsList: [], lastid: 0, toastHidden: true, confirmHidden: true, isfrist: 1, loadHidden: true, moreHidden: 'none', msg: '没有更多文章了' }, loadData: function (lastid) { //显示出加载中的提示 this.setData({ loadHidden: false }) var limit = 10 var that = this wx.request({ url: 'http://127.0.0.1:9090/hpm_bill_web/news/getnewslist', //数据接口 data: { lastid: lastid, limit: limit }, header: { 'Content-Type': 'application/json' }, success: function (res) { if (!res.data) { that.setData({ toastHidden: false }) that.setData({ moreHidden: 'none' }) return false } var len = res.data.length var oldLastid = lastid if(len != 0) { that.setData({ lastid: res.data[len - 1].id }) } else { that.setData({ toastHidden: false}) } var dataArr = that.data.newsList var newData = dataArr.concat(res.data); if (oldLastid == 0) { wx.setStorageSync('CmsList', newData) } that.setData({ newsList: newData }) that.setData({ moreHidden: '' }) }, fail: function (res) { if (lastid == 0) { var newData = wx.getStorageSync('CmsList') if(newData) { that.setData({ newsList: newData }) that.setData({ moreHidden: '' }) var len = newData.length if (len != 0) { that.setData({ lastid: newData[len - 1].id }) } else { that.setData({ toastHidden: false }) } console.log('data from cache'); } } else { that.setData({ toastHidden: false, moreHidden: 'none', msg: '当前网格异常,请稍后再试' }) } }, complete: function () { //显示出加载中的提示 that.setData({ loadHidden: true }) } }) }, loadMore: function (event) { var id = event.currentTarget.dataset.lastid var isfrist = event.currentTarget.dataset.isfrist var that = this wx.getNetworkType({ success: function (res) { var networkType = res.networkType // 返回网络类型2g,3g,4g,wifi if (networkType != 'wifi' && isfrist == '1') { that.setData({ confirmHidden: false }) } } }) this.setData({ isfrist: 0 }) this.loadData(id); }, onLoad: function () { var that = this this.loadData(0); }, toastChange: function () { this.setData({ toastHidden: true }) }, modalChange: function () { this.setData({ confirmHidden: true }) }})创建页面文件(lists.wxml)
<view class="warp"> <!-- 文章列表模板 begin --> <template name="items"> <navigator url="../../pages/detail/detail?id={{id}}" hover-class="navigator-hover"> <view class="imgs"> <image src="{{image}}" class="in-img" background-size="cover" model="scaleToFill"></image> </view> <view class="infos"> <view class="title">{{name}}</view> <view class="dates">{{createtime}}</view> </view> </navigator> </template> <!-- 文章列表模板 end --> <!-- 循环输出列表 begin --> <view wx:for="{{newsList}}" class="list"> <template is="items" data="{{...item}}" /> </view> <!-- 循环输出列表 end --><loading hidden="{{loadHidden}}" bindchange="loadChange"> 数据加载中...</loading> <view bindtap="loadMore" data-lastid="{{lastid}}" data-isfrist="{{isfrist}}" class="loadMore" style="display:{{moreHidden}}">加载更多</view> <toast hidden="{{toastHidden}}" bindchange="toastChange" duration="3000">{{msg}}</toast> <modal title="温馨提示" no-cancel confirm-text="明确" cancel-text="关闭" hidden="{{confirmHidden}}" bindconfirm="modalChange" bindcancel="modalChange">你当前不在在WIFI网格下下,会产生流量费用</modal></view>创建页面样式(lists.wxss)
.warp {height:100%;display:flex;flex-direction: column;padding:20rpx;}navigator {overflow: hidden;}.list {margin-bottom:20rpx;height:200rpx;position:relative;}.imgs{float:left;}.imgs image {display:block;width:200rpx;height:200rpx;}.infos {float:left;width:480rpx;height:200rpx;padding:20rpx 0 0 20rpx}.title {font-size:20px; font-family: Microsoft Yahei}.dates {font-size:16px;color: #aaa; position: absolute;bottom:0;}.loadMore {text-align: center; margin:30px;color:#aaa;font-size:16px;}通过以上代码就能实现在屏幕上滑动显示数据的功能。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
微信小程序中的swiper组件微信小程序中的swiper组件真的是简单方便提供了页面中图片文字等滑动的效果这里的就是一个滑块视图容器;而就是你希望滑动的东西,可
本文实例为大家分享了微信小程序实现跟随菜单效果、微信小程序循环嵌套加载数据,供大家参考,具体内容如下效果如图:代码如下:wxml//使用循环嵌套data数据格式
微信小程序——左右滑动切换页面事件微信小程序的左右滑动触屏事件,主要有三个事件:touchstart,touchmove,touchend。这三个事件最重要的属
微信小程序scroll-view实现上拉加载与下拉刷新的实例实现效果图:如图,使用小程序的scroll-view实现的上拉加载数据,下拉刷新数据,试下代码如下:
本文实例讲述了微信小程序实现上拉加载功能。分享给大家供大家参考,具体如下:开发需求进入页面,加载初始数据,当向上拖动页面至底部,自动加载新的数据,即上拉加载更多