发表于: 2019-12-14 20:40:26

0 1266


今天完成的事情:

文章模块:

增加用户体验页码输入跳转,

修改文章模块样式

微信小程序路由传参

转换时间戳


明天计划的事情:

点击获取文章ID
遇到的问题:

文章ID不知道如何获得,师兄说用 ,dataset

搜索到

wx.createSelectorQuery().selectViewport().scrollOffset(function (res) 

明天研究下怎么应用


收获:

文字溢出

text-overflow:

clip:剪掉

ellipsis:省略号

使用text-overflow属性是让文字溢出的时候被剪掉还是省略号.

注意:

这个需要其他属性配合这使用

overflow:

属性这里是指定内容溢出一个元素框后会发生什么

overflow:hidden

一般用内容会被剪贴到

-webkit-line-clamp

多行溢出.

-webkit-line-clamp:2

这个CSS代码是让文本换行在第二行后后面的文本就不显示出来了跟

overflow:hidden配合这使用.

自适应

display: -webkit-box;

自适应,它会让文本内容自己适应宽高.

路由传参

wx.navigateTo

这个微信路由跳转是保留当前页面跳转到下一个页面,但同时你还可以返回你跳转的页面

代码

var a = {
   id:1
}  
wx.navigateTo({
     url:'/pages/article/articleData/articleData?id='+a.id+'',
   })

没有angular方便。URL传参都是通过路径?后面跟参数,我这种是变量传参,要加字符串拼接但你不直接传a进去它是对象会报错{object Object]}

所以我这直接传进去的值是{id:1}是个对象.

跳转页面接收是已经给你准备好了

/**
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) {
   console.log(options)
 },

这个是跟你准好了所以你直接可以打印出来然后来赋值.

富文本转换功能


 <text class="like_text">{{item.number_of_likes}}</text>

这个是微信自带的直接把你的值写在里面就会自动转换

时间戳

微信时间戳是由自带 但是需要你自己更改基本用法

第一步找到utils文件下面util.js

更改代码

function formatTimeTwo(number, format) {

 var formateArr = ['Y', 'M', 'D', 'h', 'm', 's'];
 var returnArr = [];

 var date = new Date(number);
 returnArr.push(date.getFullYear());
 returnArr.push(formatNumber(date.getMonth() + 1));
 returnArr.push(formatNumber(date.getDate()));

 returnArr.push(formatNumber(date.getHours()));
 returnArr.push(formatNumber(date.getMinutes()));
 returnArr.push(formatNumber(date.getSeconds()));

 for (var i in returnArr) {
   format = format.replace(formateArr[i], returnArr[i]);
 }
 return format;
}

module.exports = {
 formatTime: formatTime,
 formatTimeTwo: formatTimeTwo
}

这是基本代码赋值过来。(后续补上它的运行原理)

var time = require("../../utils/util.js");

 在你所在的文件夹里调用utils文件里面的JS 这里看你自己的路径.

time.formatTimeTwo(this.data.listNeed[i].update_at, 'Y-M-D h:m:s')

注意:

time这里一定要跟你声明上面调用的一样否则会报错.

里面代码就是通过你后台获取的数据来进行转换调用然后在渲染出页面上.







返回列表 返回列表
评论

    分享到