开发微信小程序动态页面的示例：
在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"
})
}
})
