Mrcdh技术博客 Mrcdh技术博客
首页
  • Html5
  • Javascript
  • Nodejs
  • electron
  • Android
  • 微信公众号
  • 框架
  • 其他
  • Mysql
  • PHP
  • Python
  • java
  • Gulp
  • 其它
  • 网站
  • 资源
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

Mrcdh

全栈开发小学生
首页
  • Html5
  • Javascript
  • Nodejs
  • electron
  • Android
  • 微信公众号
  • 框架
  • 其他
  • Mysql
  • PHP
  • Python
  • java
  • Gulp
  • 其它
  • 网站
  • 资源
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • uniapp常用封装

    • uniapp下sqlite简易封装
    • uniapp自定义Tabber让中间凸起
  • 使用plus.io创建文件并写入内容
  • uniapp-H5端使用vue-clipboard2复制内容至剪切板
  • uniapp使用vue3 setup
  • uniapp选择图片并转为base64格式
  • uniapp接入微信公众号支付
  • uniapp引入iconfont字体图标
  • 使用uts的方式调用光感器
  • uniapp常见问题
  • 《Uniapp》
  • uniapp常用封装
mrcdh
2022-09-06

uniapp自定义Tabber让中间凸起

// #ifdef APP-PLUS
var sys = uni.getSystemInfoSync();  //获取系统信息
var ratio = sys.screenWidth/750;    //计算比例
var imgSize = Math.ceil(ratio * 95);    //图片的大小是95*95
var leftPos = Math.ceil((plus.screen.resolutionWidth - imgSize) / 2);   //计算x轴的位置,也就是左边距
var centerButtonOnTab = new plus.nativeObj.View("", {
 bottom: '28px',
 left: leftPos + 'px',
 height: imgSize + 'px',
 width: imgSize +'px'
});

bitmap = new plus.nativeObj.Bitmap('bmp1');
bitmap.load('static/tabbar_report.png', function() {
    //说是ios要用base64暂没确定
 centerButtonOnTab.drawBitmap(bitmap, {
  tag: 'font',
  id: 'icon',
  position: {
   top: '0px',
   left: '0px',
   width: imgSize + 'px',
   height: imgSize + 'px'
  }
 });
 //给图片添加点击事件
 centerButtonOnTab.addEventListener("click", function(e) {
  uni.switchTab({
   url: '../home/report'
  })
 }, false);
 plus.webview.currentWebview().append(centerButtonOnTab);
}, function(e) {
 //console.log('bmp1.png load failed! '+JSON.stringify(e));
});
// #endif
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
#uniapp
上次更新: 2023/09/22, 16:54:32
uniapp下sqlite简易封装
使用plus.io创建文件并写入内容

← uniapp下sqlite简易封装 使用plus.io创建文件并写入内容→

最近更新
01
uniapp常见问题
03-19
02
Vue3项目搭建
12-25
03
使用pnpm的monorepo组织项目
11-01
更多文章>
Theme by Vdoing | Copyright © 2020-2025 Mrcdh | 苏ICP备2020058908号-1
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式
×