微信小程序 wxss样式总结

mode 属性：

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

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

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

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

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

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

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

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

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

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

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

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

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

解决方案：

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

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

6.switch样式大小调整

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

但是可以这样修改

7.input 不沾满屏幕右侧有留白

使用flex布局的时候明明 input style 设置了flex＝1 的属性 可是input还是站不满整个屏幕的宽度，右侧有留白，文字被遮挡， 不知道是不是一个bug，

解决方案： 在input外面包一层view style设置flex＝1 用于沾满整个屏幕 input用于显示文字

—————————————大信———

1.display取值

2.float(取值：left，right，none，inherit。)

3.clear：该属滚圆轮性指出不允许有浮动对象的边。（取值：left，right，both，none.）

4.visibility：是否显示对象(取值：visible，hidden，collapse。)

5.overflow：处理溢出内容的方式。(取值：visible，hidden，scroll，auto。)

其他属性：

1. 小程序轮播图知识点(微信小程序自定义模板功能有哪些呢)

小程序轮播图知识点(微信小程序自定义模板功能有哪些呢) 1.微信小程序自定义模板功能有哪些呢

微信小程序不同功能模块都有这些作用： 轮播图 顾名思义，轮播图就是自动切换的幻灯片，它可以使整体的页面效果变得更加灵动。

图片导航 图片导航的作用就可以很多了塌神核，你可以用它来做首页的导航、广告位、分类图片，活动展示图，或者放上一些你想突出表达的内容。图片导航可以一排展示1个到4个不等，大家可以根据自己的需求及效果自团掘行决定 分割线 分割线的作用很简单就是用于不同模块之间作为区分的线条，能够真假页面的整体视觉效果 辅助空白 辅助空白与分割线的作用大体相似，我们可以利用它来做一些分隔的作用，空白大小大家可以自己把控。

商品列表 商品列表这个模块看上去就很简单了，这里你可以展示某个分类的商品，也可以展示你所指定展示的特定商品。商品列表可以选择是一排展示一个商品还是两个商品，同时还可以选择不同分类下商品的展示数量。

视频 这个相信大家都能看懂，这里多展示的就是视频模块，我们可以选择自己所想要展示的封面图和视频链接。 文本导航 文本导航即文字导航部分，我们可以自定义导航模块的背景色、文字颜色及文本内容等，同时可以链接到我们所需要的链接的页面。

商品瞎首搜索 这个模块就是一个文本搜索框，用户可以在小程序前端搜索自己所需要的商品信息。 公告内容 这个模块会展示公告内容，可以是公司简介，可以是商城介绍，我们可以选择公告的背景色及文本颜色。

富文本 富文本跟公告内容相似，不同的是我们可以对文本进行更深层次的编辑，让页面的效果更加完美。 优惠券 优惠券模块即卡券的领取区域，我们可以将我们设置好的优惠券放在这个区域方便用户去领取使用。

注：单个模块最多能添加3个优惠券，如果优惠券过多可使用多个优惠券模块。 底部导航 底部导航也就是我们常说的底部菜单导航，我们可以自定义设置自己所需要的菜单导航部分。

方法/步骤

文字的大坦茄纤小颜色。

.text{

font-size: 1.6em/*文字大小*/

color: #ff00ff/*文字颜色*/

text-align: center/*文字居中*/

}

图片的纳宏样式控制，长度宽度。让仿

.images{

width: 100%

height: auto

}

按钮样式<button>，可以用官网给的样式，可以了自己设定。

button{

width: 50%/*长度*/

background: #ff0/*背景颜色*/

color: #969696/*字体颜色*/

border-radius:5px/*边角原弧度*/

}

button::after{

border: 10px solid #969696/*边框*/

}

透明度，

opacity: 0.3

最多1.0。

浮动和边距，

.fd{

border: 1px solid red/*边框*/

width: 15%/*长度*/

float: left/*浮动*/

margin-left: 20px/*距离左侧*/

}

6

WXSS基本和CSS一样，更多的样式以及详细，请认真学习css

---