小程序-swiper-item点击事件

最新推荐文章于 2025-07-16 11:06:41 发布

熊猫飞

最新推荐文章于 2025-07-16 11:06:41 发布

阅读量1.2w

点赞数

CC 4.0 BY-SA版权

分类专栏：小程序

本文链接：https://blog.youkuaiyun.com/onlyonewf/article/details/73772144

小程序专栏收录该内容

8 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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+"",
      })
  },