怎么开发微信小程序动态页面 微信小程序 动态创建页面

文章摘要：怎么开发微信小程序动态页面 微信小程序 动态创建页面

开发微信小程序动态页面的示例： 在wxml文件中添加以下代码。 <swiper indicat […]

开发微信小程序动态页面的示例：

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

    })

  }

})