小程序模板網(wǎng)

微信小程序 搖一搖

發(fā)布時(shí)間：2021-06-08 08:32 所屬欄目：小程序開發(fā)教程

本次案例是有一點(diǎn)像微信的那個(gè)搖一搖但是沒有那么好看，一些APP也有看到搖一搖功能。

小程序雖然沒有提供搖一搖API接口，但是也一個(gè)加速器API  ，加上搜索一些大神的資料，我這里就做了一個(gè)dome，

1.模擬數(shù)據(jù)，從M數(shù)組里面，每次搖一下就隨機(jī)獲取一條信息出來，每搖一次就顯示不同的數(shù)據(jù)，

注:真正的時(shí)候是通過接口返回?cái)?shù)據(jù)的，因此后臺(tái)處理好隨機(jī)產(chǎn)生一條數(shù)據(jù)，然后前臺(tái)就獲取，響應(yīng)速度也加快。  

　官網(wǎng)API  https://developers.weixin.qq.com/miniprogram/dev/api/wx.onAccelerometerChange.html

　　

如圖：

 

代碼：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73		   data: {
    isShow: false,
    list:[],
    content: [
      {
        title: '小程序答題01',
      },
      {
        title: '小程序答題02',
      },
      {
        title: '小程序答題03',
      },
      {
        title: '小程序答題04',
      },
      {
        title: '小程序答題05',
      },
      {
        title: '小程序答題06',
      },
      {
        title: '員工活動(dòng)羽毛球賽實(shí)施07',
      },
      {
        title: '員工活動(dòng)羽毛球賽實(shí)施08',
      },
      {
         title: '員工活動(dòng)羽毛球賽實(shí)施09',
      },
      {
        title: '員工活動(dòng)羽毛球賽實(shí)施10',
      },
    ],
  },
 
 
/**
   * 生命周期函數(shù)--監(jiān)聽頁面顯示
   */
  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
        });
      }
    })
  },
 
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面隱藏
   */
  onHide: function () {
    this.isShow = false;
  },

　　wxml

復(fù)制代碼 
<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'>拿起手機(jī)搖一搖</view>
    </view>
  </view>

</view>
復(fù)制代碼

 wxss

1
2
3
4
5
6
7		 .yao{
  font-weight: bold;
  color:sandybrown;
  font-size: 50rpx;
  text-align: center;
  margin: 500rpx auto
}

　　這樣就完成了搖一搖的功能。


易優(yōu)小程序（企業(yè)版）+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址：http://u-renovate.com/wxmini/doc/course/26119.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢：800182392 點(diǎn)擊咨詢
QQ在線咨詢