微信小程序動態更新頁面的案例：

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>

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%
}

js文件代碼：

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"
    })
  }
})