微信小程式 浮動按鈕拖動功能

2021-09-29 11:15:23 字數 1302 閱讀 7243

在開發過程中無意間想到了這個功能。一番查詢之後找到這個功能相關的**片段。拷貝過來之後各種報錯,經過自己的整改以可以使用。

//.js  頁面**

page(,

/** * 拖動浮動

*/buttonstart:

function

(e))},

buttonmove:

function

(e))

var buttontop =

this

.data.buttontop + translatey;

var buttonleft =

this

.data.buttonleft + translatex;

//判斷是移動否超出螢幕

if(buttonleft +

50>=

this

.data.windowwidth)

if(buttonleft <=0)

if(buttontop <=0)

if(buttontop +

50>=

this

.data.windowheight)

this

.setdata()

},buttonend:

function

(e)}

)

wxml:頁面**

catchtouchmove

="buttonmove"

catchtouchstart

="buttonstart"

catchtouchend

="buttonend"

style

="top:

}px;left:

}px;

" class

="money"

>

src=

"/image/wx.png"

class

="wx_img"

>

image

>

class

="zhifu"

>

>

button

>

image路徑換成自己的路徑

wxss:css頁面樣式

//不要忘記清除button自帶樣式

/* 支付按鈕樣式 */

.money

.wx_img

.zhifu

這就是這個功能的**片段,情況就是這個情況。

微信小程式之實現多個按鈕toggle功能

上很多都是只設定乙個按鈕的toggle,所以我現在來稍微總結下 多個按鈕如何實現自身的toggle功能。原理 1,列表展示的時候,我們會用wx for 來迴圈資料,那麼我們就會得到相應的當前的第幾個資料 即 wx key index 2.在每乙個資料裡面新增乙個toggle的屬性,toggle fa...

微信小程式實現多個按鈕toggle功能的例項

微信小程式實現多個按鈕toggle功能的例項 如下圖所示,實現該按鈕toggle功能。上很多都是只設定乙個按鈕的toggle,所以我現在來稍微總結下 多個按鈕如何實現自身的toggle功能。原理 1,列表展示的時候,我們會用wx for 來迴圈資料,那麼我們就會得到相應的當前的第幾個資料 即 wx ...

微信小程式功能介紹

援引官方對產品的定義 框架為開發者提供了一系列基礎元件,開發者可以通過組合這些基礎元件進行快速開發。基礎元件分為以下八大類 檢視容器 基礎內容 表單操作反饋 導航多 地圖畫布 將本地資源上傳到開發者伺服器 一種在單個tcp連線上進行全雙工通訊的協議,能夠輕鬆構建低延遲的客戶端。從本地相簿選擇或使用相...