列表渲染**
简单列表
小程序在组件上使用wx：for属性实现列表渲染，即同一个组件批量出现多次，内容可以不同。其原理是使用wx：for绑定一个数组，然后就可以自动用数据中的每个元素以此渲染该组件，形成批量效果。
flex模型
小程序使用flex模型提高页面布局的效果，这是一种灵活的布局模型，当页面需要适应不同的屏幕尺寸和设备类型时该模型可以确保元素在恰当的位置。
效果展示
轮播图实现：
<!--轮播图--><view class="SlideShow"><swiper circular="true" autoplay="true" indicator-dots="true" ><block wx:for="{{SlideShowImage}}" wx:key="index" wx:for-item="Slide"><swiper-item class="SlideShowPage"><image src="{{Slide}}"></image></swiper-item></block></swiper></view>
下拉菜单：
<!--内容区域--><view class="mainPage" ><scroll-view scroll-y="true"><block wx:for="{{PicandText}}" wx:key="Page" wx:for-item="maincontainer"><view class="main" ><image src="{{maincontainer.picture}}"></image><text>{{maincontainer.text}}</text></view></block></scroll-view></view></view>
素材保存在js文件中：
SlideShowImage:["/images/slideshow/img1.png","/images/slideshow/img2.png","/images/slideshow/img3.png","/images/slideshow/img4.png","/images/slideshow/img5.png"],PicandText:[{picture:"/images/pictures/pic1.png",text:"青春短暂，还好有你"},{picture:"/images/pictures/pic2.png",text:"追寻心中的爱情"},{picture:"/images/pictures/pic3.png",text:"江湖的快意恩仇"},{picture:"/images/pictures/pic5.png",text:"复仇的烈焰从未熄灭"},{picture:"/images/pictures/pic6.png",text:"谁告诉你桃园一定美好"},{picture:"/images/pictures/pic7.png",text:"刀不和鞘，心不容情"}]
百度网盘：/s/1kMxOBT0NN2choNMg2GxuGQ
提取码：fmwn
