wxss 基本控件总结

1. 图片宽高自适应

<image mode='aspectFit' src='a.png'></image>

mode 属性：
默认值：scaleToFill —- 不保持纵横比例缩放图片，使图片的宽高完全拉伸至填满image标签

aspectFit —- 保持纵横比例缩放图片，使图片的长边能够完全显示出来，也就说图片可以完整的显示出来

aspectFill —– 保持纵横比例缩放图片，只保证图片的短边能够完全显示出来，也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取

top —- 不缩放图片，只显示图片的顶部区域

bottom —- 不缩放图片，只显示图片的底部区域

center —- 不缩放图片，只显示图片的中间区域

left —- 不缩放图片,只显示图片的左边区域

right —– 不缩放图片，只显示图片的右边区域

top left —- 不缩放图片,只显示图片的左上边区域

top right —- 不缩放图片,只显示图片的右上边区域

bottom left —- 不缩放图片,只显示图片的左下边区域

bottom right —- 不缩放图片,只显示图片的右下边区域

2. 图片水平居中

.img_icon_bg {
  width: 100%;
  height: auto;
  line-height: 0;
  margin-top: 61px;
  text-align: center;
}
.img_icon {
  width: 95px;
  height: 95px;
  display: inline-block;
}

3. 布局横向排列

 display: flex;
 flex-direction: row;

4.隐藏NavigationBar

5.VM11106:1 Do not have login handler in current page: pages/login/login. Please make sure that login handler has been defined in pages/login/login, or pages/login/login has been added into app.json
解决方案：
1. 检查报错对应js在Page之外是不是var了一些不对的值，如： var RSA = require(‘../utils/wx_rsa.js’);

2.调整app.json中Pages里面的页面注册顺序；

3.检查wxml中bindtap是否在js里面将方法创建。

6.switch样式大小调整
大家都知道微信官方提供的switch 能改变color 但是改变大小常用的width height 不起作用

但是可以这样修改

.wx-switch-input{width:42px !important;height:20px !important;}
.wx-switch-input::before{width:41px !important;height: 20px !important;}
.wx-switch-input::after{width: 18px !important;height: 18px !important;}//中间小圆球

7.input 不沾满屏幕右侧有留白
使用flex布局的时候明明 input style 设置了flex＝1 的属性可是input还是站不满整个屏幕的宽度，右侧有留白，文字被遮挡，不知道是不是一个bug，
解决方案：在input外面包一层view style设置flex＝1 用于沾满整个屏幕 input用于显示文字

<view class="common box boxVc p15">
    <view class="common_key">xxxx</view>
    <view class="flex1">
        <input placeholder-class="common_value" placeholder="{{address.info.addressDetail}}"></input>
    </view>
</view>

wxss 基本控件总结

猜你喜欢