前言
我們可以經常看到手機app里有的菜單欄是懸浮在首頁的，用戶可以拖動和點擊菜單欄進行交互，今天代碼君就教大家利用小程序的控件，實現一個可移動的菜單，效果圖是這樣的，要實現這樣的效果，需要引出我們今天的重要人物movable-view
movable-view屬性介紹
| 屬性名 | 作用 | 參數值 |
|---|---|---|
| direction | 設置movable-view的移動方向 | 屬性值有all、vertical、horizontal、none |
| inertia | movable-view是否帶有慣性 | true/false 默認是false |
| out-of-bounds | 超過可移動區域后，movable-view是否還可以移動 | true/false 默認是false |
| x | 定義x軸方向的偏移，如果x的值不在可移動范圍內，會自動移動到可移動范圍；改變x的值會觸發動畫 | number |
| y | 定義y軸方向的偏移，如果y的值不在可移動范圍內，會自動移動到可移動范圍；改變y的值會觸發動畫 | number |
| damping | 阻尼系數，用于控制x或y改變時的動畫和過界回彈的動畫，值越大移動越快 | number 默認是20 |
| friction | 摩擦系數，用于控制慣性滑動的動畫，值越大摩擦力越大，滑動越快停止；必須大于0，否則會被設置成默認值 | number默認是2 |
實現可移動菜單
一、wxml界面的實現
<view class='title-line'>movable</view><movable-area class="moveArea"><movable-view class='moveView' x="{{x}}" y="{{y}}" damping="40" direction="all" inertia='true'>菜單</movable-view></movable-area><button class='button' type='primary' size='mini' bindtap='moveView'>點我隨機滾動小方塊</button><button class='button' type='primary' size='mini' bindtap='stopMove'>點我停止隨機滾動</button>界面布局比較簡單，需要注意的幾點
二、xxx.js隨機移動實現的邏輯
Page({data: {x: 0,y: 0,isStop:false,},moveView:function(e){var that = this;setTimeout(function () {that.move(that);}, 1000);},stopMove: function (e) {this.setData({isStop: true})},move: function (that){var randowX = that.GetRandomNum(1, 200);var randowY = that.GetRandomNum(1, 400);that.setData({x: randowX,y:randowY,})if(!that.data.isStop){setTimeout(function () {that.move(that);}, 100);}},//隨機函數GetRandomNum: function (Min, Max) {var Range = Max - Min;var Rand = Math.random();return (Min + Math.round(Rand * Range));},
新聞熱點
疑難解答
