HTML 点击查看更多,微信小程序加载更多和点击查看更多的实现方法

微信小程序加载更多和点击查看更多的实现方法

发布时间：2020-12-31 11:01:19

来源：亿速云

阅读：126

作者：小新

这篇文章给大家分享的是有关微信小程序加载更多和点击查看更多的实现方法的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

具体内容如下

微信小程序加载更多，是将之前的数据和点击加载后请求的数据用concat拼接在一起并执行setData，下面是一个简单的栗子：

index.wxml代码如下

加载更多按钮绑定setLoading

index.js文件代码如下Page({

data: {

loadText:'加载更多',

duanziInfo:[]

//初始化请求

onLoad: function (res) {

var that = this

//内容

wx.request({

url: 'http://xxxxx.com/index.php?m=Industry&a=getDuanziInfo',

data: {token:token},

method: 'GET',

success: function(res){

console.log(res.data.result) //打印初始化数据

that.setData({

duanziInfo:res.data.result

})

}

})

//加载更多

setLoading: function(e) {

var duanziInfoBefore = this.data.duanziInfo

var that = this

wx.showToast({ //期间为了显示效果可以添加一个过度的弹出框提示“加载中”

title: '加载中',

icon: 'loading',

duration: 200

})

wx.request({

url: 'http://xxxxx.com/index.php?m=Industry&a=getDuanziInfo',

data: {token:token},

method: 'GET',

success: function(res){

console.log(duanziInfoBefore.concat(res.data.result)) //打印拼接之后数据

that.setData({

loadText:"数据请求中",

loading:true,

duanziInfo:duanziInfoBefore.concat(res.data.result),

loadText:"加载更多",

loading:false,

})

}

})

}

})

初始化和加载更多中的打印数据如下

(以上是点击查看更多，还可以根据距离视图区域的距离来加载更多，具体实现是将视图用标签，并给其一个固定高度，在给定参数中设置距离像素触发事件。具体文档：https://mp.weixin.qq.com/debug/wxadoc/dev/component/scroll-view.html?t=20161122)

感谢各位的阅读！关于“微信小程序加载更多和点击查看更多的实现方法”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！

HTML 点击查看更多,微信小程序加载更多和点击查看更多的实现方法相关推荐

php点击查看更多,微信小程序加载更多和点击查看更多功能介绍
这篇文章主要为大家详细介绍了微信小程序加载更多,点击查看更多功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了微信小程序加载更多功能实现的具体代码,供大家参考,具体内容如下 ...
微信小程序加载 FengMap地图
实现微信小程序加载FengMap地图,主要通过小程序<web-view>组件的src属性的外链方式加载,如<web-view src="https://fengmap.co ...
有效解决微信小程序加载视频[渲染层网络层错误] Failed to load media
问题1,小程序的视频一般都是放在网络上的,没谁能把视频放本地把,所以在小程序视频插件在加载视频的时候,就会出现如下错误:[渲染层网络层错误] Failed to load media wxml加载视频 ...
微信小程序加载中动画效果
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 效果图: 代码: <view class="line"><image s ...
微信小程序加载并且编译显示富文本编辑器内容
微信小程序如何加载并且显示百度编辑器中的内容一. 下载wxParse文件夹放在根目录下(可以随意更改位置,只要后续能引入成功即可) 二. 在js文件中引入wxParse.js var WxParse ...
微信小程序加载百度地图
1:申请百度地图服务的ak,(个人感觉浏览器和小程序类型没区别,甚至浏览器比小程序更好) 2:配置地图服务,微信小程序开发平台,设置开发设置 3:小程序里添加地图服务的js文件bmap-wx.min. ...
微信小程序加载本地图片方法
目录结构如下,只要图片按正确的方式放入小程序的开发工具的项目中,即可在wxml文件中用内联样式或者image标签都可以引用本地的图片. 步骤一:微信开发工具打开项目步骤二:新建个文件夹(放项目的一 ...
uniapp微信小程序加载spine动画
目录 1.XMLHttpRequest封装 spine-webgl小程序适配修改加载动画 1.XMLHttpRequest封装 function XMLHttpRequest() {this.con ...
微信小程序加载 HTML 标签
肯定有小伙伴遇到过这个问题:加载的数据是一堆HTML 标签这就尴尬了,因为小程序没有提供 webview 来加载这些 HTML.但是不用慌,小程序不提供我们可以自己造个新轮子,自己造不出新轮子咱们找到 ...

HTML 点击查看更多,微信小程序加载更多和点击查看更多的实现方法

HTML 点击查看更多,微信小程序加载更多和点击查看更多的实现方法相关推荐

最新文章

热门文章