评论

小程序弯低轮播图制作

轮播图是用户的第一视觉,对于用户对应用的第一印象的影响占有很大比重,这边制作一个弯底的轮播图,希望同学们喜欢

wxml

<swiper class='banner' indicator-dots="{{indicatorDots}}"
  autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  <block wx:for="{{imgUrls}}" wx:key="">
    <swiper-item>
      <image src="{{item}}" class="slide-image" />
    </swiper-item>
  </block>
</swiper>
<view class='wanbox'>
  <image class='wan' src='http://wechatpx.oss-cn-beijing.aliyuncs.com/qixing/ceng.png'></image>
</view>

wxss

.slide-image {
  width: 750rpx;
  height: 345rpx;
}
.banner {
  width: 750rpx;
  height: 345rpx;
}
.wanbox{position: relative;z-index: 99}
.wan {
  display: block;
  width: 750rpx;
  height: 35rpx;
  margin-top: -34rpx;
}
点赞 0
收藏
评论

3 个评论

  • TNT
    TNT
    2019-07-31

    图片下边可以使用 border-radius设置圆弧。。。。

    background: linear-gradient(180deg, rgba(51, 187, 255, 1) 0%, rgba(77, 166, 255, 1) 100%);  border-radius: 0 0 400rpx 400rpx / 0 0 80rpx 80rpx;


    2019-07-31
    赞同
    回复 2
    • 大又元-Javey
      大又元-Javey
      2019-07-31

      谢谢小仙,使用代码实现确实比图片来的好得多,感谢

      2019-07-31
      回复
    • TNT
      TNT
      2019-07-31回复大又元-Javey
      一起学习。
      2019-07-31
      1
      回复
  • 少年啦
    少年啦
    2019-07-31

    直接用border-radius: 遮住不就好了  放图片占资源

    2019-07-31
    赞同
    回复 1
    • 大又元-Javey
      大又元-Javey
      2019-07-31
      嗯嗯,谢谢兆国的建议~
      2019-07-31
      回复
  • 雨声
    雨声
    2019-07-31

    吃藕

    2019-07-31
    赞同
    回复 1
    • 大又元-Javey
      大又元-Javey
      2019-07-31
      要是图能好看一些就不一样了,(手动捂脸)
      2019-07-31
      回复
登录 后发表内容