微信小程序入门实例——swiper

ゝ一世哀愁。 2022-06-08 02:48 299阅读 0赞

index.wxml

index.js

var banners = [
      {
        id: 1,
        img: 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
        url: '',
        name: '告别午高峰'
      },
      {
        id: 2,
        img: 'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
        url: '',
        name: '金牌好店'
      },
      {
        id: 3,
        img: 'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg',
        url: '',
        name: '百亿巨惠任你抢'
      }
    ]
    
      Page({
        data: {
          banners: banners,
          autoplay: true,//是否自动切换  
          indicatorDots: true,//是否显示圆点  
          interval: 5000,//自动切换间隔  
          duration: 500, //滑动动画时长  
          indicatorColor: "blue",//滑动圆点颜色  
          indicatorActiveColor: "#f00000", //当前圆点颜色  
          current: 0, //当前所在页面的 index  
          circular: true  //是否采用衔接滑动  
          //其中只可放置<swiper-item/>组件，否则会导致未定义的行为。 
        },
        swiperClick: function (e) {//点击图片触发事件
          var swiperId = this.data.banners[e.target.dataset.id].id;
          wx.showModal({
            title: '提示',
            content: '您点击了第 “' + swiperId + '” 页面',
            showCancel: false
          });
        }
      })

index.wxss

/**index.wxss**/
    
    .banner {
    	height: 375rpx;
    }
    .banner image {
    	width: 100%;
    	height: 100%;
    }

效果图：

![20170912170549869][]

**转载请注明出处****：[http://blog.csdn.net/chen\_gp\_x][http_blog.csdn.net_chen_gp_x]**

[20170912170549869]: /images/20220608/38e8b427e3a541fea1bf8a1db9a41409.png
[http_blog.csdn.net_chen_gp_x]: http://blog.csdn.net/chen_gp_x