微信小程序?qū)崿F(xiàn)可長按移動控件
微信小程序可長按移動控件,供大家參考,具體內(nèi)容如下
–包含超出邊界監(jiān)測,性能不夠理想【原因:setData在毫秒級刷新時會極大程度影響渲染性能】
Javascript
Page({ /** * 頁面的初始數(shù)據(jù) */ data: { //浮動按鈕坐標(biāo) flow_y: 130, flow_x: 20, pre_y:0, pre_x:0, //標(biāo)記移動 moveFlag: false, //標(biāo)記控件是否可放置 canNotPlace: false, imgSrc:"", }, //長按按鈕移動控件 longPress: function (e) { console.log(e) this.setData({ moveFlag: true, pre_x:e.touches[0].clientX, pre_y:e.touches[0].clientY, }) // console.log(e) console.log("begin:(", this.data.flow_x, this.data.flow_y, ")") // this.setData({ // flow_x: 1334-e.touches[0].pageX, // 獲取觸摸時的原點 // flow_y: 750-e.touches[0].pageY, // }) //console.log(startX) }, // 觸摸結(jié)束事件 touchEnd: function (e) { this.setData({ moveFlag: false }) // console.log("flow:(", this.data.flow_x, this.data.flow_y, ")") //監(jiān)測按鈕放置區(qū)域 if (!((this.data.flow_x < 730) && (this.data.flow_x > 20))&&((this.data.flow_y < 1150) && (this.data.flow_y > 130))) { this.setData({ flow_x: 20, // 轉(zhuǎn)換rpx flow_y: 130, }) } // this.setData({ // flow_x: 20, // 轉(zhuǎn)換rpx // }) }, touchMove: function (e) { //根據(jù)move差值動態(tài)布局 if (this.data.moveFlag) { // console.log("page:(", e.touches[0].pageX, e.touches[0].pageY, ")") // console.log(move_x,move_y) var x =this.data.flow_x -(e.touches[0].clientX-this.data.pre_x)*2 var y =this.data.flow_y -(e.touches[0].clientY-this.data.pre_y)*2 this.setData({ flow_x: x, // 轉(zhuǎn)換rpx flow_y: y, }) // console.log(x,y) // this.setData({ // flow_x: x, // 轉(zhuǎn)換rpx // flow_y: y, // }) if (!(((x < 730) && (x > 20))&&((y < 1000) && (y > 130)))) { this.setData({ canNotPlace: true, }) } else { this.setData({ canNotPlace: false, }) } this.setData({ pre_x:e.touches[0].clientX, pre_y:e.touches[0].clientY, }) } }, catchtouchmove: function () { //防止蒙層觸摸穿透 }, /** * 生命周期函數(shù)--監(jiān)聽頁面加載 */ onLoad: function (options) { }, /** * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成 */ onReady: function () { wx.hideLoading() }, /** * 生命周期函數(shù)--監(jiān)聽頁面顯示 */ onShow: function () { }, /** * 生命周期函數(shù)--監(jiān)聽頁面隱藏 */ onHide: function () { }, /** * 生命周期函數(shù)--監(jiān)聽頁面卸載 */ onUnload: function () { }, /** * 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作 */ onPullDownRefresh: function () { this.getArticle() }, /** * 頁面上拉觸底事件的處理函數(shù) */ onReachBottom: function () { }, /** * 用戶點擊右上角分享 */ onShareAppMessage: function () { } })
WXSS
.follow_icon{ position: fixed; /* margin: 0 10rpx; */ width:70rpx; height:70rpx; bottom: var(--flow_y--); right: var(--flow_x--); z-index: 1001; } /*mask*/ .drawer_screen { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 5; background: #000; opacity: 0.5; overflow: hidden; }
WXML
<!-- 刷新按鈕 --> <!-- <view bindtap='getArticle' style="opacity:0.8"> --> <view catchtouchmove="catchtouchmove" ><image bindtap='getArticle' bindlongpress="longPress" bindtouchmove='touchMove' bindtouchend="touchEnd" style="--flow_y--:{{flow_y}}rpx;--flow_x--:{{flow_x}}rpx;" class="follow_icon" src="{{imgSrc}}"></image></view> <!-- 蒙版屏蔽,防止觸控穿透 --> <view style="{{!canNotPlace?'background: #777;':'background: #b81e1e;'}}" catchtouchmove="catchtouchmove" class="drawer_screen" data-statu="open" wx:if="{{moveFlag}}"></view> <!-- </view> -->
為大家推薦現(xiàn)在關(guān)注度比較高的微信小程序教程一篇:《微信小程序開發(fā)教程》小編為大家精心整理的,希望喜歡。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
element?table?點擊某一行中按鈕加載功能實現(xiàn)
在Element UI中,實現(xiàn)表格(element-table)中的這種功能通常涉及到數(shù)據(jù)處理和狀態(tài)管理,這篇文章主要介紹了element?table?點擊某一行中按鈕加載功能,需要的朋友可以參考下2024-06-06微信小程序仿抖音視頻之整屏上下切換功能的實現(xiàn)代碼
這篇文章主要介紹了微信小程序仿抖音視頻之整屏上下切換功能,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-05javascript判斷iphone/android手機(jī)橫豎屏模式的函數(shù)
iphone能很好的使用onorientationchange事件,但是android的onresize事件即使不旋轉(zhuǎn)也會觸發(fā)多次2011-12-12jquery中l(wèi)ive()方法和bind()方法區(qū)別分析
這篇文章主要介紹了jquery中l(wèi)ive()方法和bind()方法區(qū)別,結(jié)合實例形式簡單分析了live()方法和bind()方法的功能、使用方法與用法區(qū)別,需要的朋友可以參考下2016-06-06Javascript靜態(tài)分頁(多個資料,靜態(tài)自動分頁)
看的處理是個不錯的想法與應(yīng)用大家可以看下。2009-02-02使用layui 渲染table數(shù)據(jù)表格的實例代碼
今天小編就為大家分享一篇使用layui 渲染table數(shù)據(jù)表格的實例代碼,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08