样式知识点
cursor: pointer;//鼠标变小手
text-overflow: ellipsis;//单行文本超出显示。。。(需配合width)
overflow: hidden;
white-space: nowrap;
多行超出显示。。。
overflow: hidden;
text-overflow: ellipsis;
display:-webkit-box;
-webkit-line-clamp: 4;//几行显示。。。就是几
-webkit-box-orient: vertical;
两端对齐文字
// text-align: justify;
// text-align-last: justify;
配合min-width使用
文字后面加:
&::after {
content: ":";
position: absolute;
top: 0;
right: 6px;
bottom: 0;
margin: auto;
}
解决flex布局justify-content:space-between
最后一行不满事,让子元素靠左
.container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.container:after{
content:'';
/*这个宽度和子元素宽度一致*/
width: 480px;
height: 0;
display: block;
}
flex中间与两边间距相同
justify-content:space-evenly;
icon图标与span下对其
1: inline-flex 结合 align-items
elem {
display: inline-flex;
align-items: center
}
2: inline-block 结合 vertical-align
img,span{
display: inline-block; vertical-align: middle;
}
.container:after{
content:'';
/*这个宽度和子元素宽度一致*/
width: 480px;
height: 0;
display: block;
}
2.在APP.vue里面解决vuex刷新丢失数据的问题
created() {
//在页面加载时读取sessionStorage里的状态信息
if (sessionStorage.getItem('store')) {
this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('store'))));
}
//在页面刷新时将vuex里的信息保存到sessionStorage里
window.addEventListener('beforeunload', () => {
sessionStorage.setItem('store', JSON.stringify(this.$store.state));
});
}
微信小程序
【{【{ url:''}】}】改这样的url的时候要吧整个list先引用一下然后再改值,再传回去
const holidayList = that.data.holidayList
holidayList[Nindex].arr[index].url = ''
holidayList[Nindex].arr[index].saveUrl = ''
that.setData({ holidayList })
console.log(holidayList,"??/")
否则不能及时的更新视图