Actualización del menú desplegable WeChat Mini Program-About
Actualmente estoy trabajando en un proyecto de desarrollo de un subprograma de WeChat. Uno de los requisitos es desplegar hacia abajo para actualizar. Esta función se puede aplicar a muchos escenarios, por ejemplo, al realizar una actualización desplegable, la página se puede volver a cargar y los datos se actualizan nuevamente.
Después de cargar el avatar, modificar la información o publicar dinámicas en Moments, puede actualizar los datos tirando hacia abajo para actualizar. A continuación, ¡veamos cómo lograrlo!
Paso 1: configurar el archivo json
Establezca enablePullDownRefresh en verdadero
{
"usingComponents": {
},
"enablePullDownRefresh": true ,
"backgroundTextStyle": "dark",
"navigationBarBackgroundColor":"#F2F2F2",
"navigationBarTitleText":"我的",
"navigationBarTextStyle":"black",
"backgroundColor":"#98D8DD"
}
Paso 2: escriba la función onPullDownRefresh en js
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
var that = this;
that.setData({
currentTab: 0 //当前页的一些初始数据，视业务需求而定
})
this.onLoad(); //重新加载onLoad()
},
El tercer paso: escriba la función onLoad en js
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
wx.stopPullDownRefresh() //刷新完成后停止下拉刷新动效
console.log('finish PullDownRefresh')
// 测试是否重新执行onLoad函数
this.setData({
userInfo: getApp().globalData.userInfo
})
},
Paso 4: experiencia de efecto
Cuando se realiza la acción desplegable, pueden aparecer tres puntos, lo que indica que está esperando su liberación.
Como puede ver en la consola, finalizó PullDownRefresh se generó dos veces. La primera vez es la primera vez que ingresa a esta página después de compilar. La segunda vez es la salida después de que se completa la lista desplegable. En otras palabras, cuando se ejecuta la acción "pull down", la función onLoad se vuelve a ejecutar y la página se vuelve a cargar. También puede recargar datos según sea necesario.
