微信小程序点击按钮实现手机振动功能

最新推荐文章于 2024-05-29 16:58:34 发布
最新推荐文章于 2024-05-29 16:58:34 发布
阅读量4k 收藏 7
点赞数
分类专栏： 小程序 文章标签： 公众号 小程序 javascript
原文链接：https://blog.csdn.net/weixin_38959210/article/details/103937664
版权

wxml:

<button bindtap="vibrateLongTap">振动（400ms）</button>
<button bindtap="vibrateShortTap">振动（15ms）</button>

js:

  vibrateLongTap: function () {
    // 使手机振动400ms
    wx.vibrateLong();
  },
 
  vibrateShortTap: function () {
    // 使手机振动15ms
    wx.vibrateShort();
  },
程序员林
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序——实现手机振动效果
不迁怒，不贰过。小知识，大智慧。
07-25 2469
一、微信官方文档资料 1、wx.vibrateShort(Object object) 2、wx.vibrateLong(Object object) 二、手机振动应用场景（以 wx.vibrateLong() 方法为例） 1、如何实现一直震动？ 2、如何关闭连续震动？
微信小程序例子——手机振动功能
FutrueJet的博客
06-08 9578
微信小程序例子——手机振动功能
微信小程序实现点击按钮后修改颜色
10-15
主要介绍了微信小程序实现点击按钮后修改颜色,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
微信小程序--实现多个按钮toggle功能
03-29
如下图所示，实现该按钮toggle功能。百度上很多都是只设置一个按钮的toggle，所以我现在来稍微总结下：多个按钮如何实现自身的toggle功能。原理：1，列表展示的时候，我们会用wx:for 来循环数据，那么我们就会得到相 ...       如下图所示，实现该按钮toggle功能。   百度上很多都是只设置一个按钮的toggle，所以我现在来稍微总结下：多个按钮如何实现自身的toggle功能。  原理：1，列表展示的时候，我们会用wx:for 来循环数据，那么我们就会得到相应的当前的第几个数据（即 wx:key="index"）  2.在每一个数据里面添加一个toggle的属性，togg
微信小程序开发之点击按钮退出小程序的实现方法
10-17
主要介绍了微信小程序开发之点击按钮退出小程序的实现方法,本恩通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
微信小程序按钮点击动画效果的实现
01-03
动画效果如下： GIF看起来可能会有点卡 wxml <view class=confirm>确定</view> wxss .confirm{ width: 325rpx; height: 80rpx; background: #07c160; border-radius: 6rpx; font-size: 30rpx; color: #fff; line-height: 80rpx; text-align: center; } .bubble{ position: relative; overflow: hidden; } .bubble:after
微信小程序实现摇一摇（监听手机摇动API：wx.onAccelerometerChange()）——互动领奖
XujiRe的博客
12-28 5029
微信小程序摇一摇，wx.startAccelerometer(),wx.onAccelerometerChange(), 加速度，加速计，摇骰子，摇人
微信小程序 —— 点击按钮实现震动
令主
11-24 5705
<view bindtap="btnFun">点击</view> btnFun:function(){ wx.vibrateShort(); // 1、使手机震动15ms //或者 wx.vibrateLong(); // 2、使手机震动400ms }
微信小程序--震动反馈
海到无边天作岸 山登绝顶我为峰
05-21 6769
场景描述         用户点击某个按钮或者view，需要程序发出震动反馈，增强用户体验。 解决方法 wx.vibrateShort(Object object) wx.vibrateLong(Object object) 1.wx.vibrateShort(Object object) 使手机发生较短时间的振动（15 ms）。仅在 iPhone 7 / 7 Plus 以上及 Android 机型生效 代码举例 o
微信小程序案例——按键防抖（多次点击触发）
YYzxm66的博客
09-03 7771
       最近在写一段微信小程序，希望避免按键多次点击重复触发。看了一下网上相关介绍，实际操作起来不太理想，后来自己改了下列这段程序。    var lasttime=0; key: function () { var that = this; let d = new Date(); let nowtime = d.getTime();//获取点击时间 i...
【小程序】关于振动API函数wx.vibrateShort和wx.vibrateLong的使用
qq_42669159的博客
11-04 2892
前言 今天累了，想加个简单点的功能，前一阵子做那个裁剪图片太折磨脑细胞了。本来准备写个大喇叭模拟器，但是找了找发现有点麻烦，就换了这个简单点的功能。 API介绍 wx.vibrateShort 底下是官方的API介绍，从名字也能看出来，这是一个短时间的振动。切实体验过之后，不吹不黑，真的好短，需要仔细去感受才能感觉出来，就一瞬间。 wx.vibrateLong 这是官方给的长振动，感觉比较像来电话时的那种，时间还是挺长的。 实战训练 搭建UI界面 从需求出发，主要有三个地方需要设置，分别是振动次数，振动
【uniapp问题】app端ios短时间震动兼容
欢迎来到☆槿畔☆的博客
07-05 1431
app端下拉刷新时想增加一些反馈效果，但是ios是不支持短震动的...
微信小程序点击按钮，指定文字左右晃动提醒
lv_haha的博客
08-15 349
微信小程序点击按钮，指定文字左右晃动提醒
微信小程序：页面或者按钮为什么会抖一下？
FeiChangWuRao的博客
04-19 2734
有的时候我们自己设置一些选项按钮，让用户切换选择对应选项，有的会发现切换这个对应的按钮会发现“抖动一下”。 之所以抖动的原因就是，切换“选择”和“未选择”的两种样式，文字图片位置大小不一致导致会给人一种抖一下的感觉，而不是我们设想的就是换个背景换个文案之类的那种感觉，显得不够平滑自然。 （1）节点位置样式引起的 这个很好弄就是两者用差不多一样的CSS样式，保证位置不会因为在切换导致变化。还有一点就...
酷炫微信小程序点赞效果，带震动
Tu_Niao的博客
12-07 2521
微信小程序酷炫点赞效果，带震动 wxml文件 <view class="action cf love-new" bindtap="clickHandler"> <button class="" bindtap="vibrateShortTap"> <text class="">❤</text> <!-...
微信小程序 功能函数 定时震动
weixin_30326741的博客
03-19 738
ffn: function () { let nnn = this.data.nnn nnn += 1; this.setData({ nnn: nnn }); if (nnn > 10) { wx.vibrateLong() } }, var timer = setInterval...
微信小程序点击实现苹果，安卓手机振动效果
tangyuan97的博客
03-11 732
//wxml中 <button bindtap="LongTap">振动（400ms）</button> <button bindtap="ShortTap">振动（15ms）</button> //js文件中 LongTap() { // 手机振动时间400ms wx.vibrateLong(); }, ShortTap() { // 手机振动时间15ms wx.vibrateShort(); }, .
【全开源】Java聚合跑腿系统对接云洋聚合跑腿系统源码低价快递小程序APP公众号源码
最新发布
2401_84593614的博客
05-29 359
随着科技的不断进步和市场的不断拓展，聚合跑腿对接云洋系统源码将在跑腿服务行业中发挥越来越重要的作用。我们期待更多的跑腿平台能够与云洋系统实现对接，共同打造高效便捷的跑腿服务新生态，为人们的生活带来更多便利和舒适。随着科技的进步和市场的扩大，传统的跑腿服务模式正面临着巨大的变革。聚合跑腿对接云洋系统源码的出现，为跑腿服务行业带来了全新的发展机遇。通过聚合跑腿与云洋系统的对接，可以实现跑腿服务的智能化、高效化升级，为消费者和商家提供更加便捷、优质的服务体验。
如何在uniapp小程序中做到定时震动提醒
06-06
在uniapp小程序中，可以使用uni-app插件uni-remind来实现定时震动提醒。具体步骤如下： 1. 安装uni-remind插件，可以在HBuilderX中的插件市场中搜索安装，或者在项目中的manifest.json文件中添加如下配置： ```json { "plugins": { "uni-remind": { "version": "1.0.0", "provider": "uni-remind" } } } ``` 2. 在需要定时震动提醒的页面中引入uni-remind插件： ```javascript import uniRemind from '@/uni_modules/uni-remind/js_sdk/uni-remind.js' ``` 3. 使用uni-remind的setRemind方法设置提醒，例如设置5秒后震动提醒： ```javascript uniRemind.setRemind({ mode: 'vibrate', delay: 5000, success: function () { console.log('设置提醒成功') }, fail: function (err) { console.log('设置提醒失败', err) } }) ``` 其中，mode表示提醒方式，这里使用vibrate表示震动提醒；delay表示延迟时间，单位为毫秒。 4. 在App.vue中注册uni-remind插件： ```javascript import uniRemind from '@/uni_modules/uni-remind/js_sdk/uni-remind.js' Vue.prototype.$uniRemind = uniRemind ``` 这样，在其他页面中就可以通过this.$uniRemind来使用uni-remind插件了。 需要注意的是，为了避免在后台运行过程中消耗过多电量，iOS系统会对后台提醒进行限制，因此在iOS系统上可能无法实现后台震动提醒。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值