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

算法与编程之美

修改于 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

<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

.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"

    })

  }

})

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