• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

小程序之轮播图

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

index.js

 

var app = getApp();
Page({
  data: {
    slider: [],
    swiperCurrent: 0,
    indicatorDots: false,
    autoplay: false,
    interval: 5000,
    duration: 1000
  },
  onLoad: function () {
    var that = this;
      that.setData({
        slider: [{
          linkUrl: "/images/banner-hy.png",
          picUrl: "/images/banner-hy.jpg"
        }, {
          linkUrl: "/images/banner-19.png",
          picUrl: "/images/banner-19.jpg"
        }, {
          linkUrl: "#",
          picUrl: "/images/banner-money.jpg"
        }]

      })
  },
  //轮播图的切换事件  
  swiperChange: function (e) {
    //只要把切换后当前的index传给<swiper>组件的current属性即可  
    this.setData({
      swiperCurrent: e.detail.current
    })
  },
  //点击指示点切换  
  chuangEvent: function (e) {
    this.setData({
      swiperCurrent: e.currentTarget.id
    })
  }
}) 

 

 

 

index.wxml

 

<view class="recommend" >  
  <view class="swiper-container">  
    <swiper autoplay="auto" interval="5000" duration="500" current="{{swiperCurrent}}" bindchange="swiperChange" class="swiper">  
      <block wx:for="{{slider}}" wx:key="unique">  
        <swiper-item data->{{index+1}}</view>  
      </block>  
    </view>  
  </view>  
</view>

index.wxss

 

/*banner*/
  .swiper-container{  
    position: relative;  
  }  
  .swiper-container .swiper{  
    height: 430rpx;  
  }  
  .swiper-container .swiper .img{  
    width: 100%;  
    height: 100%;  
  }  
  .swiper-container .dots{  
    position: absolute;  
    right: 40rpx;  
    bottom: 20rpx;  
    display: flex;  
    justify-content: center;  
  }  
  .swiper-container .dots .dot{  
    margin: 0 10rpx;  
    width: 28rpx;  
    height: 28rpx;  
    background: #fff;  
    border-radius: 50%;  
    transition: all .6s;  
    font: 300 18rpx/28rpx "microsoft yahei";  
    text-align: center;  
  }  
  .swiper-container .dots .dot.active{  
    background: #f80;  
    color:#fff;  
  } 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
猜硬币的小程序发布时间:2022-07-18
下一篇:
小程序日期格式化发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap