微信小程式:catchtouchmove阻止彈窗後滾動穿透
前言
啊 都不知道寫什麼好,一個小知識點一個小知識點,就想慢慢記下來,下次遇到了類似的問題,可以翻一翻。
開始
顯示彈窗時,希望底部的滾動事件不被觸發,需要在彈窗物件上,新增catchtouchmove事件。
wxml:
// 彈窗的節點
<view class='dialog' catchtouchmove='stopPageScroll'>
// 彈窗的內容
</view>
js:
stopPageScroll(){
return
}
擴充套件
網上還有一種寫法,會一直報警告,因為沒有這個函式。雖然也能解決問題啦
// 彈窗的節點 <view class='dialog' catchtouchmove='{{true}}'> // 彈窗的內容 </view>
為什麼是彈窗物件?
因為彈窗時,彈窗物件的層級正常是在其他節點之上的,touchmove事件觸發時,最先感知到的就是彈窗節點。
總結
如果你有什麼疑問或想法,歡迎留言評論,或者掃描下方二維碼,與我取得聯絡~ (記得備註:CSND喔~)
相關推薦
微信小程式:catchtouchmove阻止彈窗後滾動穿透
前言 啊 都不知道寫什麼好,一個小知識點一個小知識點,就想慢慢記下來,下次遇到了類似的問題,可以翻一翻。 開始 顯示彈窗時,希望底部的滾動事件不被觸發,需要在彈窗物件上,新增catchtouchmove事件。 wxml: // 彈窗的節點 <view clas
微信小程式自定義分享彈窗
效果圖: 多種觸發條件使用同一個彈窗: *.js觸發處: this.setData({ isWrong:true, wrongtap:1, dialogWord:"wrong", wrongDec:"答案錯誤,是否向好友求助?" })
微信小程式 —— 解決自定義彈窗出現後,蒙層下的頁面仍可以滾動的問題
在微信小程式開發中,會碰到自定義彈窗出現後,蒙層下面的頁面仍可以滾動的問題。 例如: 解決方法: 1. 先點擊出現蒙層時,頁面的最外層view:height:100vh (靈活設定,
【微信小程式學習筆記】彈窗的兩種姿勢
在wxml檔案里布局彈窗,利用條件渲染,在js程式碼裡控制是否顯示 wxml <view > <loading wx:if="{{showLoading}}">載入中&
微信小程式:wx.navigateBack()時彈窗一直顯示
前言 小程式使用服務需要使用者繫結手機號,在進入頁面時,判斷使用者是否授權,未授權的話,彈窗元件(自定義的)顯示 onShow(){ let isBind = xxx if(!isBind){ // 獲取彈窗元件(自定義的)例項 this.bindTip = this
微信小程式學習筆記——第一彈:小程式程式碼結構
近來被微信小遊戲強勢刷了一波後,萌生了學習微信小程式/小遊戲的衝動~ 作為一個馬上就要畢業的學生狗(。☉౪ ⊙。),學習一下新技術,順道還能豐富自己的簡歷,簡直不能再美滋滋了~~~ 學習筆記會持續更新 至 完成第一個小程式例項,如果以下對小程式的理解有錯誤
微信小程式:彈窗
微信小程式在和使用者互動時候需要給使用者一些提示,例如是否請求到資料等,這時候使用彈窗是一個比較好的方法 好在微信小程式給我們提供了一個 API wx.showToast success: func
微信小程式:map元件
其實前些天,吳哥就說讓我加上一個定位,我說我還沒看文件,還沒學,暫時沒加。今天上午終於開始接受map元件的挑戰,我不滴不說我真的是很懶,好吧,也有點會拒絕困難,但如果真的需要,我也可以去學習去解決,大概我的身邊缺少一個讓我有動力的吧,別問我
微信小程式:bindtap方法傳參
微信小程式:bindtap方法傳參 1、wxml <view bindtap="pay_again" data-name="{{orderList.jid}}" data-fee="{{orderList.act_fee}}" data-mobile="{{orderList.p_ph
微信小程式:globalData和Storage資料儲存中的坑
前言 在小程式登入是,將返回的使用者資料,儲存在globalData中和storage中。 // 儲存的資料是一個物件 wx.setStorageSync('userAuthData', user.data.data); this.globalData.userAuthData = user
微信小程式:將中文語音直接轉化成英文語音
作者:瘟小駒 文章來源《微信小程式個人開發全過程》 準備工作: 準備工具:Eclipse、FileZilla、微信開發者工具、一個配置好SSL證書(https)的有域名的伺服器 所需知識:SpringMVC框架、Java+HTML+CSS+JS、檔案上傳技術、To
微信小程式:Animation實現圖片旋轉動畫
最近小程式中有一個圖片旋轉的需求,最初是想著通過切換多張圖片達到旋轉的效果,後來發現微信小程式帶有動畫api,然後就改由image+Animation來實現。 ###首先在wxml中定義image <image class="bth_image2" mode="aspec
微信小程式:藍芽BLE連線10003問題分析及解決
10003是微信藍芽連線經常碰到的問題,微信官方給出的文件中就簡單的描述為“connection fail”,備註為“連線失敗”。然而,實際上出現10003的狀況有很多,比如根據deviceId連線藍芽時,藍芽裝置未開啟或異常導致無法連線;藍芽裝置被佔用或者上次藍芽連線未斷開導致無法
微信小程式:json、map、字串轉換
/** * * 字串轉json */ function stringToJson(data){ &nbs
微信小程式:高德API-PoI地址搜尋
在開始開發前有幾步必要步驟: 1.進入高德地圖API官網,登陸,開發支援-微信小程式SDK,控制檯,應用管理,建立開發需要的key。注意:服務平臺,必須是微信小程式。key用於什麼開發就建立什麼平臺Key。 2.下載 amap-wx.js開發包,https://lbs.amap
微信小程式:高德API之定位。
在開始開發前有幾步必要步驟: 1.進入高德地圖API官網,登陸,開發支援-微信小程式SDK,控制檯,應用管理,建立開發需要的key。注意:服務平臺,必須是微信小程式。key用於什麼開發就建立什麼平臺Key。 2.下載 amap-wx.js開發包,https://lbs.amap
微信小程式:登陸獲取使用者資訊,包括維護3rdSession。(Node.js-Koa)
前兩三個月最常見的問題就是登陸模組的問題了。自己也改了好幾次登陸的問題,從普通登陸,一直改到維護3rdSession。(token) 普通登陸:使用者資料包括appid,secret全部暴露在外,相對來說不安全。 上前臺程式碼塊: wxml <button open-typ
微信小程式:request請求封裝工具類
修改過的封裝請求: header: {'Content-Type': 'application/json'}, 防止引數中敏感字元丟失的問題 header: {'Content-Type': 'application/x-www-form-urlencoded'}, 
微信小程式:時間戳轉換相容ios
最近專案需要用到時間轉時間戳,於是直接使用date.parse()轉換得到時間戳 // date和time是之前儲存的,date為“yyyy-MM-dd”格式 // time為“HH:mm:ss”格式 date.parse(date + " " + time); 對於之前
微信小程式:web-view巢狀H5實現微信支付功能解決方案及填坑
最近一個多月加班比較嚴重,偶爾休息一天也是在補睡眠+陪家人,比較長時間沒有來進行總結記錄了。今天不加班,開始為這段時間做的東西進行下經驗總結。 這段時間因為公司需要,接觸了一些.Net前後臺開發,慢慢了解了一些WCF、H5站點、WebService、Soap、Linq等,也