這篇文章將為大家詳細講解有關微信小程序中的wxs模塊怎么用,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
成都創新互聯服務項目包括若羌網站建設、若羌網站制作、若羌網頁制作以及若羌網絡營銷策劃等。多年來,我們專注于互聯網行業,利用自身積累的技術優勢、行業經驗、深度合作伙伴關系等,向廣大中小型企業、政府機構等提供互聯網行業的解決方案,若羌網站推廣取得了明顯的社會效益與經濟效益。目前,我們服務的客戶以成都為中心已經輻射到若羌省份的部分城市,未來相信會繼續擴大服務區域并繼續獲得客戶的支持與信任!
wxs是專門用于wxml頁面的,它實現的是在視圖層調用函數的功能
調用方式
雖然在微信文檔中有說明,wxs是小程序的一套腳本語言,有自己的語法,但是大部分語法還是和js區別不大,有興趣的可以自行翻看文檔。微信小程序中提供了兩種調用方式,這里不做過多贅述,直接貼代碼
wxml:
<view class="main"> <view>主頁</view> <wxs module="IndexWxs" src="./index.wxs"></wxs>//新建index.wxs文件,在wxs標簽中自定義路徑引入,IndexWxs為自定義的module名 <view change:prop="{{IndexWxs.chooseShow}}" //change:prop是起到類似observe的監聽作用,當prop中的data屬性有更新的時候,會觸發change:prop的方法 prop="{{monitor}}" //data屬性 data-navHeight="{{navHeight}}" //可以使用data-自定義傳入屬性 data-edge="{{edgeData}}" catch:touchstart="{{IndexWxs.touchStartByBlock}}" //要調用wxs的方法需使用{{ }} catch:touchmove="{{IndexWxs.touchMoveByBlock}}" catch:touchend="{{IndexWxs.touchEndByBlock}}"> </view> </view>
\
wxs:
var x = 0,y = 0; //viewData 使用小程序獲取節點信息的方法,通過data-傳入 var viewData = { height: 0,//滑塊的寬高 width: 0, windowHeight: 0,//屏幕的寬高 windowWidth: 0 } var eventInstance = null module.exports = { //觸摸開始 touchStartByBlock: function (event) { eventInstance = event;// event.instance為組件實例 var setViewData = event.currentTarget.dataset//獲取data-傳入的值 if (setViewData && setViewData.edge && setViewData.edge.windowHeight) { viewData = setViewData.edge } x = event.changedTouches[0].clientX - viewData.width/2//滑動過程中保持手指在模塊中心位置 y = event.changedTouches[0].clientY - viewData.height/2 }, //觸摸移動中,可以給x,y寫一些邊界值判斷,防止滑塊越界,此處不做展示 touchMoveByBlock: function (event) { x = event.changedTouches[0].clientX - viewData.width/2 y = event.changedTouches[0].clientY - viewData.height/2 event.instance.setStyle({//使用setStyle設置的樣式權重比wxml設置的樣式高 transform: 'translate('+x+'px'+','+y+'px)'//setStyle需使用字符串 }) }, //松開手指,觸摸結束時 touchEndByBlock: function (event) { //吸邊處理,判斷當前手指位置在屏幕的哪一邊 x = viewData.windowWidth/2 < x ? viewData.windowWidth-viewData.width : 0; y = y > viewData.windowHeight-viewData.height ? viewData.windowHeight-viewData.height : y event.instance.setStyle({ transform: 'translate('+x+'px'+','+y+'px)', }) }, //當props的monitor數據發生變化的時候觸發該方法,會自動傳入monitor當前值,一些業務邏輯可以在此處處理 chooseShow: function (monitor) { console.log('監聽到更新,monitor=',monitor); } }
關于“微信小程序中的wxs模塊怎么用”這篇文章就分享到這里了,希望以上內容可以對大家有一定的幫助,使各位可以學到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。
當前題目:微信小程序中的wxs模塊怎么用
文章轉載:http://www.yijiale78.com/article48/jdohep.html
成都網站建設公司_創新互聯,為您提供ChatGPT、網站收錄、網站改版、做網站、網站導航、App開發
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯