06点击事件 tabBar配置 拨打电话

简介: 06点击事件 tabBar配置 拨打电话

1==  D:\wxxm  项目的地址


2==》tabBar在全局配置中


在pages的同级目录下创建images本地图标 (最好的是在远程获取img 因为微信是有大小限制的)


selectedIconPath=======================>是点击选中时候展现的图标


"iconPath":"images/home-off.png",=====>是默认时候的图标


其中 list 接受一个数组,只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序,每个项都是一个对象,其属性值如下:


在app.json中去配置


 "tabBar": {
      "list": [
        { 
          "selectedIconPath":"images/home-on.png",
          "iconPath":"images/home-off.png",
          "pagePath": "pages/index/index",
          "text": "首页"
        },
        {
          "selectedIconPath": "images/kefu-on.png",
          "iconPath": "images/kefu-off.png", 
          "pagePath": "pages/logs/logs",
          "text": "日志"
        },
        {
          "selectedIconPath": "images/pengyoufill.png",
          "iconPath": "images/pengyou.png",
          "pagePath": "pages/person/person",
          "text": "我的"
        }
      ]
  }


就会出现图标


 ps==>app.json中不能有注释(重点)


 注意你新创建的页面是否有在App.json有注入路由


03==>绑定点击事件


<view id="tapTest" data-hi="WeChat" bindtap="tapName"> 绑定点击事件 bindtap Click me! </view>


//  事件
tapName: function (event) {
    console.log(event);//会有很多的东西在这里里面的哦
}   


04==》拨打电话


<button  bindtap="tel">点击拨打电话</button>


// 点击拨打电话
tel(){
  wx.makePhoneCall({
    phoneNumber: '18383841503' //仅为示例,并非真实的电话号码
  })
}


拿到这个点击元素的所有数据


1425695-20191017204236306-601398161.png

1425695-20191017204307411-1297931407.png


相关文章
|
7月前
|
小程序 JavaScript
微信小程序自定义底部tabBar按钮
微信小程序自定义底部tabBar按钮
130 0
|
Android开发
autojs修改悬浮窗按钮点击事件
牙叔教程 简单易懂
1108 0
|
C# Windows 容器
C#或Winform中的消息通知之系统托盘的气泡提示窗口(系统toast通知)、ToolTip控件和ToolTipText属性
NotifyIcon控件表示系统右下角任务栏上的托盘图标,其ShowBalloonTip方法用于显示气球状提示框(Win10只有为本地Toast通知),ToolTip\oolTipText可以...
1596 0
C#或Winform中的消息通知之系统托盘的气泡提示窗口(系统toast通知)、ToolTip控件和ToolTipText属性
|
1月前
el-drawer抽屉组件弹窗遮挡问题解决
el-drawer抽屉组件弹窗遮挡问题解决
43 3
|
7月前
TabBar组件如何跳转页面?
TabBar组件如何跳转页面?
|
10月前
Umijs带底部导航路由切换动画
Umijs带底部导航路由切换动画
131 0
|
10月前
|
小程序 JavaScript
微信小程序 - 监听 TabBar 切换点击事件
微信小程序 - 监听 TabBar 切换点击事件
1331 0
|
Android开发 数据安全/隐私保护 开发者
ApeForms | C#WinForm弹出简易的消息提示框 (仿Android Toast消息提示)
在使用手机的时候经常会见到屏幕的中下方会弹出消息提示框,它就是Toast。 ApeForms中也实现了非常简洁易用Toast,与Android的Toast不同的是,ApeForms允许开发者设置不同的弹出模式。此外还针对PC端有鼠标的情况进行了改进,当鼠标悬停于消息弹出框之上时弹出框不会消失。
330 0
ApeForms | C#WinForm弹出简易的消息提示框 (仿Android Toast消息提示)
|
小程序 前端开发 JavaScript
【uniapp小程序】配置tabbar底部导航栏
【uniapp小程序】配置tabbar底部导航栏
457 0
【uniapp小程序】配置tabbar底部导航栏
|
iOS开发
iOS开发 - 解析tabbar中的凸起按钮
iOS开发 - 解析tabbar中的凸起按钮
307 0
iOS开发 - 解析tabbar中的凸起按钮