怎么開(kāi)發(fā)微信小程序動(dòng)態(tài)頁(yè)面

開(kāi)發(fā)微信小程序動(dòng)態(tài)頁(yè)面的示例：

在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>評(píng)價(jià)：{{item.comment}}</text>
      <text bindtap="onLoad" wx:if="{{index <novel.length-1}}">返回尾頁(yè)</text>
    </view>
  </swiper-item>
</swiper>
<button bindtap="f1">更新書(shū)籍</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: "中國(guó)當(dāng)代城鄉(xiāng)社會(huì)生活的長(zhǎng)篇小說(shuō)",
        imagePath: "/pages/img/小說(shuō)1.jpg"
      },
      {
        name: "《駱駝祥子》",
        comment: "優(yōu)秀的現(xiàn)實(shí)主義小說(shuō)",
        imagePath: "/pages/img/小說(shuō)2.jpg"
      },
      {
        name: "《家》",
        comment: "入選20世紀(jì)中文小說(shuō)100強(qiáng)（第8位）",
        imagePath: "/pages/img/小說(shuō)3.jpg"
      },
      {
        name: "《悲慘世界》",
        comment: "雨果現(xiàn)實(shí)主義小說(shuō)中最成功的一部代表作",
        imagePath: "/pages/img/小說(shuō)4.jpg"
      },
    ],
    count: 0,
  },  
  onLoad:function(options){
    this.setData({
      currentindex:this.data.novel.length-1
    })
  },
  f1: function(event){
this.setData({
   //新的數(shù)據(jù)
      "novel[3].name": "《巴黎圣母院》",  
      "novel[3].comment": "是浪漫主義作品中一座里程碑",
      "novel[3].imagePath": "/pages/img/小說(shuō)5.jpg"
    })
  }
})