|
列表渲染、重复的渲染生成组件:wx:for
for.js
Page({
data:{
thismovie:[{name:"我们都是中国人",
desc:"这是一个什么样的电影呢?",
img:"/images/2.png",
},
{name:"这也是一个电影",
desc:"我们都是中国人我们一起来看电影吧",
img:"/images/3.png"}
],
thisok:["a","b","c"]
}
})
for.wxml
<text>{{thismovie[0].name}}</text>
<view class="movie" wx:for="{{thismovie}}">
<image class="movie_image" src="{{item.img}}"></image>
<view class="movie_name">
<text >编号:{{index+1}}{{item.name}}</text>
<text>{{item.desc}}</text>
</view>
</view>
<text wx:for="{{thisok}}">{{item}}</text>
<text>{{thisok[0]}}</text>
for.wxss
.movie{
display: flex;
background-color: royalblue;
margin-bottom: 20rpx;
}
.movie_name{
display: flex;
flex-direction: column;
padding-left: 25rpx;
width: 500rpx //
}
.movie_image{
width: 200rpx;
height: 200rpx;
padding-left: 25rpx;
}
item、index、的使用
app.json 中"pages":["","",""]与xx.js中的Page({})要注意区别,带s和大写P
CSS 彻底理解margin与padding
https://www.jianshu.com/p/73deb2ae7992
|
|