热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

微信小程序摇一摇

本次案例是有一点像微信的那个摇一摇但是没有那么好看,一些APP也有看到摇一摇功能。小程序虽然没有提供摇一摇API接口,但是也一个加速器API,加上搜索一些大神的资料,我这里就做了一个dome,

本次案例是有一点像微信的那个摇一摇但是没有那么好看,一些APP也有看到摇一摇功能。

小程序虽然没有提供摇一摇API接口,但是也一个加速器API  ,加上搜索一些大神的资料,我这里就做了一个dome,

1.模拟数据,从M数组里面,每次摇一下就随机获取一条信息出来,每摇一次就显示不同的数据,

:真正的时候是通过接口返回数据的,因此后台处理好随机产生一条数据,然后前台就获取,响应速度也加快。  

 官网API  https://developers.weixin.qq.com/miniprogram/dev/api/wx.onAccelerometerChange.html

  

如图:

 

代码:

  data: {
    isShow: false,
    list:[],
    content: [
      {
        title: '小程序答题01',
      },
      {
        title: '小程序答题02',
      },
      {
        title: '小程序答题03',
      },
      {
        title: '小程序答题04',
      },
      {
        title: '小程序答题05',
      },
      {
        title: '小程序答题06',
      },
      {
        title: '员工活动羽毛球赛实施07',
      },
      {
        title: '员工活动羽毛球赛实施08',
      },
      {
         title: '员工活动羽毛球赛实施09',
      },
      {
        title: '员工活动羽毛球赛实施10',
      },
    ],
  },


/**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
     var that = this;
    this.isShow = true;
   wx.onAccelerometerChange(function (e) {
      if (!that.isShow) {
        return
      }
     
      if (e.x > 1 && e.y > 1) {
        wx.showToast({
          title: '摇成功啦',
          icon: 'success',
          duration: 1000
        })
        let bianlian = that.data.content
        let cOntentlengths= bianlian.length
        let list= [];
        let random = bianlian[Math.floor(Math.random() * contentlengths)];
        list.push(random);
        that.setData({
          list: list
        });
      }
    })
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    this.isShow = false;
  },

  wxml

<view>
  <view>
    <block wx:for="{{list}}" wx:for-index="index">

      <view class='yao'>{{item.title}}view>
    block>
    <view wx:if="{{list==null || list==''}}">
      <view class='yao'>拿起手机摇一摇view>
    view>
  view>

view>

 

 wxss

.yao{
  font-weight: bold;
  color:sandybrown; 
  font-size: 50rpx;
  text-align: center;
  margin: 500rpx auto
}

  这样就完成了摇一摇的功能。

 


推荐阅读
  • 微信小程序实现简易计算器功能_javascript技巧
    这篇文章主要为大家详细介绍了微信小程序实现简易计算器功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的 ... [详细]
  • 微信小程序中如何实现轮播图
    这篇文章主要介绍了微信小程序中如何实现轮播图,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带 ... [详细]
  • 微信小程序API音频-暂停播放是千自学中一篇关于微信小程序的文章简介:wx.pauseVoice(Objectobject)从基础库 1.6.0 开始,本接口停止维护,请使用 wx.createInnerAudioContext 代替暂停正在播放的语 ... [详细]
  • 微信小程序实战之菜谱小程序
    最近突发奇想,想要自己搞个小程序玩儿玩儿,但是鉴于自己是搞后端服务器出身,对于偏前端的微信小程序开发实在是一知半解,尤其是对于css类样式相关,更是无从下手,于是乎,只能从晚上找了 ... [详细]
  • 微信小程序地图实现展示线路的方法
    这篇文章将为大家详细讲解有关微信小程序地图实现展示线路的方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所 ... [详细]
  • 微信小程序实现星级评分与展示
    这篇文章主要为大家详细介绍了微信小程序实现星级评分与展示,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的 ... [详细]
  • Voicewo在线语音识别转换jQuery插件的特点和示例
    本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件,该插件具有快速、架构、风格、扩展和兼容等特点,适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]
  • 利用Visual Basic开发SAP接口程序初探的方法与原理
    本文介绍了利用Visual Basic开发SAP接口程序的方法与原理,以及SAP R/3系统的特点和二次开发平台ABAP的使用。通过程序接口自动读取SAP R/3的数据表或视图,在外部进行处理和利用水晶报表等工具生成符合中国人习惯的报表样式。具体介绍了RFC调用的原理和模型,并强调本文主要不讨论SAP R/3函数的开发,而是针对使用SAP的公司的非ABAP开发人员提供了初步的接口程序开发指导。 ... [详细]
  • 微信小程序导航跟随的实现方法
    本文介绍了在微信小程序中实现导航跟随的方法。通过设置导航的position属性和绑定滚动事件,可以实现页面向下滚动到导航位置时,导航固定在页面最上方;页面向上滚动到导航位置时,导航恢复到原始位置;点击导航可以平滑跳转到相应位置。代码示例也给出了具体实现方法。 ... [详细]
  • 起因由于我录制过一个小程序的课程,里面有消息模板的讲解。最近有几位同学反馈官方要取消消息模板,使用订阅消息。为了方便大家容易学 PythonFlask构建微信小程序订餐系统 课程。 ... [详细]
  • layui表格分页不生效怎么办
    web前端|Layui教程layuiweb前端-Layui教程小程序实例源码,ubuntuip切换,tomcat默认端改为80,爬虫完整源码,微信小程序php接口,seo专业培训班 ... [详细]
  • 微信小程序新手教程wx.request(object) API
    微信小程序新手教程wx.request(object)API,本篇默认已经成功安装微信小程序工具,来和小编一起看看吧wx.request(object)API这里通过干活集中营的A ... [详细]
  • 微信小程序学习笔记-3-问题
    一些在开发微信小程序中常见的问题页面渲染  微信小程序中规定所有页面上渲染出来的数据,包括文字和图片皆包含在在每个页面文件夹中的js文件中的page这个内置函数的参数data中, ... [详细]
  • 面试经验分享:华为面试四轮电话面试、一轮笔试、一轮主管视频面试、一轮hr视频面试
    最近有朋友去华为面试,面试经历包括四轮电话面试、一轮笔试、一轮主管视频面试、一轮hr视频面试。80%的人都在第一轮电话面试中失败,因为缺乏基础知识。面试问题涉及 ... [详细]
  • 微信小程序开发如何实现地图功能
    这篇文章主要讲解了“微信小程序开发如何实现地图功能”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研 ... [详细]
author-avatar
xda6962962
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有