微信小程式 movable view

2022-09-24 02:18:12 字數 1334 閱讀 1640

movable-view 是乙個可移動的檢視容器,在頁面中可以拖拽滑動。

1.屬性:

屬性名型別預設值說明

directionstringnonemovable-view的移動方向,屬性值有all、vertical、horizontal、none

inertiabooleanfalsemovable-view是否帶有慣性

out-of-boundsbooleanfalse超過可移動區域後,movable-view是否還可以移動

xnumber

定義x軸方向的偏移,如果x的值不在可移動範圍內,會自動移動到可移動範圍;改變x的值會觸發動畫

ynumber

定義y軸方向的偏移,如果y的值不在可移動範圍內,會自動移動到可移動範圍;改變y的值會觸發動畫

dampingnumber20阻尼係數,用於控制x或y改變時的動畫和過界回彈的動畫,值越大移動越快

frictionnumber2摩擦係數,用於控制慣性滑動的動畫,值越大摩擦力越大,滑動越快停止;必須大於0,否則會被設定成預設值

2.用法:

簡單示例1:

[html]view plaincopy

我們用movable-area設定了乙個300x300大小的乙個可拖動區域(藍色),然後在這個區域內放置了乙個大小為100x100的可以拖動內容movable-view(黃色),可拖動內容的direction設定為all,即可以在任意方向上進行拖動。

效果如圖:

簡單示例2:

[html]view plaincopy

我們沿用movable-area設定了乙個300x300大小的乙個可拖動區域(藍色),然後在這個區域內分別放置了4個乙個大小為100x100的可以拖動內容movable-view,

其中 黃色 可拖動內容的direction設定為all, 即 可以在任意方向上進行拖動;

紅色 可拖動內容的direction設定為horizontal, 即 只能橫向進行拖動;

綠色 可拖動內容的direction設定為vertical, 即 只能豎向進行拖動;

白色 可拖動的direction設定為none, 即 不能拖動。

效果如圖:

注意:movable-view 必須設定width和height屬性,不設定預設為10px movable-view 預設為絕對定位,top和left屬性為0px 當movable-view小於movable-area時,movable-view的移動範圍是在movable-area內;當movable-view大於movable-area時,movable-view的移動範圍必須包含movable-area(x軸方向和y軸方向分開考慮)

在具體專案中,可以優化頁面效果,增加各種監聽事件。

(微信小程式)一 初識微信小程式

需要看的 先是檔案目錄 一 pages 他存放於多個頁面 如 index log頁面。可以把他裡面的每個資料夾看成乙個整體。這個整體存放著 html css 和 資料 1 index資料夾 存放的index頁面的目錄。2 index.js 他可以處理得到 ajax 或自定義定義的資料。把得到的值封裝...

微信小程式

2.單獨設定某一頁面下的頂部欄的背景顏色,在其對應的.json檔案下修改即可 3.this.setdata 注意 onload函式下面執行的是非同步操作,非同步操作裡面this.data.直接賦值,是無效的,必須使用this.setdata this.setdata msg he llo wor l...

微信小程式

你好!這是你第一次使用markdown編輯器所展示的歡迎頁。如果你想學習如何使用markdown編輯器,可以仔細閱讀這篇文章,了解一下markdown的基本語法知識。全新的介面設計,將會帶來全新的寫作體驗 在創作中心設定你喜愛的 高亮樣式,markdown將 片顯示選擇的高亮樣式進行展示 全新的ka...