微信小程序 自定义toast样式
时间: 2024-10-27 19:09:22 浏览: 11
微信小程序中,自定义`toast`样式可以通过修改组件的样式属性来实现。`Toast`组件是用于显示短时间提示信息的基本控件,如果你想自定义它的样式,可以在你的项目里设置全局样式表或者在特定页面的样式块中进行定制。
下面是一个简单的例子,展示如何在全局样式表(app.wxss)中更改 toast 的样式:
```css
.toast {
background-color: #333; /* 背景颜色 */
color: #fff; /* 文字颜色 */
border-radius: 4px; /* 圆角 */
padding: 8rpx 16rpx; /* 内边距 */
font-size: 14rpx; /* 字体大小 */
line-height: 20rpx; /* 行高 */
position: fixed;
bottom: 20rpx; /* 位置 */
width: 100%; /* 宽度 */
z-index: 9999; /* 层级 */
transition: all .2s ease-out; /* 动画过渡 */
}
/* 如果你想让它只在某个页面生效,可以添加到该页面的 scoped 样式 */
page-specific-toast {
/* ... 更具体的样式 ... */
}
```
然后,在需要显示自定义 toast 的地方,你可以直接使用 `wx.showToast` API,并不需要显式指定样式,因为已经应用了全局样式:
```javascript
wx.showToast({
message: '这是一个自定义的提示',
duration: 2000, // 持续时间,单位ms
});
```
阅读全文