小程序开发心得

 

一、View的居左显示

在wxss里可以设置样式与布局方式，position:fixed可以让控件居左，居上，居右和居下。通过left:50rpx;等设置居该位置以及距离。

但是这种属于绝对定位，感觉不太灵活。

fixed方式是严格定在屏幕中某一位置，如处在可滑动或变换的父布局内，则会显示异常，父布局移动而子布局定住。

 

二、布局背景的阴影和圆角设置

微信小程序边框设置

box-shadow设置阴影

border-top-left-radius设置左上角圆角，值为百分比如1%，其他三个角同理。

三、View的偏移

如果想让一个view叠加在另一个上面，有一种方法是设置view的position属性为相对(relative)，之后设置某一位置的偏移量即可，如50rpx或-50rpx，一个是正向偏移，一个是反向偏移。

微信小程序布局位置设置

四、横向列表设置

微信小程序横向列表显示问题

scroll-view设置croll-x为true。

scroll-view子布局view_container设置display为flex。同时flex-direction为row。并且white-space为nowrap

之后在view_container里设置view使用wx:for属性进行循环生成列表。

五、text自动换行，限定行数

微信小程序text显示两行

微信小程序文本换行问题

涉及到的css属性

1、text-overflow

text-overflow:文本溢出处理

这个属性有三个值

clip:裁剪多余部分

ellipsis:省略号代替多余文本

string:使用给定文本替换多余文本

2、overflow

overflow:溢出处理

其值如下

visible:默认值，不处理，仍然显示溢出部分

hidden:隐藏溢出部分

scroll:内容会被裁剪，但是浏览器会显示滚动条以便查看内容

auto:如果内容被裁减，则浏览器会显示滚动条以便查看内容

inherit:从父类继承overflow属性

3、display:-webkit-box

box属性是与其他属性结合使用

-webkit-line-clamp:2 这个属性需要与-webki-box属性结合使用，限制文本行数

-webkit-box-orient:设置伸缩盒子对象子元素排列方式，作为结合属性使用

以上几点做到后，单个布局中的文本换行应该就可以做到了。但是处于横向列表中时，显示仍然有问题，接下来看一下这个重要的属性。

4、white-space

这个属性是控制文本中文字多余一行时空格和tab显示效果的。

主流用法有三个值

normal:默认值，没有新起一行也没有tab，直接连续显示

pre-wrap:会有新的一行，也会有tab，像真正的课文

pre-line:会有新的一行，但是没有tab，这种像段落间开头不空格，直接左侧对齐显示。

 

六、image拉伸压缩设置

微信小程序image拉伸压缩设置

通过设置mode属性来控制图片如何压缩，在wxml里设置。