7、列表渲染（循环语句）

admin

列表渲染、重复的渲染生成组件：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