小程序-swiper-item点击事件

最新推荐文章于 2024-07-09 22:53:52 发布

原创最新推荐文章于 2024-07-09 22:53:52 发布 · 1.2w 阅读

1 ·

CC 4.0 BY-SA版权

小程序专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一个使用index.wxml和index.js实现的轮播图组件案例。该组件通过swiper组件展示图片，并通过自定义事件onItemClick捕捉点击事件，显示对应图片ID。案例中包含了三个示例图片及其ID。

index.wxml

  <swiper class="banner"  catchtap="onItemClick">
    <block wx:for="{{dataList}}">
      <swiper-item>
        <image src="{{item.img}}" class="slide-image"  data-postId="{{item.id}}" />
      </swiper-item>
    </block>
  </swiper>

index.js

  /**
   * 页面的初始数据
   */
  data: {

    dataList:[
      { id: 1, img:"http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg"},
      { id: 2, img: "http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg" },
      { id: 3, img: "http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg" },
    ]

  },

  onItemClick:function(event){
      wx.showToast({
        title: event.target.dataset.postid+"",
      })
  },