1 . 图片显示样式
image mode 属性
属性名 | 类型 | 默认值 | 说明 | 最低版本 |
---|---|---|---|---|
mode | String | ‘scaleToFill’ | 图片裁剪、缩放的模式 |
注:image组件默认宽度300px、高度225px
mode 有效值:
mode 有 13 种模式,其中 4 种是缩放模式,9 种是裁剪模式。
模式 | 值 | 说明 |
---|---|---|
缩放 | scaleToFill | 不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素 |
缩放 | aspectFit | 保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。 |
缩放 | aspectFill | 保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。 |
缩放 | widthFix | 宽度不变,高度自动变化,保持原图宽高比不变 |
裁剪 | top | 不缩放图片,只显示图片的顶部区域 |
裁剪 | bottom | 不缩放图片,只显示图片的底部区域 |
裁剪 | center | 不缩放图片,只显示图片的中间区域 |
裁剪 | left | 不缩放图片,只显示图片的左边区域 |
裁剪 | right | 不缩放图片,只显示图片的右边区域 |
裁剪 | top left | 不缩放图片,只显示图片的左上边区域 |
裁剪 | top right | 不缩放图片,只显示图片的右上边区域 |
裁剪 | bottom left | 不缩放图片,只显示图片的左下边区域 |
裁剪 | bottom right | 不缩放图片,只显示图片的右下边区域 |
2 . 列表两列显示
转 CSDN — Drupal学习笔记 — 小程序页面布局之Flexbox布局
CSS部分:
- #two{
- display:flex;
- flex-direction:row;
- flex-wrap:wrap;
- align-content:center;
- justify-content:space-around;
- height:70vh;
- }
- #two .area{
- width:46vw;
- text-align: center;
- }
#two为当前区域外层包装。
#two .area为内部循环包装标签。
HTML部分:
- <view id=‘two’>
- <view class=‘area’>
- <image mode=“widthFix” src=‘../assets/images/ttt.jpg’ style=‘background:#faa33a;width:100%;’ />
- <text>左边内容text>
- view>
- <view class=‘area’>
- <image mode=“widthFix” src=‘../assets/images/aaa.jpg’ style=‘background:#faa33a;width:100%;’ />
- <text>左边内容text>
- view>
- <view class=‘area’>
- <image mode=“widthFix” src=‘../assets/images/bbb.jpg’ style=‘background:#faa33a;width:100%;’ />
- <text>左边内容text>
- view>
- <view class=‘area’>
- <image mode=“widthFix” src=‘../assets/images/ccc.jpg’ style=‘background:#faa33a;width:100%;’ />
- <text>左边内容text>
- view>
- <view class=‘area’>
- <image mode=“widthFix” src=‘../assets/images/ddd.jpg’ style=‘background:#faa33a;width:100%;’ />
- <text>左边内容text>
- view>
- <view class=‘area’>
- <image mode=“widthFix” src=‘../assets/images/ttt.jpg’ style=‘background:#faa33a;width:100%;’ />
- <text>左边内容text>
- view>
- view>
通过HTML结构使用flexbox布局使每个‘area’视图循环排列并且通过定义外层包装的
- flex-direction:row;
实现内部元素横向排列并且通过
- flex-wrap:wrap;
让元素自动换行。这同时需要设置内部元素的宽度为一个数值,这个数值使用CSS3的响应式数值。vw vh。
当前内部元素设置为:
- #two .area{
- width:46vw;
- text-align: center;
- }
46vm的宽度,表示为当前屏幕宽度的46%的宽度部分,正好实现内容换行后形成两行排列的布局。
然后在外层包装定义:
- align-content:center;
- justify-content:space-around;
align-content:center; 作用是在换行后元素的垂直对齐方式,位于层高的中间位置对齐。
横向的间距则使用justify-content:space-around; 设置元素的自动间距(根据外层的宽度和自身的宽度),在这里我们设置了内部元素的宽度为46vw,表示46%的宽度,两块46%相加是92%的宽度,这里剩余的宽度部分会被平均分配出元素之间的间距形成平均间隔。
备注:#two的高度设置成了70vh,表示这个层的高度相当于70%高度的屏幕区域,为了使内部元素高度的间隔平均相等,这里设置成70%正合适。
知识点:
flexbox布局
justify-content //用于调整横向布局时的内容对齐方式,分别有五种对齐方式。
flex-direction:row //使元素横向排列
flex-wrap:wrap; //使横向排列的元素实现自动换行。
align-content: //自动换行模式下元素的行对齐方式。
3 . 左右布局
转 CSDN — chinaboyliusir的博客 — 微信小程序的左右布局
代码:
demo.wxss代码如下:
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.left {
font-family: “黑体”;
color: #888;
font-size: 40rpx;
}
.right {
font-family: “楷体”;
color: #ff0000;
font-size: 80rpx;
}