本次案例是有一点像微信的那个摇一摇但是没有那么好看,一些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
}

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

微信小程序 摇一摇的更多相关文章

  1. 微信小程序踩坑集合

    1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...

  2. 微信小程序开发学习资料

    作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  3. 微信小程序实例-摇一摇抽奖

    概述 前面我们讲了如何开始微信小程序搭建和一些组件的介绍.微信小组件和微信小程序入门 微信小程序目录 为了更好的理解小程序和小程序开发,我们首先来看一下项目的目录. 首先看下根目录下的app.json ...

  4. 前端笔记之微信小程序(四)WebSocket&Socket.io&摇一摇案例&地图|地理位置

    一.WebSocket概述 http://www.ruanyifeng.com/blog/2017/05/websocket.html Workerman一款开源高性能异步PHP socket即时通讯 ...

  5. 微信小程序导航:官方工具+精品教程+DEMO集合(1月7更新)

    1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=14764346784612:简易教程:https://mp.weixin.qq.com/debug ...

  6. 迅雷首席架构师刘智聪:微信小程序的架构与系统设计的几点观感

    笔者注:本文来自于迅雷首席工程师刘智聪的个人分享,他毕业于南昌大学化学系,加入迅雷后设计开发了多款迅雷核心产品,凭借“大规模网络流媒体服务关键支撑技术”项目获得2015年国家科学技术进步奖二等奖,同时 ...

  7. 微信小程序来了,小程序都能做些什么

    2017年的微信大动作就是微信小程序了,到底小程序都能做些什么?这是很多人关注的热点,小程序开发对企业又有什么帮助呢?下面让厦门微信小程序开发公司来为你就分析下.       微信小程序与APP的关系 ...

  8. 微信小程序——智能小秘“遥知之”源码分享(语义理解基于olami)

    微信小程序智能生活小秘书开发详解 >>>>>>>>>>>>>>>>>>>>> ...

  9. 支持语音识别、自然语言理解的微信小程序(“遥知之”智能小秘)完整源码分享

    记录自己搭建https的silk录音文件语音识别服务的调用过程,所有代码可在文中找链接打包下载 >>>>>>>>>>>>> ...

  10. 微信小程序web-view的简单思考和实践

    微信小程序的组件web-view推出有一段时间了,这个组件的推出可以说是微信小程序开发的一个重要事件,让微信小程序不会只束缚在微信圈子里了,打开了一个口子,这个口子或许还比较小,但未来有无限可能. 简 ...

随机推荐

  1. 如何在pycharm上创建分支,并且把它推送到远端仓库

    注意创建的分支名 ,如果远端仓库没有pycharm中创建的分支名时  此时远端仓库会创建一个分支出来 这是就方便了代码的管理 具体步骤如下图操作步骤 推送上去搞定

  2. SQL_2008安装教程(完整版)

    Win 7 win xp系统中SQL2008安装注意事项一:SQL2008 镜像下载地址 http://download.microsoft.com/download/4/C/4/4C402E48-0 ...

  3. BZOJ 1954: Pku3764 The xor-longest Path(贪心+trie)

    传送门 解题思路 \(trie\)的一个比较经典的应用,首先把每个点到根的异或和算出,然后建一棵\(trie\)把所有权值插入到\(Trie\)中,之后枚举所有结点,在\(Trie\)上贪心的跑统计答 ...

  4. angualr6 引入iframe

    项目开发中需要在angular项目中嵌入iframe窗口,上网搜索了相关文档,不是很多,但是总算是把功能实现了,现记录一下,便于后期查看: step1:在.html中放入需要承载内容的div,并定义好 ...

  5. [CSP-S模拟测试]:reverse(模拟)

    题目传送门(内部题56) 输入格式 第一行包含一个整数:$T$,表示数据组数.接下来$T$行,每行包含两个字符串:$a\ b$. 输出格式 对于每组数据,如果存在$c$,输出最长的情况下字典序最大的$ ...

  6. 初识 ❤ TensorFlow |【一见倾心】

    说明

  7. 使用selenium+BeautifulSoup 抓取京东商城手机信息

    1.准备工作: chromedriver  传送门:国内:http://npm.taobao.org/mirrors/chromedriver/   vpn: selenium BeautifulSo ...

  8. 2018-2019 2 20165203 《网络对抗技术》Exp9 Web安全基础

    2018-2019 2 20165203 <网络对抗技术>Exp9 Web安全基础 实验要求 本实践的目标理解常用网络攻击技术的基本原理,做不少于7个题目,共3.5分.包括(SQL,XSS ...

  9. Unity Shader之模板测试

    Unity Shader之模板测试 一沙一世界,一花一天堂 一.Stencil testing 渲染管线     当片段着色器处理完一个片段之后,模板测试(Stencil Test)会开始执行,和深度 ...

  10. Java8 Collections.sort()及Arrays.sort()中Lambda表达式及增强版Comparator的使用

    摘要:本文主要介绍Java8 中Arrays.sort()及Collections.sort()中Lambda表达式及增强版Comparator的使用. 不废话直接上代码 import com.goo ...