mx-bg-shade 背景渐变

使用该组件可以在页面底部提供一个半椭圆的渐变的背景。

引入

在app.json或index.json中引入组件，详细介绍见快速上手

"usingComponents": {
  "mx-bg-shade": "/miniprogram_npm/m-ui/mx-bg-shade/index"
}

小程序码

可使用微信扫码查看小程序码

#

代码演示

基本用法

背景渐变组件提供了渐变的颜色，透明度供开发者选择。根据不同的色调来搭配不同的透明度来达到不同的效果。我们的示例都是搭配mx-nav-bar组件一起使用。

<mx-bg-shade bgColor="#FF2D84" opacity="0.16" shadow style="height: 100%">
  <view class="container">
    <mx-nav-bar title="背景渐变" bgColor="#FF2D84" show-bg bind:click-left="onClickLeft">
    </mx-nav-bar>
  </view>
</mx-bg-shade>

API

Props

参数	说明	类型	默认值
bg-color	背景颜色	string	#FF2D84
opacity	渐变透明度	string	0.20

Event

事件名	说明	参数
bind:shadescroll	滑动页面时触发	-

外部样式类

名称	说明
custom-class	根节点样式类

solt

名称	说明
-	自定义显示内容