微信小程序移動拖拽視圖-movable-view實(shí)例詳解
更新時間：2019年08月17日 08:43:17 作者：北京智慧流官方iOS博客
這篇文章主要介紹了微信小程序移動拖拽視圖-movable-view的實(shí)例代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
JS中的sender參數(shù)（sender是事件的傳值）前提是只有一個touch移動的時候。多個touch需要在
changedTouches
數(shù)組中查找
redclcik:function(sender){
wx.showModal({
title: '點(diǎn)擊紅色',
content: '',
})
console.log(sender);
},
redmove:function(sender){
console.log(sender);
// console.log(sender.changedTouches[0].pageX);
},
.wxss內(nèi)容：
<view>移動視圖控件</view> <!-- 創(chuàng)建一個move-area --> <movable-area style="width:100%;height:1000rpx;background:gray;"> <!-- 可以移動view 黃色、寬高100rpx--> <movable-view style='background:yellow;width:100rpx;height:100rpx;' direction="all"> </movable-view> <!-- 可以移動view 紅色、寬高100rpx--> <movable-view style='background:red;width:100rpx;height:100rpx;' direction="all" bindtap='redclcik' bindtouchmove='redmove'> </movable-view> </movable-area>
視圖效果：
總結(jié)
以上所述是小編給大家介紹的微信小程序移動拖拽視圖-movable-view實(shí)例詳解，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復(fù)大家的！
相關(guān)文章
這篇文章主要介紹了js前端對于大量數(shù)據(jù)的展示方式及處理方法，幫助大家更好的理解和使用js，感興趣的朋友可以了解下2020-12-12
javascript實(shí)現(xiàn)省市區(qū)三級聯(lián)動下拉框菜單
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)省市區(qū)三級聯(lián)動下拉框菜單很詳細(xì)的代碼，解決了大家實(shí)現(xiàn)javascript省市區(qū)三級聯(lián)動下拉框菜單的問題，感興趣的小伙伴們可以參考一下2015-11-11
這篇文章主要介紹了JS獲取鼠標(biāo)位置距瀏覽器窗口距離的方法,結(jié)合實(shí)例形式分析了JS針對各種常見瀏覽器窗口及鼠標(biāo)響應(yīng)操作相關(guān)技巧,需要的朋友可以參考下2017-04-04
這篇文章主要為大家介紹了JavaScript 事件，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
JsEasy簡介 JsEasy是什么?與下載...2007-03-03
對動態(tài)加載腳本，需要重點(diǎn)關(guān)注的一個問題是，所動態(tài)加載的JS腳本的接口依賴問題。2011-01-01
這篇文章主要介紹了微信小程序 自定義消息提示框的相關(guān)資料,wx.showToast(OBJECT)接口調(diào)用，實(shí)現(xiàn)改功能，需要的朋友可以參考下2017-08-08
使用Javascript實(shí)現(xiàn)復(fù)制粘貼功能的示例代碼
本篇文章記錄如何通過js代碼實(shí)現(xiàn)復(fù)制內(nèi)容到剪切板,之后可以粘貼到需要的地方的功能,文中通過代碼示例介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了微信小程序—仿淘寶熱搜詞在搜索框中輪播功能的相關(guān)資料,需要的朋友可以參考下2020-01-01
在JavaScript中構(gòu)建ArrayList示例代碼
這篇文章主要介紹了在JavaScript中構(gòu)建ArrayList，很實(shí)用,需要的朋友可以參考下2014-09-09