微信小程序?qū)崿F(xiàn)拖拽 image 觸摸事件監(jiān)聽的實(shí)例
微信小程序?qū)崿F(xiàn)拖拽 image 觸摸事件監(jiān)聽的實(shí)例
需要做個浮在scroll-view之上的button.嘗試了一下.
實(shí)現(xiàn)效果圖:

Android中也會有類似移動控件的操作.思路差不多.獲取到位移的X Y 的變量,給控件設(shè)置坐標(biāo).
1.index.wxml
<image class="image-style" src="../../images/gundong.png" bindtap="ballClickEvent" style="bottom:{{ballBottom}}px;right:{{ballRight}}px;" bindtouchmove="ballMoveEvent">
</image>
簡單的設(shè)置一張圖片,添加觸摸事件監(jiān)聽.點(diǎn)擊事件監(jiān)聽.根據(jù)觸摸事件獲取X Y位移,設(shè)置為image的位置
2.index.js
//index.js
//獲取應(yīng)用實(shí)例
var app = getApp()
Page({
data: {
ballBottom: 240,
ballRight: 120,
screenHeight: 0,
screenWidth: 0,
},
onLoad: function () { //獲取屏幕寬高
var _this = this;
wx.getSystemInfo({
success: function (res) {
_this.setData({
screenHeight: res.windowHeight,
screenWidth: res.windowWidth,
});
}
});
},
ballMoveEvent: function (e) {
console.log('我被拖動了....')
var touchs = e.touches[0];
var pageX = touchs.pageX;
var pageY = touchs.pageY;
console.log('pageX: ' + pageX)
console.log('pageY: ' + pageY)
//防止坐標(biāo)越界,view寬高的一般
if (pageX < 30) return;
if (pageX > this.data.screenWidth - 30) return;
if (this.data.screenHeight - pageY <= 30) return;
if (pageY <= 30) return;
//這里用right和bottom.所以需要將pageX pageY轉(zhuǎn)換
var x = this.data.screenWidth - pageX - 30;
var y = this.data.screenHeight - pageY - 30;
console.log('x: ' + x)
console.log('y: ' + y)
this.setData({
ballBottom: y,
ballRight: x
});
},
//點(diǎn)擊事件
ballClickEvent: function () {
console.log('點(diǎn)擊了....')
}
})
3.index.wxss
這里需要設(shè)置z-index
.image-style{
position: absolute;
bottom: 240px;
right: 100px;
width: 60px;
height: 60px;
z-index: 100;
}
如有疑問請留言或者到本站社區(qū)交流討論,本站關(guān)于小程序的文章還有很多,希望大家搜索查閱,感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!
相關(guān)文章
微信小程序 tabs選項(xiàng)卡效果的實(shí)現(xiàn)
這篇文章主要介紹了微信小程序 tabs選項(xiàng)卡效果的實(shí)現(xiàn)的相關(guān)資料,微信小程序內(nèi)部組件沒有Tabs 選項(xiàng)卡的功能,自己實(shí)現(xiàn)個類似的,需要的朋友可以參考下2017-01-01
前端利用jsencrypt.js進(jìn)行RSA加密示例詳解
這篇文章主要為大家介紹了前端利用jsencrypt.js進(jìn)行RSA加密示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
JavaScript的模塊化開發(fā)框架Sea.js上手指南
Sea.js的目的是追求簡單的代碼書寫和組織方式,Sea.js并沒有過多功能而是主要對前端程序的部署結(jié)構(gòu)作出約束,下面我們就來看一下JavaScript的模塊化開發(fā)框架Sea.js上手指南:2016-05-05

