原创

小程序轮播图片的实现,控件绑定的事件的实现

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/mygirlgod/article/details/81055797

小程序轮播使用的控件是swiper,该控件的使用主要注意它的使用参数,如下代码demo,使用注意如下两点

  1. 使用的绑定函数是用bindtap 绑定“onProductsItemTap”函数。
  2. 事件的使用当使用data-id传入如下 key_word参数,可以在js中函数调用得到相应的key_word。
 <swiper indicator-dots="true" autoplay="true" class="swiper">
        <block wx:for="{{bannerArr}}">
            <swiper-item class="banner-item" bindtap="onProductsItemTap" data-id="{{item.key_word}}">
                <image class="item-image" src="{{item.img.url}}" mode="aspectFill" />
            </swiper-item>
        </block>
    </swiper>
 onProductsItemTap: function (event) {
    console.log(event);
    var id = home.getDataSet(event, 'id');
    wx.navigateTo({
      url: '../products/product?id=' + id
    })
  },

如下CSS代码

.swiper{
  height: 400rpx;
  width: 100%;
}
.swiper-box{
  overflow-x: hidden;
}
.banner-item{
  height: 100%;
  width: 100%;
}
.banner-item image{
  height: 100%;
  width: 100%;
}


结果效果如下


文章最后发布于: 2018-07-15 19:05:31
展开阅读全文
0 个人打赏

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 1024 设计师: 上身试试

分享到微信朋友圈

×

扫一扫,手机浏览