微信小程序实现滚动分页加载更多
参考网址:https://www.cnblogs.com/Smiled/p/8203306.html
1、wxml:
<view class='myScroll' style='float:left;'>
<scroll-view scroll-y='true' style="height:{{height}}px" bindscrolltolower='lower' >
<!--分类 下部分 图文列表 -->
<view class="appointment">
<view class="app-moduler">
<navigator url="/pages/detail/detail?id={{item.id}}" wx:for="{{imageList}}" wx:key="id" class="mod-item" >
<!-- <view class="mod-signup">
<image src="{{signupimg}}"></image>
</view> -->
<view class="mod-img" >
<image src="{{yuming+item.image}}" class="mod-image" ></image>
</view>
<view class="mod-title">
<text>{{item.title}} </text>
</view>
<view class="mod-info">
<view class="mod-icon">
<image src="{{iconsrc}}" class="icon"></image>
</view>
<view class="moinfont">{{item.description}}</view>
</view>
</navigator> </view>
</view>
<!-- 图文列表结束 -->
</scroll-view>
</view>
2、js:
data: {
imageList: [ ],
ids:[0,0,0,0,0],
inputValue: '', //搜索的内容
height:0
}
,
onLoad(){
// 初始化所有图片的图片列表
wx.request({
url: '数据接口',
data: {
pagenumber: 1,
pagesize: 6,
},
method: 'POST',
header: {
'content-type': 'application/x-www-form-urlencoded' // 默认值
},
success(res) {
// var myOldData=that.data.imageList;
var mydata = res.data.data;
that.setData({
imageList: mydata
}) }
})
// 初始化图片列表 结束
// 初始化 高度
wx.getSystemInfo({
success: (res) => { that.setData({
height: res.windowHeight
})
}
})
},
,
lower() {
var that = this;
var result = that.data.imageList;
var pagenumber=result.length/6+1;
// 加载图片列表
if (pagenumber < 2) {
return false;
} else {
wx.request({
url: '数据接口',
data: {
pagenumber: pagenumber,
pagesize: 6,
ids:that.data.ids,
title: that.data.inputValue
},
method: 'POST',
header: {
'content-type': 'application/x-www-form-urlencoded' // 默认值
},
success(res) {
// var myOldData=that.data.imageList;
var mydata = res.data.data;
var cont = result.concat(mydata);
if (mydata.length==0){
wx.showToast({ //如果全部加载完成了也弹一个框
title: '没有数据了',
image:"/images/warn.png",
duration: 300
});
return false;
}
if (cont.length >= 100) {
wx.showToast({ //如果全部加载完成了也弹一个框
title: '加载的太多了',
icon: 'success',
duration: 300
});
return false;
} else {
wx.showLoading({ //期间为了显示效果可以添加一个过度的弹出框提示“加载中”
title: '加载中',
icon: 'loading',
});
setTimeout(() => {
that.setData({
imageList: cont
});
wx.hideLoading();
}, 1500)
}
}
})
//
加载图片列表 结束
}
}
遇到的问题 :z-index=1 的组件 和 在普通流中的元素 冲突 目前还不明白 就把普通流元素变成float:left(就是scroll元素)
微信小程序实现滚动分页加载更多的更多相关文章
- 微信小程序开发动感十足的加载动画--都在这里!
代码地址如下:http://www.demodashi.com/demo/14242.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...
- 微信小程序的图片懒加载
在普通的web页面当中,我们都知道图片懒加载可以提升浏览器的加载速度.原理是图片用空或者占位图片进行显示,当屏幕移动到图片位置的时候,再把图片的地址换成它的地址.那么,在小程序当中呢,最近老大让看一下 ...
- 微信小程序开发——模板中加载html代码
最新方法可以使用微信小程序提供的 rich-text (富文本)组件直接写解析html,详见 rich-text: <rich-text class='f13 c_9' nodes=" ...
- 微信小程序web-view之动态加载html页面
官方推出的web-view方便了很多开发人员. 我们在做的时候,经常会想到写一个小程序的page然后通过动态加载web-view的形式来完成其他功能页面的开发. 之前研究web-view的时候发现网上 ...
- 分享下自己写的一个微信小程序请求远程数据加载到页面的代码
1 思路整理 就是页面加载完毕的时候 请求远程接口,然后把数据赋值给页面的变量 ,然后列表循环 2 js相关代码 我是改的 onload函数 /** * 生命周期函数--监听页面加载 */ on ...
- 在应用中显示的图片很多情况不满足业务需求,我们需要动态根据图片的宽高进行缩放或加载中显示的缺省图片,这是我没就需要监听图片加载完成回调,来看看微信小程序怎么实现图片加载完成回调。
<swiper-item> <image src="{{item.image}}" class="slide-image" mode=&quo ...
- 微信小程序-通知滚动小提示
代码地址如下:http://www.demodashi.com/demo/14044.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...
- vue滚动分页加载
做了一个项目,要求将后台数据滚动加载. 滚动加载必须要求后台传的接口中由pageSize和pageIndex两个参数,来判断每次传数据的条数和数据的页码. 首先要判断滑轮是向上滚动还是向下滚动,可以在 ...
- 微信小程序scroll-view滚动一次多次触发的问题解决方案
最近使用微信小程序开发的时候,需要用scroll-view的bindscrolltolower事件,控制加载下一页的内容.但是发现在ios里,下拉滚动一次,事件触发两次,导致重复加载数据. 经过百度和 ...
随机推荐
- ubuntu高版本如何设置开机启动脚本
ubuntu-18.04不能像ubuntu14一样通过编辑rc.local来设置开机启动脚本 可以通过下列简单设置后,可以使rc.local重新发挥作用. 1.建立rc-local.service文件 ...
- [Unity插件]Lua行为树(二):树结构
参考链接:https://blog.csdn.net/u012740992/article/details/79366251 在行为树中,有四种最基本的节点,其继承结构如下: Action->T ...
- 基于canvas的电子始终
//code <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti ...
- Android自定义View学习笔记(一)
绘制基础 参考:HenCoder Android 开发进阶: 自定义 View 1-1 绘制基础 Paint详解 参考:HenCoder Android 开发进阶: 自定义 View 1-2 Pain ...
- asp.net excel模板下载
string filePath = Server.MapPath("~/model/模板.xls");//路径 FileInfo fileInfo = new FileInfo(f ...
- MongoTemplate的使用
参考: https://www.cnblogs.com/ityouknow/p/6828919.html
- Linux 指令(一)文件/目录操作
1. 创建目录 mkdir 格式 mkdir [OPTION]... DIRECTORY... 选项 -p 递归创建 -v 创建时提示 例: root@ubuntu:/home/eko/x# mkdi ...
- django for 循环中,获取序号
模板的for循环中,如何获取序号? 想过用enumerate,但是在模板中会报错 Could not parse the remainder xxx: 后来搜到 forloop.counter,完美解 ...
- 如何禁用Firefox,chrome浏览器“不安全密码警告”
在任何HTTP页面中,一个全新的“不安全密码警告”将会在用户点击表单时直接出现在登陆框的下方,强行保证所有用户都能看到“此链接不安全,你的个人利益将受到损害”等字眼,同时整个页面也会收到损坏的挂锁图标 ...
- mingw 设置python 设置git环境变量
1.python路径设置: 安装python 比如目录:C:\Python27 假如mingw安装C盘根目录下的话,进入下面目录:C:\MinGW\msys\1.0\etc 找到 fstab 文件修改 ...