今日完成
小程序demo
项目要求
标题超过10个字显示... 摘要超过25个字显示...
思路
使用wxs作为过滤器进行文字处理
<wxs module="textUtil" src="../utils/cutText.wxs"></wxs>
<view class="title">{{textUtil.text(item.title,10)}}</view>
<view class="profile">{{textUtil.text(item.digest,25)}}</view>
方法抽离,指定字数添加省略号
// 指定字符串后省略
var text = function (str, number) {
if (str.length > number) {
return str.slice(0, number) + '...'
}
}
module.exports = {
text: text,
}
项目要求
时间在24小时以内显示小时,超过显示日期
思路
同使用wxs进行数据处理
/* 时间戳为毫秒 */
var nowDate = getDate()
// 转化为时间戳
var nowTimeStamp = nowDate.getTime()
/* ============= 多少时间以前====================== */
var timeAgo = function (timeStamp, format) {
// 时间差
var TDOA = nowTimeStamp - timeStamp;
console.log(TDOA)
// 一小时以内
if (TDOA < 3600000) {
return Math.ceil(TDOA / 60000) + '分钟之前'
// 24小时以内
} else if (TDOA >= 3600000 && TDOA < 82800000) {
return Math.ceil(TDOA / 3600000) + '小时之前'
// 24小时后
} else if (TDOA >= 82800000) {
// 时间格式化
return dateFormat(timeStamp, format)
}
}
/* ================================================= */
//=================== 时间格式化======================
var formatNumber = function (n) {
n = n.toString()
return n[1] ? n : '0' + n
}
var regYear = getRegExp("(y+)", "i");
var dateFormat = function (timestamp, format) {
if (!format) {
format = "yyyy-MM-dd hh:mm:ss";
}
timestamp = parseInt(timestamp);
// 通过getDate()方法获取date类型的时间
var realDate = getDate(timestamp);
function timeFormat(num) {
return num < 10 ? '0' + num : num;
}
var date = [
["M+", timeFormat(realDate.getMonth() + 1)],
["d+", timeFormat(realDate.getDate())],
["h+", timeFormat(realDate.getHours())],
["m+", timeFormat(realDate.getMinutes())],
["s+", timeFormat(realDate.getSeconds())],
["q+", Math.floor((realDate.getMonth() + 3) / 3)],
["S+", realDate.getMilliseconds()],
];
var reg1 = regYear.exec(format);
// console.log(reg1[0]);
if (reg1) {
format = format.replace(reg1[1], (realDate.getFullYear() + '').substring(4 - reg1[1].length));
}
for (var i = 0; i < date.length; i++) {
var k = date[i][0];
var v = date[i][1];
// getRegExp初始化一个正则表达式对象
var reg2 = getRegExp("(" + k + ")").exec(format);
if (reg2) {
format = format.replace(reg2[1], reg2[1].length == 1
? v : ("00" + v).substring(("" + v).length));
}
}
return format;
}
// =====================================================
module.exports = {
timeAgo: timeAgo,
dateFormat: dateFormat
}
<wxs module="dateUtil" src="../utils/timeUtils.wxs"></wxs><text class="data">{{dateUtil.timeAgo(item.create_at,'yyyy-MM-dd')}}</text>
遇到的问题
wxs是有别于js的一套语法 有些功能相同,有些不同
wxs中不可使用new data获取时间对象
需要使用getDate()
项目需求
每14个字换行
思路
使用vue的filter
因为用的是element ui 的table组件 动态数据需要 slot-scope="scope"处理
<el-table-column prop label="名称" width="130" align="center">
<span
slot-scope="scope"
:style="{'white-space':'pre-wrap'}"
>{{scope.row.title | filterA(2,'\n')}}</span>
</el-table-column>
filte注册为全局组件
在main.js中import导入
import Vue from "vue";
// value原始文本,number插入位置,text插入文本
Vue.filter("filterA", function(value, number, text) {
if (value.length > number) {
let reg = RegExp(`(.{${number}})`, "g");
// console.log(reg);
return value.replace(reg, `$1${text}`);
} else {
return value;
}
});
通过使用RegExp对象动态生成正则表达式
遇到的问题
当使用本地filter时会报错
查阅相关资料 大概是因为放置顺序问题 但未找到实际解决办法
项目要求
展示点赞及收藏状态
思路
通过wxs定义并使用indexOf进行判断循环渲染的文章是否在获取的点赞及收藏列表中
动态添加class
<text class="likes"><text class="{{textUtil.indexOf(actionList.loves,item.id)>-1? 'red': ''}}">点赞</text>{{item.love_sum}}</text>
<text class="favorites"><text class="{{textUtil.indexOf(actionList.collects,item.id)>-1? 'red': ''}}">收藏</text>{{item.collect_sum}}</text>
// 定义indexof
function defineIndexOf(str, val) {
return str.indexOf(val);
}
module.exports = {
indexOf: defineIndexOf
}
返回列表
评论