如何开发微信小程序动态页面

如何开发微信小程序动态页面

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

在wxml文件中添加以下代码。

<swiperindicator-dots="{{true}}"
current="{{currentindex}}">
<swiper-itemwx:for="{{novel}}"wx:key="key">
<viewclass="containercard">
<imagesrc="{{item.imagePath}}"></image>
<text>第{{index+1}}部：{{item.name}}</text>
<text>评价：{{item.comment}}</text>
<textbindtap="onLoad"wx:if="{{index<novel.length⑴}}">返回尾页</text>
</view>
</swiper-item>
</swiper>
<buttonbindtap="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:2pxsolidyellow;
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⑴
})
},
f1:function(event){
this.setData({
//新的数据
"novel[3].name":"《巴黎圣母院》",
"novel[3].comment":"是浪漫主义作品中一座里程碑",
"novel[3].imagePath":"/pages/img/小说5.jpg"
})
}
})

本文来源：https://www.yuntue.com/post/72253.html | 云服务器网，转载请注明出处！