微信小程序按钮控件设置呈现效果

1、效果图

在小程序中完成上述布局，需要设置四个按钮位置，控制每个按钮大小、设置按钮背景颜色，设置标题和图标的位置。

2、代码说明

2.1 index.wxml

<view class="block">
  <!--呈现标题-->
  <view class="title-bar">
    <text>助手功能模块</text>
    <text>FUNCTION</text>
  </view>
  <!--呈现按钮，用的是循环控制，也可单独写四个一样的代码，更换里面的背景颜色、文字内容和图标-->
  <view class="content-bar">
    <button wx:for="{
  {list}}" wx:key="*this" class="list" style="background-image:url({
  {item.imageurl}});">
      <text class="title">{
  {item.title}}</text>
      <view class="icon iconfont {
  {item.icon}}"></view>
    </button>
  </view>
</view>

 

2.2 index.wxss

/*按钮中的icon使用的是iconfont，因此引入了iconfont中的样式*/
@import "icon.wxss";
.block{
  display: flex;
  flex-direction: column;
  font-size: 35rpx;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.title-bar {
  opacity: 1;
  display: flex;
  flex-direction: column;
  text-align: center;
}
.content-bar {
  background-color: white;
  height: 400rpx;
  width: 100%;
  display: flex;
  /* flex-direction是用来控制里面的内容时水平呈现还是垂直呈现*/
  flex-direction: row;
  /* flex-wrap是用来控制能否换行，必须设置为能换行 */
  flex-wrap: wrap;
  padding-top: 20rpx;
  padding-right: 10rpx;
}
.list {
  padding: 20rpx 20rpx;
  display: flex;
  flex-direction: row;
  /* 背景图片能够完全呈现，此处是关键，否则图片只显示局部 */
  background-size: 100% 100%;
}

.list:not([size="default"]) {
 /* 因为是按钮，有两个size，它的大小无法改变，此样式用来改变按钮的大小 */
  height: 150rpx;
  width: 45%;
}

.title {
  font-size: 30rpx;
  color: white;
  padding-top: 30rpx;
  padding-left: 20rpx;
}

.icon {
  color: white;
  padding-left: 30rpx;
}

 

2.3 icon.wxss

该文件放置在与index.wxss同一目录下。

@font-face {font-family: "iconfont";
  src: url('iconfont.eot?t=1583731563652'); /* IE9 */
  src: url('iconfont.eot?t=1583731563652#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
  url('iconfont.woff?t=1583731563652') format('woff'),
  url('iconfont.ttf?t=1583731563652') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('iconfont.svg?t=1583731563652#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 70rpx;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/*目前只保留了效果图中的四个图标*/
.icon-data:before {
  content: "\e6f9";
}

.icon-calendar:before {
  content: "\e746";
}

.icon-confirm:before {
  content: "\e749";
}

.icon-editor:before {
  content: "\e74d";
}

 

备注：若读者想根据需要产生iconfont进行引用，可通过如下几步进行操作。

（1）登录http://www.iconfont.cn/ 阿里巴巴矢量图标库，github或微博登录；

（2）选择喜欢的图标加入购物车；

（3）然后点击右侧购物车，选择添加至项目，选择项目名称，选择font class，下载至本地；

（4）选择iconfont.css，用记事本打开，将内容粘贴到icon.wxss即可。

2.4 index.js

//背景图片我用的是base64，在微信小程序中background-image若为图片，在真机上无法呈现
//因此将真实图片转为base64进行引用
var imageData = require('json.js');
Page({
  data: {
    list: [{
      imageurl: imageData.dataList[0],
      title: "课堂教学签到",
      icon: "icon-confirm",
      id:"1",
    }, {
      imageurl: imageData.dataList[0],
      title: "设备故障报修",
      icon: "icon-data",
      id: "2",
    }, {
      imageurl: imageData.dataList[0],
      title: "教室使用预约",
      icon: "icon-calendar",
      id: "3",
    }, {
      imageurl: imageData.dataList[0],
      title: "个人信息中心",
      icon: "icon-editor",
      id: "4",
    }]
  }
})

 

2.5 引用的json.js

将json.js放置在于index.js同一文件夹下。

//将图片转为base64，我用的是字符串保存，然后存入到数组中，没有用到json数据。
//此处本应是四个背景图片，但是字符串太长，无法在一篇博客中呈现，因此简化为一个字符串
var imageurl1 ="data:image/jpg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAABkAAD/4QMqaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjYtYzE0MiA3OS4xNjA5MjQsIDIwMTcvMDcvMTMtMDE6MDY6MzkgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QUM2ODU4RTMyRjMzMTFFOTgwMTY5OEVDNjM3QUEzRDIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QUM2ODU4RTQyRjMzMTFFOTgwMTY5OEVDNjM3QUEzRDIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpBQzY4NThFMTJGMzMxMUU5ODAxNjk4RUM2MzdBQTNEMiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpBQzY4NThFMjJGMzMxMUU5ODAxNjk4RUM2MzdBQTNEMiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pv/uAA5BZG9iZQBkwAAAAAH/2wCEAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQECAgICAgICAgICAgMDAwMDAwMDAwMBAQEBAQEBAgEBAgICAQICAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDA//AABEIAJwBSgMBEQACEQEDEQH/xADXAAABBAIDAQAAAAAAAAAAAAADAQIEBQYHAAgJCgEAAgMBAQEBAAAAAAAAAAAAAQIAAwQFBgcIEAABAgQDBQQFB