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

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

作者：YanzYan，原文地址 
当文字超出一行时会自动换行 那如何让文字不自动换行并在末尾加上省略号呢？

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

原贴的答案是这样的

text {
    display: -webkit-box;
    word-break: break-all;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 32rpx;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:2;
}

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

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

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

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

eg1. 图片

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

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

<block wx:for="{{data}}">
  <view wx:if="{{item.entity_name==null}}" class="label"></view>
  <view wx:else="{{item.entity_name}}" class="label">{{item.entity_name}}</view>
</block>

三：开发showToast消息提示接口

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

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

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

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

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

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

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

showToast.wxml：

<template name="showToast">  
  <block wx:if="{{showToast.isShow? showToast.isShow: false}}">  
    <view class="toast-bg" wx:if="{{showToast.mask==false? false : true}}"></view>  
    <view class="toast-center">  
      <view class="toast">  
        <image class="toast-icon" src="{{showToast.icon}}" mode="scaleToFill" wx:if="{{showToast.icon}}" />  
        <text class="toast-text">{{showToast.title}}</text>  
      </view>  
    </view>  
  </block>  
</template>  

showToast.wxss：

/*showToast*/  
.toast-bg {  
  position: fixed;  
  top: 0;  
  bottom: 0;  
  z-index: 999999;  
  width: 100%;  
  height: 100%;  
  background: rgba(0, 0, 0, .2);  
}  
/*水平居中必备样式*/  
.toast-center {  
  position: fixed;  
  z-index: 9999999;  
  width: 100%;  
  height: 100%;  
  text-align: center;  
}  
.toast {  
  display: inline-block;  
  padding: 20rpx 40rpx;  
  max-width: 600rpx;  
  font-size: 28rpx;  
  color: #fff;  
  background: rgba(0, 0, 0, .5);  
  border-radius: 10rpx;  
  text-align: center;  
}  
/*垂直居中必备样式*/  
.toast-center::after{  
  content: '';  
  display: inline-block;  
  width: 0;  
  height: 100%;  
  vertical-align: middle;  
}  
.toast .toast-icon {  
  display: block;  
  margin: 0 auto 10rpx auto;  
  width: 50rpx;  
  height: 50rpx;  
}  

showToast.js：

/*  
显示toast提示  
title:    提示的内容 必填  
icon:     图标，//请指定正确的路径，选填  
duration: 提示的延迟时间，单位毫秒，默认：1500, 10000永远存在除非手动清除 选填  
mask:     是否显示透明蒙层，防止触摸穿透，默认：true 选填  
cb:       接口调用成功的回调函数 选填  
 */  
function showToast(obj) {  
    if (typeof obj == 'object' && obj.title) {  
        if (!obj.duration || typeof obj.duration != 'number') { obj.duration = 1500; }//默认1.5s后消失  
        var that = getCurrentPages()[getCurrentPages().length - 1];//获取当前page实例  
        obj.isShow = true;//开启toast  
        if (obj.duration < 10000) {  
            setTimeout(function () {  
                obj.isShow = false;  
                obj.cb && typeof obj.cb == 'function' && obj.cb();//如果有成功的回调则执行  
                that.setData({  
                    'showToast.isShow': obj.isShow  
                });  
            }, obj.duration);  
        }  
        that.setData({  
            showToast: obj  
        });  
    } else {  
        console.log('showToast fail:请确保传入的是对象并且title必填');  
    }  
}  
/**  
 *手动关闭toast提示  
 */  
function hideToast() {  
    var that = getCurrentPages()[getCurrentPages().length - 1];//获取当前page实例  
    if (that.data.showToast) {  
        that.setData({  
            'showToast.isShow': false  
        });  
    }  
}  
module.exports = {  
    showToast: showToast,  
    hideToast: hideToast  
}  

接下来是模板的引用和测试：

test.wxml：

<import src="../../template/showToast.wxml" />  
<template is="showToast" data="{{showToast: showToast}}" />  
<!--上面两句话是放置模板的路径和传入的data！   data传入方式写死固定-->  
<view bindtap="testToast" data-test="1">只传title，单纯文字提醒</view>  
<view bindtap="testToast" data-test="2">指定图标，图标+文字提醒</view>  
<view bindtap="testToast" data-test="3">指定duration，控制toast 3s消失</view>  
<view bindtap="testToast" data-test="31">指定duration=10s，手动2s后关闭toast</view>  
<view bindtap="testToast" data-test="4">指定mask，控制toast遮罩</view>  
<view bindtap="testToast" data-test="5">指定cb， 控制回调处理业务</view>  

test.js：

var feedbackApi=require('../../common/feedbackApi');//引入消息提醒暴露的接口  
Page({    
  data:{    
  },    
  testToast: function(e){  
    var test=e.target.dataset.test;  
    if(test==1){  
      feedbackApi.showToast({title: 'test shoToast title'})//调用  
    }  
    if(test==2){  
      feedbackApi.showToast({  
        title: 'test shoToast title',  
        icon: '/pages/templateImg/loading.gif'  
        })  
    }  
    if(test==3){  
      feedbackApi.showToast({  
        title: 'test shoToast title',  
        duration: 3000          
        })  
    }  
    if(test==31){  
      feedbackApi.showToast({  
        title: 'test shoToast title',  
        duration: 10000          
        })  
        setTimeout(function(){  
          feedbackApi.hideToast();  
        }, 2000)  
    }  
    if(test==4){  
      feedbackApi.showToast({  
        title: 'test shoToast title',  
        mask: false  
        })  
    }  
    if(test==5){  
      feedbackApi.showToast({  
        title: 'test shoToast title',  
        cb: function(){  
          console.log('回调进来了，可以制定业务啦')  
        }  
        })  
    }  
  },  
  onLoad: function(e){  
    wx.setNavigationBarTitle({  
      title: 'test showToast'  
    })  
  }   
})    

演示如下：

9d7c42c3913861d19fcab183e36f6b3b.gif (1012.88 KB, 下载次数: 59)

下载附件

2018-7-12 06:15 上传

b5046e27411452508247af5bd311a204.gif (899.37 KB, 下载次数: 53)

下载附件

2018-7-12 06:15 上传

fbb9b7114100738669585a2ae4c0ee53.gif (828.16 KB, 下载次数: 63)

下载附件

2018-7-12 06:15 上传

以上，就是整个showToast模板的测试结果！如果有不同解决方案，欢迎留言指出~