用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

微客吧 首页 教程 微信小程序 新手教程 查看内容

文字超出限制在末尾加省略号,showToast消息提示接口,在图片未能正确加载时 显示默认 ...

纸飞机 2018-3-8 09:39

一:文字超出限制如何在末尾加省略号作者:YanzYan,原文地址 当文字超出一行时会自动换行 那如何让文字不自动换行并在末尾加上省略号呢?我查资料的时候搜到这个博客 http://blog.csdn.net/u010168409/article/deta ...

一:文字超出限制如何在末尾加省略号

作者:YanzYan,

原文地址


当文字超出一行时会自动换行 那如何让文字不自动换行并在末尾加上省略号呢?

我查资料的时候搜到这个博客

http://blog.csdn.net/u010168409/article/details/54429678

原贴的答案是这样的

  1. text {
  2. display: -webkit-box;
  3. word-break: break-all;
  4. text-overflow: ellipsis;
  5. white-space: nowrap;
  6. font-size: 32rpx;
  7. overflow: hidden;
  8. -webkit-box-orient: vertical;
  9. -webkit-line-clamp:2;
  10. }

然后自己试验了一下 发现这样写就可以达到效果了

  1. text{
  2. overflow:hidden; //超出一行文字自动隐藏
  3. text-overflow:ellipsis;//文字隐藏后添加省略号
  4. white-space:nowrap; //强制不换行
  5. }

二:在图片未能正确加载时 显示默认图片

用条件渲染 即wx:if,wx:elif,wx:else系列

eg1. 图片

  1. wx:for="{{data}}">
  2. wx:if="{{item.avatar == ''}}" class="avatar" src="/images/cinema.png">
  3. wx:else="{{item.avatar}}" class="avatar" src="{{item.avatar}}" background-size="cover">

eg2. 文字 text、view标签是同样的效果

  1. wx:for="{{data}}">
  2. wx:if="{{item.entity_name==null}}" class="label">
  3. wx:else="{{item.entity_name}}" class="label">{{item.entity_name}}

三:开发showToast消息提示接口

作者:阿灿,来自

授权地址


相信在学习文档或者已经创建项目的开发员们,都很清楚小程序的wx.showToast接口只提供了两种icon【success和loading】展示形式,那假如我想要的是不要图标只要存粹的文字提醒呢?或者是我不要微信单方面提供的那种图片呢?想要自己指定的情况呢?这时候要怎么办..

这几天我根据wx.showToast接口提供的参数,跟着写了个消息提醒模板,

  • 1、如果没有指定icon图标地址,那么就是单纯的显示文字提示,否则就是图标+文字的模式,这时候就要确保icon指向的图片地址是正确的啦。

  • 2、如果没有指定duration提示的延迟时间,默认是1.5s,而我设置的最大值10s是不会自动隐藏消息提示的,除非手动hideToast. 单位:毫秒

  • 3、如果没有指定mask遮罩,默认是跟着显示的,防止触摸穿透

  • 4、如果没有指定cb回调函数,默认直接显示消息提醒,否则可以在等消息提示结束后即刻处理一些其他业务:例如地址跳转,改变订单状态等等

以下是整个模板代码结构:

showToast.wxml:

  1. name="showToast">
  2. wx:if="{{showToast.isShow? showToast.isShow: false}}">
  3. class="toast-bg" wx:if="{{showToast.mask==false? false : true}}">
  4. class="toast-center">
  5. class="toast">
  6. class="toast-icon" src="{{showToast.icon}}" mode="scaleToFill" wx:if="{{showToast.icon}}" />
  7. class="toast-text">{{showToast.title}}

showToast.wxss:

  1. /*showToast*/
  2. .toast-bg {
  3. position: fixed;
  4. top: 0;
  5. bottom: 0;
  6. z-index: 999999;
  7. width: 100%;
  8. height: 100%;
  9. background: rgba(0, 0, 0, .2);
  10. }
  11. /*水平居中必备样式*/
  12. .toast-center {
  13. position: fixed;
  14. z-index: 9999999;
  15. width: 100%;
  16. height: 100%;
  17. text-align: center;
  18. }
  19. .toast {
  20. display: inline-block;
  21. padding: 20rpx 40rpx;
  22. max-width: 600rpx;
  23. font-size: 28rpx;
  24. color: #fff;
  25. background: rgba(0, 0, 0, .5);
  26. border-radius: 10rpx;
  27. text-align: center;
  28. }
  29. /*垂直居中必备样式*/
  30. .toast-center::after{
  31. content: '';
  32. display: inline-block;
  33. width: 0;
  34. height: 100%;
  35. vertical-align: middle;
  36. }
  37. .toast .toast-icon {
  38. display: block;
  39. margin: 0 auto 10rpx auto;
  40. width: 50rpx;
  41. height: 50rpx;
  42. }

showToast.js:

  1. /*
  2. 显示toast提示
  3. title: 提示的内容 必填
  4. icon: 图标,//请指定正确的路径,选填
  5. duration: 提示的延迟时间,单位毫秒,默认:1500, 10000永远存在除非手动清除 选填
  6. mask: 是否显示透明蒙层,防止触摸穿透,默认:true 选填
  7. cb: 接口调用成功的回调函数 选填
鲜花
鲜花
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋
分享至 : QQ空间
收藏