微信小程序解决上滑多次加载重复内容的问题

Zero零分 笔记 2,056 0 10个月前

突然觉得,在小程序内,没有true和false解决不了的问题!

今天在写微信小程序的时候,下拉会出现多次加载的问题,而且内容还是一样。

因为通过手滑的时候,难免会滑多次!折腾了很久,才发现,一样可以用true和false来解决问题!

滚动是用scroll-view(view的原理一样)

1、在上滑的时候会触发一个加载数据的function,所以在触发加载数据function前加入一个判断!判断true是触发加载数据,否则不触发!

2、在加载数据的function中加入一个设置函数。加载开始时设置为false,当数据加载完后,重新设置为true。

这样,在数据加载时,就无法再次触发上滑加载,当数据加载完后,滚动条已经距离底部有一段距离了。

如果需要再次触发,还需要滚动到底部!

 

发布:2021-11-12 16:22:30
标签:
链接:https://blog.32xp.com/wechat-loading.html
END

微信小程序scroll-view下拉刷新,出现一直刷新

用scroll-view,主要原因是,可以在顶部固定一个模块,虽然position:fixed可以实现,但发现在真机上总会出现一条小白条,看着不是很舒服 scroll-view下拉刷新,需要用到几个属性:scroll-view官方说明 refresher-enabled:开启自定义下拉刷新 refresher-threshold:设置自定义下拉刷新阈值 refresher-default-style:设置自定义下拉刷新默认样式,支持设置 black | white | none, none 表示不使用默认样式 refresher-background:设置自定义下拉刷新区域背景颜色 refresher-triggered:设置当前下拉刷新状态,true 表示下拉刷新已经被触发,false 表示下拉刷新未被触发 主要是:refresher-triggered,当值为FALSE时,关闭刷新,默认值是FALSE,原先一直在设置复位:TRUE,所以一直刷新,改FALSE后,才解决 下拉刷新: bindrefresherrefresh: function (e) { let that = this; wx.showLoading({ title: '正在刷新...', mask: true, }) that.setData({ page: 1 }) that.GetData() }, 下拉刷新复位 bindrefresherrestore: function (e) { let that = this; that.setData({ refresher: false, }) }, 而开始一直设置refresher值为true!
笔记 ·

微信小程序scroll-view禁止滚动条

微信小程序禁用scroll-view滚动条 ::-webkit-scrollbar { display: none; } 其实也简单,就是这样一个CSS样式,关键是这个样式要放在哪里! 在写的时候,一直无法生效,翻看之前写的,也是一样的,但之前的可以生效! 认真翻看才发现,这个要在在app.wxss里,并不是写在页面上!如果怕兼容,可以全部都写上 ::-webkit-scrollbar { display:none; width: 0 !important; height: 0 !important; -webkit-appearance: none; background: transparent; color: transparent; } 以前就是因为全部都写上,在翻看时,一直都没有去翻app.wxss!
笔记 ·

wordpress结合微信小程序API接口开发构想

wordpress结合小程序插件百度搜索下已经都有现成的,一般都是结合 WordPress API 插件给小程序提供JSON数据接口! 像文章内有带图片,视频元素的,无法直接在小程序内显示 小程序代码示例: 之前一直考虑在小程序内处理文章数据,感觉比较累!是否可以通过数据源上处理? WordPress上读取的文章,几乎都是用P标签分割段落和图片,视频,即,即便是图片img标签也会被P标签包裹!在读取的文章中以P标签分割,重组数组 类似: array=array( "type"=>"txt",//例如:txt:文本,img:图片,video:视频... "content"=>"内容"//如果是图片或者视频,直接写提取地址 ); 小程序读取文章数据时,循环数组,用type判断是文章还是图片又或是视频 剩下的就是小程序内样式
笔记 ·

微信小程序开发新版本检测、网络请求、json格式判断封装

微信小程序开发新版本检测、网络请求、json格式判断封装,放在APP.JS App({}) 里,方便各个页面调用 1、小程序新版本检测 if (wx.canIUse('getUpdateManager')) { const updateManager = wx.getUpdateManager() updateManager.onCheckForUpdate(function (res) { // 请求完新版本信息的回调 if (res.hasUpdate) { updateManager.onUpdateReady(function () { wx.showModal({ title: '更新提示', content: '新版本已经准备好,是否重启应用?', success: function (res) { if (res.confirm) { updateManager.applyUpdate() } } }) }) updateManager.onUpdateFailed(function () { // 新的版本下载失败 wx.showModal({ title: '已经有新版本了哟~', content: '新版本已经上线啦~,请您删除当前小程序,重新搜索打开哟~' }) }) } }) } 2、网络数据请求 request: function (url, data = false, callback) { wx.request({ url: url, data: data, method: 'POST', header: { "Content-Type": "application/x-www-form-urlencoded" }, success: function (res) { if (res.statusCode != 200) { return callback && callback(false); } else { return callback && callback(res.data); } }, fail: function (res) { return callback && callback(false); } }) } 页面调用: app.request(url, false, (res) => {}) 3、JSON格式检测 isJson: function (string) { try { if (typeof JSON.parse(string) == 'object') { return true; }else{ return false; } } catch (e) { // console.log(e); return false; } }
笔记 ·

百度AI语音演示接口后获取的音频流处理

百度之前的演示接口是:type=tns&per=4100&spd=5&pit=5&vol=5&aue=6&tex=,直接get请求,在文章转语音时直接在后面加入文字就可以输出! 今天看了下,发现改了。改成了post请求,另外还会判断来源Referer。 也不知道是什么时候改版的!博客的文章语音输出全部失效。 用接口获取到的,也都是音频流。 PHP,用64位处理下解码,直接输出音频! 接口:https://plug.32xp.com/baidu/mp3/?txt=这里输入文字! 好像目前还没有过多的限制,目前还能获取到。接口暂时就用成熟女声!
笔记 ·
Zero零分
站龄15年资深站长
一个喜欢折腾,却又折腾不出像样东西的,不会PHP的PHP程序员!
476
文章
26
评论
27
分类
839
标签
7
友链
onlinelovesky 317355746 122551965@qq.com

百度广告