0
收藏
评论

小程序弯低轮播图制作

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

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;
}
最后一次编辑于  07-31  (未经腾讯允许,不得转载)
复制链接赞 0收藏评论

7 个评论

  • 雨声
    雨声
    07-31

    吃藕

    07-31
    赞同
    回复 1
    • 惠嘉伟-Javey
      惠嘉伟-Javey
      07-31
      要是图能好看一些就不一样了,(手动捂脸)
      07-31
      赞同
      回复
  • 钟兆国
    钟兆国
    07-31

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

    07-31
    赞同
    回复 1
    • 惠嘉伟-Javey
      惠嘉伟-Javey
      07-31
      嗯嗯,谢谢兆国的建议~
      07-31
      赞同
      回复
  • 仙༊
    仙༊
    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;


    07-31
    赞同
    回复 2
    • 惠嘉伟-Javey
      惠嘉伟-Javey
      07-31

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

      07-31
      赞同
      回复
    • 仙༊
      仙༊
      07-31回复惠嘉伟-Javey
      一起学习。
      07-31
      赞同 11
      回复