微信小程序重新渲染怎么实现?

时间：2023-07-01 14:05 阅读数：25 人阅读分类：知识百科

　　微信小程序重新渲染怎么实现?以下是小编整理的微信小程序重新渲染怎么实现的一些小程序代码，以下的内容供大家参考，有兴趣的请往下看。

　　微信小程序重新渲染效果图

　　首先来看看微信小程序重新渲染效果图，以下四张图从左至右依次是：下来刷新动画、下拉刷新结果、上划加载动画以及上划加载结果，程序中的数据均为模拟数据，不包含网络请求，所以可以直接运行。

　　微信小程序重新渲染方法一：用scroll-view小程序组件实现

　　由于最后没有选择这种实现方法(下拉刷新有bug)，因此只做简单介绍，当然如果没有下拉刷新的需求，scroll-view组件实现列表的渲染很方便，从官方文档可以看到，scroll-view组件集成了以下方法为编程提供很大便捷。

　　scroll-into-view String 值应为某子元素id，则滚动到该小程序数据，元素顶部对齐滚动区域顶部

　　bindscrolltoupper EventHandle 滚动到顶部/左边，会触发 scrolltoupper 事件

　　bindscrolltolower EventHandle 滚动到底部/右边，会触发 scrolltolower 事件

　　bindscroll EventHandle 滚动时触发 event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

　　微信小程序重新渲染方法二：用page页面自带的功能

　　Page() 函数用来注册一个页面。接受一个 object 参数，其指定页面的初始数据、生命周期函数、事件处理函数等。

　　1、在app.json页设置窗口前景色为dark & 允许下拉小程序开发

　　"window":{ "backgroundTextStyle":

　　"dark", "navigationBarBackgroundColor": "#000",

　　"navigationBarTitleText": "wechat", "navigationBarTextStyle":"white",

　　"enablePullDownRefresh": true }

　　2、在list.json页设置允许下拉

　　{

　　"enablePullDownRefresh": true

　　}

　　3、利用onPullDownRefresh监听用户下拉动作

　　注：在滚动 scroll-view 时会阻止页面回弹，所以在 scroll-view 中滚动无法触发onPullDownRefresh，因此在使用 scroll-view 组件时无法利用page的该特*。

　　onPullDownRefresh: function() {

　　wx.showNavigationBarLoading() //在标题栏中显示加载

　　let newwords = [{message: '从天而降',viewid:'-1',time:util.formatTime(new Date),greeting:'hello'}].concat(this.data.words);

　　setTimeout( ()=> {

　　this.setData({

　　words: newwords

　　})

　　wx.hideNavigationBarLoading() //完成停止加载

　　wx.stopPullDownRefresh() //停止下拉刷新

　　}, 2000)

　　}

　　微信小程序重新渲染怎么实现呢?小编已经对这个问题做了回答了，如果您想了解到更多精彩微信小程序内容，敬请多多关注微小乔。