• 欢迎访问duantianhen的网站,主要总结PHP、Go、服务器、前端、推荐使用最新版火狐浏览器和Chrome浏览器访问本网站

小程序中wxss应用(更新中)

未分类 admin 11个月前 (05-08) 207次浏览 未收录 0个评论

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部分:

  1. #two{
  2.   display:flex;
  3.   flex-direction:row;
  4.   flex-wrap:wrap;
  5.   align-content:center;
  6.   justify-content:space-around;
  7.   height:70vh;
  8. }
  9. #two .area{
  10.   width:46vw;
  11.   text-align: center;
  12. }

 

#two为当前区域外层包装。
#two .area为内部循环包装标签。

HTML部分:

[html] view plain copy

  1. <view id=‘two’>
  2.   <view class=‘area’>
  3.       <image mode=“widthFix” src=‘../assets/images/ttt.jpg’ style=‘background:#faa33a;width:100%;’ />
  4.       <text>左边内容</text>
  5.   </view>
  6.     <view class=‘area’>
  7.       <image mode=“widthFix” src=‘../assets/images/aaa.jpg’ style=‘background:#faa33a;width:100%;’ />
  8.       <text>左边内容</text>
  9.   </view>
  10.     <view class=‘area’>
  11.       <image mode=“widthFix” src=‘../assets/images/bbb.jpg’ style=‘background:#faa33a;width:100%;’ />
  12.       <text>左边内容</text>
  13.   </view>
  14.     <view class=‘area’>
  15.       <image mode=“widthFix” src=‘../assets/images/ccc.jpg’ style=‘background:#faa33a;width:100%;’ />
  16.       <text>左边内容</text>
  17.   </view>
  18.   <view class=‘area’>
  19.       <image mode=“widthFix” src=‘../assets/images/ddd.jpg’ style=‘background:#faa33a;width:100%;’ />
  20.       <text>左边内容</text>
  21.   </view>
  22.     <view class=‘area’>
  23.       <image mode=“widthFix” src=‘../assets/images/ttt.jpg’ style=‘background:#faa33a;width:100%;’ />
  24.       <text>左边内容</text>
  25.   </view>
  26. </view>

 

通过HTML结构使用flexbox布局使每个‘area’视图循环排列并且通过定义外层包装的

[html] view plain copy

  1. flex-direction:row;

实现内部元素横向排列并且通过

[html] view plain copy

  1. flex-wrap:wrap;

让元素自动换行。这同时需要设置内部元素的宽度为一个数值,这个数值使用CSS3的响应式数值。vw vh。

当前内部元素设置为:

[html] view plain copy

  1. #two .area{
  2.   width:46vw;
  3.   text-align: center;
  4. }

46vm的宽度,表示为当前屏幕宽度的46%的宽度部分,正好实现内容换行后形成两行排列的布局。

然后在外层包装定义:

[html] view plain copy

  1. align-content:center;
  2. justify-content:space-around;

align-content:center; 作用是在换行后元素的垂直对齐方式,位于层高的中间位置对齐。

横向的间距则使用justify-content:space-around; 设置元素的自动间距(根据外层的宽度和自身的宽度),在这里我们设置了内部元素的宽度为46vw,表示46%的宽度,两块46%相加是92%的宽度,这里剩余的宽度部分会被平均分配出元素之间的间距形成平均间隔。

备注:#two的高度设置成了70vh,表示这个层的高度相当于70%高度的屏幕区域,为了使内部元素高度的间隔平均相等,这里设置成70%正合适。

知识点:

flexbox布局

justify-content   //用于调整横向布局时的内容对齐方式,分别有五种对齐方式。

/* justify-content:flex-start;*/
/* 项目间隔标准设置,没有间隔左对齐*/

/* justify-content:flex-end;*/
/* 项目右对齐显示*/

 

/* justify-content:center;*/
/* 设置项目中间显示*/

 

/* justify-content:space-between;*/
/* 项目添加间隔且两侧紧贴边沿没有距离*/

 

/* justify-content:space-around;*/
/* 项目添加间隔且两侧也有间隔距离,在项目周围都添加距离*/

 

flex-direction:row  //使元素横向排列

flex-wrap:wrap; //使横向排列的元素实现自动换行。

align-content: //自动换行模式下元素的行对齐方式。

/* align-content:stretch;*/
/* 默认拉伸的对齐方式*/

 

/* align-content:flex-start;*/
/* 贴近顶部不拉伸垂直对齐*/

 

/* align-content:flex-end;*/
/* 贴近底部不拉伸垂直对齐*/

 

/* align-content:center;*/
/* 整块垂直居中对齐*/

 

/* align-content:space-around;*/
/* 在项目的周围添加间隔平均的间隔*/

 

/* align-content:space-between;*/
/* 在垂直项目之间添加间隔,贴紧最顶和最低*/

3 . 左右布局

转 CSDN — chinaboyliusir的博客  —  微信小程序的左右布局

效果图:

代码:

<view class=”container”>
<text class=”left”>左边的文本</text>
<text class=”right”>右边的文本</text>
</view>

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;
}


本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:小程序中wxss应用(更新中)
喜欢 (0)

您必须 登录 才能发表评论!