微信小程序极简入门（三）--豆瓣电影小程序实现页首splash和内容横向滑动_小程序 page({ data: { boards: [ { key: 'in_theaters',

一 实现页面顶部的splash效果

上一节使用了swiper组件实现了全屏的splash效果，本节将再次使用这个组件实现页面顶部的splash效果。
1.打开目录树pages/douban/index.wxml，修改代码为：

<!--pages/douban/index.wxml-->
<swiper style="height: 450rpx" indicator-dots autoplay="true" interval="5000" duration="1000">
  <swiper-item wx:for="{
   { boards[0].movies }}" wx:key="{
   { item.id }}" >
    <navigator hover-class="none">
       <image style="height:450rpx;width:750rpx" src="{
   {
   item.images.large}}" mode="aspectFill"/>
    </navigator>
  </swiper-item>
</swiper>
1
2
3
4
5
6
7
8
9
10
11
12

此次设置height为450rpx，rpx是小程序开发中实现屏幕自适应UI的长度单位。在页面设计上，微信小程序规定屏幕的宽恒为750rpx，iphone6屏幕的宽度为375像素，换算成小程序就是1像素=2rpx，同理其它型号手机1rpx所代表的宽度将视屛宽而定。

2.目录树中打开pages/douban/index.js,修改data声明为：

  /**
   * 页面的初始数据
   */
  data: {
     boards:[{key:'in_theaters'},
1
2
3
4
5