8.19 小程序开发中遇到的样式、标签

129 阅读2分钟

一、使用vue 引入vant内置样式

app.wpy文件的<config>标签中

<config>
{
  navigationBarTitleText: '页面标题',
  backgroundColor: '#F7F7F9',
  usingComponents: {
    "van-image": "module:@vant/weapp/dist/image",//van-image标签
    "van-divider": "module:@vant/weapp/dist/divider"//van-divider标签
  }
}
</config>

二、让长段文字只显示两排,之后显示省略号

<style>
.title {
  -webkit-line-clamp: 2; //数字为显示的
  -webkit-box-orient: vertical;
}
</style>

三、内置解析富文本标签

image.png

四、flex-direction

指定了内部元素是如何在弹性容器中布局的,定义了内部元素的排列方向以及顺序。

  • row:(正常情况下横排正序)内部元素的排列与文本方向相同。起始顺序也与文本方向相同。
  • row-reverse: (横排逆序)排列和 row 相同,起始顺序和文本方向相反。

image.png

  • column:(正常情况下竖排正序)内部元素的排列和块轴相同,起始顺序和书写模式的前后点相同。

  • column-reverse: (竖排逆序)表现和column相同,但是置换了主轴起点和主轴终点。

image.png

五、justify-content

  • 子盒子分配站位

  • start: 从行首开始紧密排布。

  • end: 从行尾开始紧密排布。

  • flex-startflex-end: 弹性布局里的startend

  • center: 居中紧密排布。

  • left: 从左边缘开始紧密排布。

  • right:从右边缘开始紧密排布。

  • space-between: 在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素与行首对齐,每行最后一个元素与行尾对齐。

image.png

  • space-around: 在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。

image.png

  • space-evenly: (全部均分)flex 项都沿着主轴均匀分布在指定的对齐容器中。相邻 flex 项之间的间距,主轴起始位置到第一个 flex 项的间距,主轴结束位置到最后一个 flex 项的间距,都完全一样。

image.png