微信小程序 摇一摇
本次案例是有一点像微信的那个摇一摇但是没有那么好看,一些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:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...
- 微信小程序开发学习资料
作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...
- 微信小程序实例-摇一摇抽奖
概述 前面我们讲了如何开始微信小程序搭建和一些组件的介绍.微信小组件和微信小程序入门 微信小程序目录 为了更好的理解小程序和小程序开发,我们首先来看一下项目的目录. 首先看下根目录下的app.json ...
- 前端笔记之微信小程序(四)WebSocket&Socket.io&摇一摇案例&地图|地理位置
一.WebSocket概述 http://www.ruanyifeng.com/blog/2017/05/websocket.html Workerman一款开源高性能异步PHP socket即时通讯 ...
- 微信小程序导航:官方工具+精品教程+DEMO集合(1月7更新)
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=14764346784612:简易教程:https://mp.weixin.qq.com/debug ...
- 迅雷首席架构师刘智聪:微信小程序的架构与系统设计的几点观感
笔者注:本文来自于迅雷首席工程师刘智聪的个人分享,他毕业于南昌大学化学系,加入迅雷后设计开发了多款迅雷核心产品,凭借“大规模网络流媒体服务关键支撑技术”项目获得2015年国家科学技术进步奖二等奖,同时 ...
- 微信小程序来了,小程序都能做些什么
2017年的微信大动作就是微信小程序了,到底小程序都能做些什么?这是很多人关注的热点,小程序开发对企业又有什么帮助呢?下面让厦门微信小程序开发公司来为你就分析下. 微信小程序与APP的关系 ...
- 微信小程序——智能小秘“遥知之”源码分享(语义理解基于olami)
微信小程序智能生活小秘书开发详解 >>>>>>>>>>>>>>>>>>>>> ...
- 支持语音识别、自然语言理解的微信小程序(“遥知之”智能小秘)完整源码分享
记录自己搭建https的silk录音文件语音识别服务的调用过程,所有代码可在文中找链接打包下载 >>>>>>>>>>>>> ...
- 微信小程序web-view的简单思考和实践
微信小程序的组件web-view推出有一段时间了,这个组件的推出可以说是微信小程序开发的一个重要事件,让微信小程序不会只束缚在微信圈子里了,打开了一个口子,这个口子或许还比较小,但未来有无限可能. 简 ...
随机推荐
- Lock之ReentrantLock及实现生产者消费者和死锁
Lock是顶层接口,它的实现逻辑并未用到synchronized,而是利用了volatile的可见性.ReentrantLock对了Lock接口的实现主要依赖了Sync,而Sync继承了 Abstra ...
- PHP curl_copy_handle函数
curl_copy_handle — 复制一个cURL句柄和它的所有选项 说明 resource curl_copy_handle ( resource $ch ) 复制一个cURL句柄并保持相同的选 ...
- paper 159:文章解读:From Facial Parts Responses to Face Detection: A Deep Learning Approach--2015ICCV
文章链接:https://arxiv.org/pdf/1509.06451.pdf 1.关于人脸检测的一些小小总结(Face Detection by Literature) (1)Multi-vie ...
- flutter图片组件
在flutter中,image组件有很多构造函数,常用的包括Image.asset(本地图片)和Image.network(远程图片). 常用属性 不管是显示本地图片还是远程图片,image组件都包含 ...
- BZOJ 3294: [Cqoi2011]放棋子(计数dp)
传送门 解题思路 设\(f[i][j][k]\)表示前\(k\)个颜色的棋子占领了\(i\)行\(j\)列的方案数,那么转移时可以枚举上一个颜色时占领的位置,\(f[i][j][k]=\sum\lim ...
- static、final修饰的变量和方法能否被继承的问题
首先定义父类和子类 public class Parent { protected static String a = "static"; final String b = &qu ...
- (转)运行jar应用程序引用其他jar包的四种方法 -- ClassLoader应用
转:http://longdick.iteye.com/blog/332580 大家都知道一个java应用项目可以打包成一个jar,当然你必须指定一个拥有main函数的main class作为你这个j ...
- ARM架构授权和IP核授权有什么不一样啊?
比如,华为分别拿到这2个授权,能做的有什么区别啊? 匿名 | 浏览 2976 次 推荐于2016-06-09 02:43:35 最佳答案 一个公司若想使用ARM的内核来做自己的处理器,比如苹果 ...
- jenkins配置到gitlab拉代码
参照: jenkins 从git拉取代码-简明扼要 https://www.cnblogs.com/jwentest/p/7065783.html 持续集成①安装部署jenkins从git获取代码-超 ...
- (appium+python)UI自动化_01_自动化环境搭建【MAC版】
Appium简介 Appium是一个开源的.跨平台的测试框架,主要用来进行app UI自动化,适用于原生应用.混合应用和移动网页应用(H5页面).目前支持Python.JavaScript.Objec ...