xiaochun系列教程--自定义消息提示框

需求描述： 
wx.showToast(OBJECT)接口调用，但是不需要icon和image，即便image为空也有占位，实际上只想输出自定义文本内容。

效果截图： 

代码如下：

1. <!--index.wxml-->
2. <!-- 页面正文 -->
3. <view>
4. <block wx:for="{{50}}">
5. <view> 123456 123456 123456 123456 123456</view>
6. </block>
7. </view>
8. <!-- 自定义弹窗 -->
9. <view class="showModule" wx:if="{{isShow}}">
10. <!-- 这部分内容可以灵活修改，例如改成一个模态框 -->
11. <view class="text ">{{text}}</view>
12. </view>

1. /* index.wxss */
2.  
3. .showModule {
4. /* 用样式控制隐藏 visibility: hidden;*//* flex 布局 */
5. display: flex;
6. justify-content: center;
7. align-items: center;
8. /* 生成绝对定位的元素，相对于浏览器窗口进行定位 */
9. position: fixed;
10. /* 如果 height,width 不变的情况下，left,top 不用修改 */
11. left: 35%;
12. top: 40%;
13. height: 20vh;
14. width: 30vw;
15. /* 不透明 */
16. opacity: 0.99;
17. background-color: #7b7b7b;
18. /* 圆角 */
19. border-radius: 30rpx;
20. }
21.  
22. .showModule .text {
23. /* flex 布局 */
24. display: flex;
25. /* 字体加粗 */
26. font-weight: bold;
27. color: white;
28. font-size: 13pt;
29. font-family: "微软雅黑";
30. /* Helvetica,
31. Arial,
32. Hiragino Sans GB,
33. Source Han Sans CN,
34. PingFang SC,
35. Roboto,
36. 微软雅黑,
37. Heiti SC,
38. Microsoft Yahei,
39. sans-serif; */

1. //index.js
2. //获取应用实例
3. var app = getApp()
4. Page({
5. data: {
6. text: "弹窗内容",
7. isShow: false
8. },
9. onShow() {
10. this.setData({
11. text: "用户取消支付",
12. isShow: true
13. })
14. }
15. })