Morning Star's blog
  2. 前端开发
  3. 微信小程序开发

Vant weapp 是微信小程序开发中常用的UI组件库，它提供漂亮的外观，使用起来也非常简单，方便。 最近，有学员问到，使用其对话框控件时如何改变的对话框的背景色，本文就是用来记录解决方案的。

基础代码

首先在页面(index)上加入一个按钮，当点击时，弹出对话框。相应的代码如下:

index.json - 引入对话框控件

1
2
3
4
5
{
  "usingComponents": {
    "van-dialog": "../../vant/dialog/index"
  }
}

index.wxml

1
2
3
4
5
<van-dialog id="van-dialog" />

<view>
  <van-button type="primary" size="large" bindtap='onOpenDialog'>打开弹出框</van-button>
</view>

index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import Dialog from '../../vant/dialog/dialog';

const app = getApp()

Page({
  data: {
  },
  onOpenDialog: function() {
    Dialog.alert({
      title: '标题',
      message: '弹窗内容'
    }).then(() => {
      console.log('dialog closed.')
    });
  },
  onLoad: function () {
  },
  getUserInfo: function(e) {
  }
})

以上代码弹出的对话框为默认的白底黑字的对话框。效果如图:

改变背景色

在 vant weapp 的很多控件中，都提供了一个 customStyle 的属性，用这个属性，可以提供自定义的 css 修饰，从而改变显示风格。

要改变对话框(Dialog)的背景色，只需要使用 customStyle 属性，按照 css 语法设置需要的颜色值即可。

下面是示例代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import Dialog from '../../vant/dialog/dialog';

const app = getApp()

Page({
  data: {
  },
  onOpenDialog: function() {
    Dialog.alert({
      title: '标题',
      message: '弹窗内容',
      customStyle: 'background-color:#112233'
    }).then(() => {
      console.log('dialog closed.')
    });
  },
  onLoad: function () {
  },
  getUserInfo: function(e) {
  }
})

只需要修改 javascript 即可。在第12行中指定了背景色为： #112233。

效果如图:

TAGS