微信小程序|页面动态更新数据

欢迎点击「算法与编程之美」↑关注我们！

本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。

欢迎加入团队圈子！与作者面对面！直接点击！

问题描述

每一个小程序都是由很多的数据构成的，这些信息数据构成页面内容再通过视图展现给大家。大家平时所使用的微信小程序都是实时更新的将最新的数据内容分享给大家。如果没有进行数据的更新，它可能就会被大众所淘汰。那么如何对小程序的数据进行页面动态更新呢？

解决方案

更新数据并让框架自动更新相关视图需要用到this.setData（）方法。在js中定义一个this.setData（）事件然后绑定到视图按钮上，这样当我们点击页面中的按钮时就可以实现数据更新。（以下例子是对上一期微信小程序的后续完善，有与本文章无关且不懂的内容可以查看小编往期的小程序文章有详细介绍）

（1）首先在wxml中对页面内容进行设置，并创建一个button按钮

bindtap="f1"点击事件并绑定到fi

表1 wxml

current="{{currentindex}}">                      第{{index+1}}部：{{item.name}}       评价：{{item.comment}}       返回尾页         更新书籍

表2 wxss

.container1{   height: 100vh;   display: flex;   flex-direction: column;   justify-content: space-around;   align-items: center; } .novel{   display: flex; } .novel-image{   width: 200rpx;   height: 200rpx } .novel-swiper{   height: 90vh } .card{   height: 100%;   width: 100% } .return-button{   position: absolute;   right: 30px;   top: 20px;   font-size: 25rpx;   font-style: italic;   border: 2px solid yellow;   border-radius: 20% }

（2） 在js中对f1事件进行定义并在this.setData（）中添加更新数据的内容

 表3

Page({   data: {     novel: [       {         name: "《平凡的世界》",         comment: "中国当代城乡社会生活的长篇小说",         imagePath: "/pages/img/小说1.jpg"       },       {         name: "《骆驼祥子》",         comment: "优秀的现实主义小说",         imagePath: "/pages/img/小说2.jpg"       },       {         name: "《家》",         comment: "入选20世纪中文小说100强（第8位）",         imagePath: "/pages/img/小说3.jpg"       },       {         name: "《悲惨世界》",         comment: "雨果现实主义小说中最成功的一部代表作",         imagePath: "/pages/img/小说4.jpg"       },     ],     count: 0,   },     onLoad:function(options){     this.setData({       currentindex:this.data.novel.length-1     })   },   f1: function(event){ this.setData({    //新的数据       "novel[3].name": "《巴黎圣母院》",         "novel[3].comment": "是浪漫主义作品中一座里程碑",       "novel[3].imagePath": "/pages/img/小说5.jpg"     })   } })

效果：当你点击更新书籍按钮时，页面的内容就会更新。

图1

图2

结语

小程序中的数据绑定是单向绑定的。更新数据是不可以直接赋值写入，这样在视图中是不会产生更新效果的。在事件中输入更新的内容时要用双引号才能成为有效的标识符。

END

主  编   |   王文星

责  编   |   江汪霖

 where2go 团队

---

   

微信号：算法与编程之美          

长按识别二维码关注我们!

温馨提示：点击页面右下角“写留言”发表评论，期待您的参与！期待您的转发！