快捷導(dǎo)航

微信小程序-可移動(dòng)菜單的實(shí)現(xiàn)過程詳解

更新時(shí)間：2019年06月24日 15:56:03 作者：代碼君_Coder

這篇文章主要介紹了微信小程序-可移動(dòng)菜單的實(shí)現(xiàn)過程詳解，我們可以經(jīng)常看到手機(jī)app里有的菜單欄是懸浮在首頁的，用戶可以拖動(dòng)和點(diǎn)擊菜單欄進(jìn)行交互，今天就教大家利用小程序的控件，,需要的朋友可以參考下

前言

我們可以經(jīng)常看到手機(jī)app里有的菜單欄是懸浮在首頁的，用戶可以拖動(dòng)和點(diǎn)擊菜單欄進(jìn)行交互，今天代碼君就教大家利用小程序的控件，實(shí)現(xiàn)一個(gè)可移動(dòng)的菜單，效果圖是這樣的，要實(shí)現(xiàn)這樣的效果，需要引出我們今天的重要人物movable-view

movable-view屬性介紹

屬性名	作用	參數(shù)值
direction	設(shè)置movable-view的移動(dòng)方向	屬性值有all、vertical、horizontal、none
inertia	movable-view是否帶有慣性	true/false 默認(rèn)是false
out-of-bounds	超過可移動(dòng)區(qū)域后，movable-view是否還可以移動(dòng)	true/false 默認(rèn)是false
x	定義x軸方向的偏移，如果x的值不在可移動(dòng)范圍內(nèi)，會(huì)自動(dòng)移動(dòng)到可移動(dòng)范圍；改變x的值會(huì)觸發(fā)動(dòng)畫	number
y	定義y軸方向的偏移，如果y的值不在可移動(dòng)范圍內(nèi)，會(huì)自動(dòng)移動(dòng)到可移動(dòng)范圍；改變y的值會(huì)觸發(fā)動(dòng)畫	number
damping	阻尼系數(shù)，用于控制x或y改變時(shí)的動(dòng)畫和過界回彈的動(dòng)畫，值越大移動(dòng)越快	number 默認(rèn)是20
friction	摩擦系數(shù)，用于控制慣性滑動(dòng)的動(dòng)畫，值越大摩擦力越大，滑動(dòng)越快停止；必須大于0，否則會(huì)被設(shè)置成默認(rèn)值	number默認(rèn)是2

實(shí)現(xiàn)可移動(dòng)菜單

一、wxml界面的實(shí)現(xiàn)

<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'>點(diǎn)我隨機(jī)滾動(dòng)小方塊</button>
<button class='button' type='primary' size='mini' bindtap='stopMove'>點(diǎn)我停止隨機(jī)滾動(dòng)</button>

界面布局比較簡單，需要注意的幾點(diǎn)

movable-view 必須設(shè)置width和height屬性，不設(shè)置默認(rèn)為10px
movable-view 默認(rèn)為絕對(duì)定位，top和left屬性為0px
當(dāng)movable-view小于movable-area時(shí)，movable-view的移動(dòng)范圍是在movable-area內(nèi)；當(dāng)movable-view大于movable-area時(shí)，movable-view的移動(dòng)范圍必須包含movable-area（x軸方向和y軸方向分開考慮）
movable-view必須在<movable-area/>組件中，并且必須是直接子節(jié)點(diǎn)，否則不能移動(dòng)

二、xxx.js隨機(jī)移動(dòng)實(shí)現(xiàn)的邏輯

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);
}
},
//隨機(jī)函數(shù)
GetRandomNum: function (Min, Max) {
var Range = Max - Min;
var Rand = Math.random();
return (Min + Math.round(Rand * Range));
},

js里面需要講解的內(nèi)容比較多

x/y 用來控制菜單欄的位置，isStop停止移動(dòng)
介紹一個(gè)js延遲執(zhí)行事件的方法setTimeout（function () { }, 1000)，逗號(hào)左邊執(zhí)行事件的方法，右邊設(shè)置延遲多久執(zhí)行事件，1000對(duì)應(yīng)的是一秒
GetRandomNum 這個(gè)方法是我自定義的，用于生成隨機(jī)數(shù)字，計(jì)算滾動(dòng)的距離
還有一個(gè)需要注意點(diǎn)是，要事件監(jiān)聽更新數(shù)據(jù)的時(shí)候，this對(duì)象在程序中隨時(shí)會(huì)改變，此時(shí)需要執(zhí)行 var that = this;把this對(duì)象傳遞給that就可以解決上面遇見的問題

三、wxss樣式

.moveArea {
height: 400px;
width:200px;
background: red;
margin: 10px;
}
.moveView {
height: 100rpx;
width: 100rpx;
line-height: 100rpx;
background: blue;
border-radius: 50%;
text-align: center;
margin: 10rpx;
}

今天講解的樣式有一下幾個(gè)

如何把圖形從方形變成圓形？

border-radius 這是今天的主角，把他的值設(shè)置成50%，就由方形變成圓形了，這個(gè)屬性是設(shè)置圓角的，設(shè)置10%，是有一點(diǎn)圓角的方形

設(shè)置內(nèi)容垂直居中方法

這是代碼君的一個(gè)小竅門，把height和line-height設(shè)置成一樣，他自動(dòng)會(huì)垂直居中

總結(jié)

今天講解的是可移動(dòng)的菜單，本身實(shí)現(xiàn)是沒什么難度的，我又引入了幾個(gè)知識(shí)點(diǎn)，一個(gè)是推遲事件函數(shù)的使用還有就是幾個(gè)css樣式設(shè)置的小竅門，讀者回去認(rèn)真記住使用規(guī)則，后面我們陸續(xù)會(huì)用上，好啦，今天的課程就到這~

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: