一：文字超出限制如何在末尾加省略號
當文字超出一行時會自動換行 那如何讓文字不自動換行并在末尾加上省略號呢？
原貼的答案是這樣的
-
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;
-
}
然后自己試驗了一下 發(fā)現(xiàn)這樣寫就可以達到效果了
-
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>
三：開發(fā)showToast消息提示接口
作者：阿燦，來自授權地址 相信在學習小程序文檔或者已經(jīng)創(chuàng)建項目的開發(fā)員們，都很清楚小程序的wx.showToast接口只提供了兩種icon【success和loading】展示形式，那假如我想要的是不要圖標只要存粹的文字提醒呢？或者是我不要微信單方面提供的那種圖片呢？想要自己指定的情況呢？這時候要怎么辦..
這幾天我根據(jù)wx.showToast接口提供的參數(shù)，跟著寫了個消息提醒模板，
-
1、如果沒有指定icon圖標地址，那么就是單純的顯示文字提示，否則就是圖標+文字的模式，這時候就要確保icon指向的圖片地址是正確的啦。
-
2、如果沒有指定duration提示的延遲時間，默認是1.5s，而我設置的最大值10s是不會自動隱藏消息提示的，除非手動hideToast. 單位：毫秒
-
3、如果沒有指定mask遮罩，默認是跟著顯示的，防止觸摸穿透
-
4、如果沒有指定cb回調(diào)函數(shù)，默認直接顯示消息提醒，否則可以在等消息提示結束后即刻處理一些其他業(yè)務：例如地址跳轉，改變訂單狀態(tài)等等
以下是整個模板代碼結構：
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: 提示的內(nèi)容 必填
-
icon: 圖標，//請指定正確的路徑，選填
-
duration: 提示的延遲時間，單位毫秒，默認：1500, 10000永遠存在除非手動清除 選填
-
mask: 是否顯示透明蒙層，防止觸摸穿透，默認：true 選填
-
cb: 接口調(diào)用成功的回調(diào)函數(shù) 選填
|
