微信小程序移動(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ì)大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！
相關(guān)文章
javascript拖拽應(yīng)用實(shí)例（二）
這篇文章主要為大家詳細(xì)介紹了javascript拖拽應(yīng)用實(shí)例，拖拽條拖到底，驗(yàn)證碼顯示出來，感興趣的小伙伴們可以參考一下2016-03-03
這篇文章主要介紹了ES6 中可以提升幸福度的小功能,在量解構(gòu)賦值的用途，函數(shù)的用處等方面給大家介紹，需要的朋友可以參考下2018-08-08
這篇文章主要介紹了關(guān)于JavaScript命名空間的一些心得,分別給出了頂級(jí)、多級(jí)命名空間的例子,需要的朋友可以參考下2014-06-06
js實(shí)現(xiàn)數(shù)組和對(duì)象的深淺拷貝
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)數(shù)組和對(duì)象的深淺拷貝，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-09-09
基于JQuery模仿蘋果桌面的Dock效果(初級(jí)版)
新的一天新的開始，今天要分享的是用JQuery模仿蘋果操作系統(tǒng)桌面的Dock效果，之所以稱之為初級(jí)版，是因?yàn)槠渲羞€有一些bug，顯示效果并不穩(wěn)定2012-10-10
JavaScript使用Base64編碼和Blob對(duì)象加密圖像url地址
有時(shí)候會(huì)看到一些網(wǎng)站的圖片src中是blob:http://example.com/7c672acb-375c-4a26-9af9-99cb4c77f04d,這樣的圖片加載怎么實(shí)現(xiàn)呢？本文講解在瀏覽器中JavaScript使用解析Base64編碼和Blob對(duì)象技術(shù)來實(shí)現(xiàn),下面是實(shí)現(xiàn)的步驟和相應(yīng)的示例代碼,2023-12-12
layui頁(yè)面級(jí)彈出框的實(shí)現(xiàn)
本文主要介紹了layui頁(yè)面級(jí)彈出框的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
Bootstarp 基礎(chǔ)教程之表單部分實(shí)例代碼
這篇文章主要介紹了Bootstarp 基礎(chǔ)教程之表單部分實(shí)例代碼，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下2017-02-02
JavaScript實(shí)現(xiàn)LRU算法的示例詳解
不知道屏幕前的朋友們，有沒有和我一樣，覺得LRU算法原理很容易理解，實(shí)現(xiàn)起來卻很復(fù)雜。所以本文就為大家整理了一下實(shí)現(xiàn)的示例代碼，需要的可以參考一下2023-04-04
這篇文章主要介紹了常用的JavaScript WEB操作方法分享,包含數(shù)組方法集、cookie方法集、url方法集、正則表達(dá)式方法集、字符串方法集、加密方法集、日期方法集等常用操作方法,需要的朋友可以參考下2015-02-02