登录 | 注册
小程序交流 +关注 已有0人关注 +发表新主题

小程序banner轮播图-swiper组件

发表在 2019-3-19 14:39 来自PC 复制链接 手机看帖 扫一扫!手机看帖更爽 0 489

小程序banner轮播图-swiper组件

小程序banner轮播图-swiper组件
轮播图每隔几秒钟图片会自动更换一张。在小程序中,我们不需要自己编写代码来实现这样的轮播效果,小程序已经提供了一个现成的组件-swiper

<import src="post-item/post-item-tpl.wxml" />
<view>
  <swiper catchtap="onSwiperTap" vertical="{{false}}"  indicator-dots="true" autoplay="true" interval="5000" circular="true">
    <swiper-item>
      <image src="/images/post/post-1@text.jpg" data-post-id='3' />
    </swiper-item>
    <swiper-item>
      <image src="/images/post/post-2@text.jpg" data-post-id='4' />
    </swiper-item>
    <swiper-item>
      <image src="/images/post/post-3@text.jpg" data-post-id='5' />
    </swiper-item>
  </swiper>
  <block wx:for="{{postList}}" wx:for-item="item" wx:for-index="idx">
    <view catchtap="onTapToDetail" data-post-id="{{item.postId}}">
      <template is="postItemTpl" data="{{...item}}" />
    </view>
  </block>
</view>

最外层<view></view>将成为整个页面的容器,在view的内部,我们加入了一个swiper组件,swiper组件主要由多个swiper-item组成,可以定义任意多个swiper-item

同时,需要注意的是,swiper组件的直接子元素只可以是swiper-item,如果放置其他组件,则会被自动删除。但swiper-item下是可以放置其他组件或者元素的。

swiper-item元素仅仅只是一个容器,我们在每个swiper-item内都加入了一个image组件,用来显示UI效果中的轮播图片,然后将swiper组件的高度和宽度设置好。

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

扫描二维码,手机查看本帖
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

返回顶部
快速回复 发贴