wxss 基本控件总结

最新推荐文章于 2022-11-13 19:11:36 发布

叔怀

最新推荐文章于 2022-11-13 19:11:36 发布

阅读量1.6k

点赞数

分类专栏： # 微信小程序文章标签：小程序

本文链接：https://blog.youkuaiyun.com/NotesChapter/article/details/79919175

版权

微信小程序专栏收录该内容

1 篇文章

订阅专栏

本文总结了小程序中WXSS的基本控件使用，包括图片宽高自适应的mode属性，如scaleToFill、aspectFit和aspectFill等；图片水平居中方法；布局横向排列的实现；隐藏NavigationBar的技巧；解决登录处理程序未定义的常见问题；调整switch样式大小的方法；以及针对input元素不沾满屏幕右侧留白的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>