前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信小程序|页面动态更新数据

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

作者头像
算法与编程之美
修改2020-04-28 18:48:12
7.9K0
修改2020-04-28 18:48:12
举报
文章被收录于专栏:算法与编程之美

问题描述

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

解决方案

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

(1)首先在wxml中对页面内容进行设置,并创建一个button按钮

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

表1 wxml

代码语言:javascript
复制
<swiper indicator-dots="{{true}}"

  current="{{currentindex}}">

  <swiper-item wx:for="{{novel}}" wx:key="key">

    <view class="container card">

      <image  src="{{item.imagePath}}"></image>

      <text>第{{index+1}}部:{{item.name}}</text>

      <text>评价:{{item.comment}}</text>

      <text bindtap="onLoad" wx:if="{{index <novel.length-1}}">返回尾页</text>

    </view>

  </swiper-item>

</swiper>

<button bindtap="f1">更新书籍</button> 

</view>

表2 wxss

代码语言:javascript
复制
.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

代码语言:javascript
复制
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

结语

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

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2020-04-28,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 算法与编程之美 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档