慕课网-微信小程序入门与实战-常用组件API开发技巧项目实战-第4章第二个页面新闻阅读页面-Swiper组件属性设置

Swiper组件属性设置

1.进入目录 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><image src="/images/vr.png" style="width:100%;height:500rpx"></image></swiper-item>
    <swiper-item><image src="/images/iqiyi.png" style="width:100%;height:500rpx"></image></swiper-item>
  </swiper>
</view>

2.查看效果

3.进入目录 pages/posts，修改文件 posts.wxss

/* pages/posts/posts.wxss */
swiper {
  width:100%;
  height:500rpx;
}

swiper image {
  width:100%;
  height:500rpx;
}

4.进入目录 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><image src="/images/vr.png" style="width:100%;height:500rpx"></image></swiper-item>
    <swiper-item><image src="/images/iqiyi.png" style="width:100%;height:500rpx"></image></swiper-item>
  </swiper>
</view>

5.进入目录 pages/posts，修改文件 posts.wxml（添加指示点）

<view>
  <swiper indicator-dots="true">
    <swiper-item><image src="/images/wx.png"></image></swiper-item>
    <swiper-item><image src="/images/vr.png"></image></swiper-item>
    <swiper-item><image src="/images/iqiyi.png"></image></swiper-item>
  </swiper>
</view>

6.看效果

7.进入目录 pages/posts，修改文件 posts.wxml（添加自动播放）

<view>
  <swiper indicator-dots="true" autoplay="true">
    <swiper-item><image src="/images/wx.png"></image></swiper-item>
    <swiper-item><image src="/images/vr.png"></image></swiper-item>
    <swiper-item><image src="/images/iqiyi.png"></image></swiper-item>
  </swiper>
</view>

8.进入目录 pages/posts，修改文件 posts.wxml（添加轮播间隔时间和纵向轮播）

<view>
  <swiper indicator-dots="true" autoplay="true" interval="2000" vertical="true">
    <swiper-item><image src="/images/wx.png"></image></swiper-item>
    <swiper-item><image src="/images/vr.png"></image></swiper-item>
    <swiper-item><image src="/images/iqiyi.png"></image></swiper-item>
  </swiper>
</view>