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