027-87227388

微信小程序button样式

发布时间:2020-10-31 浏览:1228

  button

  button是小程序中重要的组件

  

微信小程序button样式

  微信官方api

  

微信小程序button样式

  但是这样的效果都不具备很好的美观性

  

微信小程序button样式

  类似于Android开发中的悬浮按钮

  

微信小程序button样式

  表单中的使用

  非表单中实现悬浮按钮效果

  将一个 矢量图图标 用小程序控件封装即可

  这里使用text控件 将矢量图作为其 background-Image

  代码

  wxml

  

  wxss

  这里使用的是 position fixed 所以可以实现 位置固定 类似悬浮按钮

  .icon {

  bottom: 88rpx;

  right: 50rpx;

  position: fixed;

  width: 100rpx;

  height: 100rpx;

  background-color: white;

  border-radius: 50%;

  background-size: 72% 72%;

  background-position: center;

  background-repeat: no-repeat;

  background-image: url("data:image/svg+xml,%3Csvg t='1587350579334' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='3978' width='32' height='32'%3E%3Cpath d='M488 488V192a16 16 0 0 1 16-16h16a16 16 0 0 1 16 16v296H832a16 16 0 0 1 16 16v16a16 16 0 0 1-16 16H536V832a16 16 0 0 1-16 16h-16a16 16 0 0 1-16-16V536H192a16 16 0 0 1-16-16v-16a16 16 0 0 1 16-16h296z' p-id='3979'%3E%3C/path%3E%3C/svg%3E");

  }

  background-image资源网站

  

微信小程序button样式

  海量精美矢量图

  

  复制 svg 代码 注意这里直接使用该url在小程序中是不行的,存在编码错误 下面是一个转编码的网站

  

  转换工具网站 转换后的 就可以在小程序中使用粘贴到 wxss中

  必须使用Button 又想 实现 图标效果

  button有一些其他控件不具备的属性 比如 form 组件中 添加的 button 可以设置 重置表单 提交表单

  

微信小程序button样式

  使用 text 就不行 此时我们使用 button 包裹一个 text (前面的实现方法的text)

  代码

  wxml

  1

  4

  wxss

  1.submitClass{

  2margin-top: 160rpx;

  3margin-bottom: 25rpx;

  4background: none !important;

  5color: #000 !important;

  6}

  这里的button的wxss 让 button 没有边框 看得见内部的 text的样式。