小程序模板网

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

发布时间:2017-12-26 11:38 所属栏目:小程序开发教程

需求描述:wx.showToast(OBJECT)接口调用,但是不需要icon和image,即便image为空也有占位,实际上只想输出自定义文本内容。效果截图:代码如下:!--index.wxml--!-- 页面正文 --view block wx:for="{{50}}" view 12 ...

 
 
 

需求描述: 
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. })


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/18246.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询