css⽂本两端对齐及数字两端对齐
html:
<view class="content">
<view class="title">{{cell.title}}</view>
<view class="name">{{cell.name}}</view>
</view>
css:
.content .title {
width: 20%;
text-align-last: justify;
/* 两端对齐 */
text-align: justify;
}
.
content .name {
width: 30%;
/**
针对 Firefox 的代码 t
ext-align-last 属性规定如何对齐⽂本的最后⼀⾏。
text-align-last 属性只有在 text-align 属性设置为 "justify" 时才起作⽤
www.runoob/cssref/css3-pr-text-align-last.html
*/
text-align-last: justify;
/*  这⾏必加，兼容ie浏览器 */
text-justify: distribute-all-lines;
text-align: justify;
}
时间对齐有点特殊所以要在js中给他拆开
JS:
data: {
list: [
{
status: '已成功',
content: [
{
title: '姓名',
name: '李四',
payTitle: '⽀付⾦额',
pay: '40元',
dataTitle: '⽀付⽇期',
text align centerdate: '2016-06-10',
commissionTitle: '拥⾦',
commission: '28元'
},
]
},
]
},
onLoad: function (options) {
let _this = this;
let dataArr = [];
let list = this.data.list;
this.data.list.forEach((el, i) => {
dataArr.push(item.date.split('-'))
console.log(list[i]['content'][idx]['date'])
list[i]['content'][idx]['date'] = dataArr[i]
})
});
_this.setData({
list: list
})
},
html:
<view class="content">
<view class="title">{{cell.dataTitle}}</view>                    <view class="name-date">
<view>
{{cell.date[0]}}
<text>-</text>
</view>
<view>
{{cell.date[1]}}
<text>-</text>
</view>
<view>{{cell.date[2]}}</view>
</view>
</view>
css:
.name-date {
width: 30%;
display: flex;
align-items: center;
justify-content: space-between; }

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。