微信小程序——fab悬浮按钮拓展，悬浮按钮_微信小程序floatbar

1、fab悬浮按钮拓展

来看看效果图：

代码

js

Page({
  data: {
    left: 0,
    right: 80,
    bottom: 100,
    bgColor: "#5677fc",
    btnList: [],
    list: [{
      bgColor: "#16C2C2",
      //图标/图片地址
      imgUrl: "https://d.lanrentuku.com/down/png/1406/40xiaodongwu/chihuahua.png",
      //图片高度 rpx
      imgHeight: 64,
      //图片宽度 rpx
      imgWidth: 64,
      //名称
      text: "关于",
      //字体大小
      fontSize: 34,
      //字体颜色
      color: "#fff"
    }, {
      bgColor: "#64B532",
      //图标/图片地址
      imgUrl: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595413638266&di=9925668ef800e50f42f90c6ab6442da8&imgtype=0&src=http%3A%2F%2Fd.lanrentuku.com%2Fdown%2Fpng%2F1406%2F40xiaodongwu%2Fcardinal.png",
      //图片高度 rpx
      imgHeight: 64,
      //图片宽度 rpx
      imgWidth: 64,
      //名称
      text: "分享",
      //字体大小
      fontSize: 34,
      //字体颜色
      color: "#fff"
    }, {
      bgColor: "#FFA000",
      //图标/图片地址
      imgUrl: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595413638264&di=c5d7762b2e5c1802d1f11025800bce73&imgtype=0&src=http%3A%2F%2Fpic1.cxtuku.com%2F00%2F07%2F42%2Fb956c4fb14c4.jpg",
      //图片高度 rpx
      imgHeight: 64,
      //图片宽度 rpx
      imgWidth: 64,
      //名称
      text: "赞赏",
      //字体大小
      fontSize: 34,
      //字体颜色
      color: "#fff"
    }],

    list2: [{
      bgColor: "#16C2C2",
      //名称
      text: "关于",
      //字体大小
      fontSize: 28,
      //字体颜色
      color: "#fff"
    }, {
      bgColor: "#64B532",
      //名称
      text: "分享",
      //字体大小
      fontSize: 28,
      //字体颜色
      color: "#fff"
    }, {
      bgColor: "#FFA000",
      //名称
      text: "赞赏",
      //字体大小
      fontSize: 28,
      //字体颜色
      color: "#fff"
    }]
  },
  onLoad(options) {
    // 有拓展图标
    this.setData({
      btnList: [...this.data.list]
    })
  },
  // 设置无拓展图标
  btn_1() {
    this.setData({
      btnList: [...this.data.list2]
    })
  },

  // 设置按钮无拓展
  btn_2() {
    this.setData({
      btnList: []
    })
  },



  onClick(e) {
    let index = e.detail.index
    switch (index) {
      case -1:
        // util.toast("您点击了悬浮按钮")
        console.log('您点击了悬浮按钮')
        break;
      case 0:
        console.log('您点击了关于按钮')
        break;
      case 1:
        console.log('您点击了分享按钮')
        break;
      case 2:
        console.log('您点击了赞赏按钮')
        wx.previewImage({
          urls: ["https://thorui.cn/img/reward.jpg"]
        })
        break;
      default:
        break;
    }
  },


})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125

.json

{
  "navigationBarTitleText": "悬浮按钮",
  "navigationBarBackgroundColor": "#fff",
  "navigationBarTextStyle": "black",

  "usingComponents": {      
      "tui-fab": "../../../../components/tui-fab/tui-fab" 
  }
}
1
2
3
4
5
6
7
8
9

.wxml

<view class="container">
	<view class="header">
		<view class="title">悬浮按钮</view>
		<view class="sub-title">fab，可设置left，right，bottom值，可设置大小，颜色等，具体参考文档。拓展出来的按钮不应多于6个，否则违反了作为悬浮按钮的快速、高效的原则。 </view>
	</view>

	<button bindtap="btn_2">设置按钮无拓展</button>
	<button bindtap="btn_1">设置拓展无图标展示</button>


	<tui-fab left="{{left}}" right="{{right}}" bottom="{{bottom}}" bgColor="{{bgColor}}" btnList="{{btnList}}" bind:click="onClick"></tui-fab>

</view>
1
2
3
4
5
6
7
8
9
10
11
12
13

.wxss

.container {
  padding: 20rpx 0 120rpx 0;
  box-sizing: border-box;
}

.header {
  padding: 80rpx 90rpx 60rpx 90rpx;
  box-sizing: border-box;
}

.title {
  font-size: 34rpx;
  color: #333;
  font-weight: 500;
}

.sub-title {
  font-size: 24rpx;
  color: #7a7a7a;
  padding-top: 18rpx;
}

.tui-btn-box {
  padding: 10rpx 40rpx;
  box-sizing: border-box;
}

.tui-btn-btm {
  margin-bottom: 36rpx;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

最后来看看代码片段的结构图

demo的下载地址为：https://download.csdn.net/download/wy313622821/12651053

2、悬浮按钮

效果图：

.wxml代码

<view class="view-contain">
  <view class="view_levitation">
    <navigator url='/pages/index/index'>积分查询</navigator>
  </view>
</view>
1
2
3
4
5

.wxss代码

page{
  width: 100%;
  height: 100%;
}
.view-contain {
  width: 100%;
  height: 100%;
}

.view_levitation{
  height: 100rpx;
  width: 100rpx;

  z-index: 10;
  background-color: #f81212;
  border-radius: 50%;
  position: fixed;
  bottom: 100rpx;
  right: 20rpx;
  
  display: flex;
  align-items: center;
  justify-content: center;
  
}
.view_levitation navigator{
  font-size: 26rpx;
  max-width: 60rpx;
  color: #fff;
  text-align: center;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31