慕课网-微信小程序入门与实战-常用组件API开发技巧项目实战-第4章第二个页面新闻阅读页面-使用Swiper组件构建轮播图

使用Swiper组件构建轮播图

1.打开项目 ReaderMovie

2.进入目录 pages，新建目录 posts

3.进入目录 pages/posts，选择新建Page， 名字为 posts，新建后文件 app.json 新增了 posts 的路径

 

4.但是 posts 文件无法显示出来，如果想显示，需要调整一下 app.json 的代码

{
  "pages": [
    "pages/posts/posts",
    "pages/welcome/welcome" 
  ],
  "window": {
    "navigationBarBackgroundColor": "#b3d4db"
  },
  "sitemapLocation": "sitemap91.json"
}

5.保存文件，看虚拟器效果

6.进入目录 pages/posts，修改文件 posts.wxml

<view>
  <swiper>
    <swiper-item>Content</swiper-item>
    <swiper-item>Content</swiper-item>
    <swiper-item>Content</swiper-item>
  </swiper>
</view>

7.保存文件，看虚拟器效果，用鼠标按住 Content 范围左滑动，可以滑动两屏

8.到网上下载慕课网课程源码，复制源码目录下的 images 目录下的所有图片和目录，然后进入微信开发工具项目中，选择目录 images，鼠标右键选择"硬盘打开"，直接在打开目录下鼠标右键选择粘贴，把源码的图片拷贝到项目中

9.进入目录 pages/posts，修改文件 posts.wxml

<view>
  <swiper>
    <swiper-item><image src="/images/wx.png"></image></swiper-item>
    <swiper-item>Content</swiper-item>
    <swiper-item>Content</swiper-item>
  </swiper>
</view>

10.保存文件，看虚拟器效果，图片还没有配置好

 

11.进入目录 pages/posts，修改文件 posts.wxml

<view>
  <swiper>
    <swiper-item><image src="/images/wx.png" style="width:100%;height:500rpx"></image></swiper-item>
    <swiper-item>Content</swiper-item>
    <swiper-item>Content</swiper-item>
  </swiper>
</view>

12.保存文件，看虚拟器效果，高度没有生效，原因是 image 只是一个子项，它还有父容器，需要给父容器高度

13.进入目录 pages/posts，修改文件 posts.wxml

<view>
  <swiper>
    <swiper-item style="width:100%;height:500rpx"><image src="/images/wx.png" style="width:100%;height:500rpx"></image></swiper-item>
    <swiper-item>Content</swiper-item>
    <swiper-item>Content</swiper-item>
  </swiper>
</view>

14.经过测试没有效果

15.进入目录 pages/posts，修改文件 posts.wxml

<view>
  <swiper style="width:100%;height:500rpx">
    <swiper-item><image src="/images/wx.png" style="width:100%;height:500rpx"></image></swiper-item>
    <swiper-item>Content</swiper-item>
    <swiper-item>Content</swiper-item>
  </swiper>
</view>

16.经过测试，高度生效了