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

微信小程序层叠轮播图vs移动端轮播图

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

一开始看到设计稿的这个层叠效果,不是传统的小程序轮播图,本来想自定义写一个轮播图,但发现用小程序的swiper组件仍能实现,swiper的previous-margin前边距和next-margin后边距,可用于露出前/后一项的一小部分

为了让大家能看到swiper、swiper-item和slide-image代表的哪一块地方,我设置swiper背景色为蓝色,swiper-item背景色为灰色并有黑色边框,slide-image为橙色图片

swiper:滑块视图容器,不会滑动

swiper-item:滑块,除去前后边距30+30=60px的最大宽度100%

slide-image:绝对定位slide-image,水平居中在swiper-slide区域。Slide-image transform:scale(1.1),虽然放大,但不会超过swiper-item区域

wxml:

  <view>
  <swiper autoplay="true" previous-margin="30px" next-margin="30px" bindchange="swiperChange">
    <block wx:for="{{cardSwiper}}" wx:key="{{index}}">
      <swiper-item>
         <image src="{{item.image}}" class="slide-image {{swiperIndex == index ? 'active' : ''}}"/> 
      </swiper-item>
    </block>
  </swiper>
</view>

wxss:

swiper{
  width: 100%;
  height: 360rpx;
  background: #2899FF;
}
swiper-item{
  padding-top: 30rpx;  
  background: #666666;
  border: 1rpx solid #000000;
}
 .slide-image{
  width: 575rpx; 
  height: 300rpx;
  position: absolute;
  left: 50%;
  margin-left: -287rpx;
} 
.slide-image.active{
  transform: scale(1.1);
  transition:all .2s ease-in 0s;
} 

js:

Page({
  data: {
    cardSwiper: [
      {
        image: '../../images/card.png'
      },
      {
        image: '../../images/card2.png'
      },
      {
        image: '../../images/card.png'
      },
      {
        image: '../../images/card2.png'
      }
    ],
    swiperIndex: 0
  },
  swiperChange(e) {
    this.setData({
      swiperIndex: e.detail.current
    })
  }
  
})

 

而移动端的这个轮播图当然可以用swiper这个强大的插件啦

露出前/后一项的一小部分,用slidesPerView这个参数,设置为1.5

还有一个效果是上面储值卡的滑动,会自动匹配下面储值卡的金额,用到回调函数tranitionStart,过渡开始时触发,能获取到现在当前的储值卡是第几个activeIndex

        var swiper = new Swiper('.swiper-container', {
          slidesPerView: '1.5',
          centeredSlides: true,
          spaceBetween: 50,
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
          on:{
          transitionStart: function(){
              var activeIndex=this.activeIndex;
              $('.valueList em').removeClass('cur');
              $('.valueList em').eq(activeIndex).addClass('cur');
          }
          },
        })

 


鲜花

握手

雷人

路过

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

请发表评论

全部评论

专题导读
上一篇:
小程序mpvue下多层次的数据值改变但是页面不动态渲染发布时间:2022-07-18
下一篇:
小程序/js监听输入框验证金额发布时间: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