微信小程序实现简单下拉加载更多

1.微信小程序前端页面：

<block wx:for="{{list}}"><navigator url="/pages/udd/udd?id={{item.id}}"><l-card type="primary" l-img-class="right-card" position="left" image="/img/QQ.GIF"><view style="color: aquamarine;">id：{{item.id}}</view><view class="content" style="color: yellowgreen;">标题：{{item.name}}</view><view style="color: coral;">地址：{{item.adress}}</view><view style="color: red;">价格：${{item.price}}</view></l-card></navigator>
</block>

2.前端js代码：

 onLoad: function (options) {var that = thiswx.request({// 请求地址url: '',//填写自己的请求地址//传页码和每页显示的数量data: {length: 0},success: function (res) {that.setData({list: res.data.data})}})},

onReachBottom: function () {var that = thisvar length = this.__data__.list.lengthvar arr = this.__data__.listwx.request({// 请求地址url: '',//填写自己的请求地址//传页码和每页显示的数量data: {length: length},success: function (res) {//判断是否有数据，如果没有数据给吃提示if (res.data.data != '') {wx.showToast({title: '正在加载中',icon: 'loading',duration: 2000})//把值发送到前端进行渲染that.setData({list: arr.concat(res.data.data)})} else {wx.showToast({title: '没有更多数据！',icon: 'error',duration: 2000})}}})},

后端控制器代码：

//此方法为微信小程序下拉加载更多public function last(Request $request){//接收前端分页的值$length = $request->get('length');//实例化模型$model = new LastModel();//调用模型查询出数据$Rasdata = $model->Show($length);return ['code' => '200', 'msg' => '查询成功', 'data' => $Rasdata];}

后端模型代码：

 //连接表格protected $table = '';//实现列表下拉public function Show($length){return $this->offset($length)->limit(5)->get();}

微信小程序实现简单下拉加载更多相关推荐

微信小程序如何实现上拉加载更多数据?
思路:在下拉到页面的时候我们可以进行数据请求,请求到在上次加载完毕的后五条数据 (举个例子),通过page(页码),count(加载数据得条数)与start进行联接,我们可以发现:start:(pag ...
【微信小程序】实现上拉加载更多
小程序上拉加载更多首先我们得运用到小程序的往下拉触底事件,如下图所示代码量很少,方便理解,主要还是要有逻辑,也不说废话了直接上代码吧 data: {paging:5//显示几条内容}onReach ...
微信小程序下拉框插件_微信小程序自定义select下拉选项框组件的实现代码_清玖_前端开发者...
知识点:组件,animation,获取当前点击元素的索引与内容微信小程序中没有select下拉选项框,所以只有自定义.自定义的话,可以选择模板的方式,也可以选择组件的方式来创建. 这次我选择了组件, ...
微信小程序自定义select下拉选择组件
微信小程序自定义select下拉选择组件微信小程序原生开发中,常用到的是从底部弹起的滚动选择器(picker),而有些项目需要用到下拉选择,话不多说,下面就可以把下拉选择封装成一个自定义组件: 1. ...
微信小程序之select下拉框
wxml: <view class="classify-kuangjia"><view class="classify-kuangjia2"& ...
IM 聊天页面下拉加载更多--类似微信顺滑展示
背景领导在会议上说我们的 IM 聊天页面的用户体验不太好,尤其是下拉加载更多会跳动,让我优化一下.之前还确实没有注意到这一点,现场拿出手机和微信做对比,不比不知道,一比还真是发现了问题.微信 ...
微信小程序中高清图片替换加载策略
微信小程序中高清图片替换加载策略前言一.基本思想二.具体步骤 1.图片大小对比 2.代码流程总结前言随着微信的不断发展,微信小程序凭借着它用户基数大,无下载安装等优点开始逐渐替代传统app ...
H5 下拉加载更多(模拟微信聊天记录）
前言前段时间用H5实现一个实时聊天的功能.发现很难实现像微信聊天记录一样下拉加载更多记录.市面上大部分的 Web 项目实现的效果都是上拉加载,下拉刷新.下拉加载更多很少见,下拉在加载数据方面与上拉是 ...
ASP.NET仿新浪微博下拉加载更多数据瀑布流效果
闲来无事,琢磨着写点东西.貌似页面下拉加载数据,瀑布流的效果很火,各个网站都能见到各式各样的展示效果,原理大同小异.于是乎,决定自己写一写这个效果,希望能给比我还菜的菜鸟们一点参考价值. ...
html5页面下拉加载更多_使您的产品页面销售更多的5条提示
html5页面下拉加载更多 Getting visitors to your website requires a great deal of work and, for many businesse ...

微信小程序实现简单下拉加载更多

微信小程序实现简单下拉加载更多相关推荐

最新文章

热门文章