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

支付宝小程序轮播组件

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

轮播组件传值有个奇怪现象,就是必须为propArray

axml部分

<view class="swiper-container">
  <swiper indicator-dots="{{indicatorDots}}" interval="{{interval}}" duration="{{duration}}" circular="{{duration}}"
   onChange="swiperChange" class="swiper" autoplay="{{autoplay}}">
    <block a:for="{{propArray}}" a:key="unique">
      <swiper-item>
        <image src="{{item.imgs}}" data-link="{{item.link}}" class="img" onTap="swipclick"  />
      </swiper-item>
    </block>
  </swiper>
  <view class="dots">
    <block a:for="{{propArray}}" a:key="unique">
      <view class="dot{{index == swiperCurrent ? ' active' : ''}}" data-id="{{item.id}}" onTap="chuangEvent"></view>
    </block>
  </view>
</view>

acs部分

swiper {
    height:485rpx;
}
swiper-item image {
    width: 100%;
    height: 100%;
}
.swiper-container{
  position: relative;
}
.swiper-container .swiper{
  height:485rpx;
}
.swiper-container .swiper .img{
  width: 100%;
}
/* 轮播小点 */
.dots{ 
  position: absolute; 
  left: 0; 
  right: 0; 
  bottom: 20rpx; 
  display: flex; 
  justify-content: center; 
} 
.dots .dot{ 
  margin: 0 8rpx; 
  width: 10rpx; 
  height: 6rpx; 
  background: #ddd; 
  border-radius: 8rpx; 
  transition: all .6s; 
} 
.dots .dot.active{ 
  width: 22rpx;
  background: #1888f0; 
}

js部分

Component({
  mixins: [],
  props: {
    propArray: {
      type: Array,
      value: ''
    },
    links:{
      type: Array,
      value: ''
    }
  },

  data: {
    imgsbox: [],
    swiperCurrent: 0,
    autoplay: true,
    interval: 3000,
    duration: 800,
    circular: true,
    // 将轮播图组件自带的小点隐藏
    indicatorDots: false,
  },
  didMount() { },
  didUpdate() {
    this.setData({
      imgsbox: this.props.imgUrls
    })
  },
  didUnmount() { },
  /**
     * 组件的方法列表
     */
  methods: {
  //轮播图的切换事件
    swiperChange: function(e) {
      this.setData({
        swiperCurrent: e.detail.current
      })
    },
    //点击指示点切换
    chuangEvent: function(e) {
      this.setData({
        swiperCurrent: e.currentTarget.id
      })
    },
    //点击图片触发事件
    swipclick: function(e) {
      var link = e.target.dataset.link;
      if (link == "" || link==null){
        return false;
      }else{
        my.navigateTo({ url: link })
      }
    }
  }
});

 


鲜花

握手

雷人

路过

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

请发表评论

全部评论

专题导读
上一篇:
如何在小程序实现图片lazy-load懒加载效果发布时间:2022-07-18
下一篇:
趣图:当我用第一版的小程序 SDK 写代码时发布时间: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