评论

banner效果美化

简单的banner样式修改

先上图


wxss:

.bannerSwiper {
    height:300rpx;
    width100vw;
    position: absolute;
    left0rpx;
    top10rpx;
}
.imageBanner {
    width100%;
    height100%;
    border-radius20rpx;
    position: relative;
    padding0;
    line-height100%;
    background: transparent;
    text-align: left;
}


.imageBanner_small {
    transformscale(0.9);
    transition0.2s, ease-in 0s;
    border-radius10rpx;
    width100%;
    height100%;
    position: absolute;
    bottom0;
    z-index100;
    padding0;
    line-height100%;
    background: transparent;
    text-align: left;
    opacity0.5;
}


wxml:

<view class="container">
    <swiper class='bannerSwiper' previous-margin="80rpx" next-margin='80rpx' indicator-dots="true" indicator-color='#999' indicator-active-color='#fff' indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}"
      duration="{{duration}}" bindchange='onChange' circular='true'>
      <block wx:for="{{banner}}">
        <swiper-item>
          <image  class="{{index==selindex?'imageBanner':'imageBanner_small'}}" style="background:{{item}}"></image>
        </swiper-item>
      </block>
    </swiper>
</view>

github地址:https://github.com/jieqwer/-Banner

最后一次编辑于  2020-11-27  
点赞 12
收藏
评论
登录 后发表内容