前言

10年積累的成都網(wǎng)站設計、做網(wǎng)站、成都外貿網(wǎng)站建設公司經(jīng)驗，可以快速應對客戶對網(wǎng)站的新想法和需求。提供各種問題對應的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡服務。我雖然不認識你，你也不認識我。但先網(wǎng)站制作后付款的網(wǎng)站建設流程，更有涪城免費網(wǎng)站建設讓你可以放心的選擇與我們合作。

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

movable-view屬性介紹

實現(xiàn)可移動菜單

一、wxml界面的實現(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'>點我隨機滾動小方塊</button>
<button class='button' type='primary' size='mini' bindtap='stopMove'>點我停止隨機滾動</button>

界面布局比較簡單，需要注意的幾點

1. movable-view 必須設置width和height屬性，不設置默認為10px
2. movable-view 默認為絕對定位，top和left屬性為0px
3. 當movable-view小于movable-area時，movable-view的移動范圍是在movable-area內；當movable-view大于movable-area時，movable-view的移動范圍必須包含movable-area（x軸方向和y軸方向分開考慮）
4. movable-view必須在<movable-area/>組件中，并且必須是直接子節(jié)點，否則不能移動

二、xxx.js隨機移動實現(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);
}
},
//隨機函數(shù)
GetRandomNum: function (Min, Max) {
var Range = Max - Min;
var Rand = Math.random();
return (Min + Math.round(Rand * Range));
},

js里面需要講解的內容比較多

1. x/y 用來控制菜單欄的位置，isStop停止移動
2. 介紹一個js延遲執(zhí)行事件的方法setTimeout（function () { }, 1000)，逗號左邊執(zhí)行事件的方法，右邊設置延遲多久執(zhí)行事件，1000對應的是一秒
3. GetRandomNum 這個方法是我自定義的，用于生成隨機數(shù)字，計算滾動的距離
4. 還有一個需要注意點是，要事件監(jiān)聽更新數(shù)據(jù)的時候，this對象在程序中隨時會改變，此時需要執(zhí)行 var that = this;把this對象傳遞給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;
}

今天講解的樣式有一下幾個

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

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

設置內容垂直居中方法

這是代碼君的一個小竅門，把height和line-height設置成一樣，他自動會垂直居中

總結

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

文章題目：微信小程序-可移動菜單的實現(xiàn)過程詳解
網(wǎng)頁URL：http://www.chinadenli.net/article44/gjodhe.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、網(wǎng)站收錄、電子商務、標簽優(yōu)化、ChatGPT、外貿網(wǎng)站建設

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)