99偷拍视频精品区一区二,口述久久久久久久久久久久,国产精品夫妇激情啪发布,成人永久免费网站在线观看,国产精品高清免费在线,青青草在线观看视频观看,久久久久久国产一区,天天婷婷久久18禁,日韩动漫av在线播放直播

微信小程序中的wxs模塊怎么用

這篇文章將為大家詳細講解有關微信小程序中的wxs模塊怎么用,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。

成都創新互聯服務項目包括若羌網站建設、若羌網站制作、若羌網頁制作以及若羌網絡營銷策劃等。多年來,我們專注于互聯網行業,利用自身積累的技術優勢、行業經驗、深度合作伙伴關系等,向廣大中小型企業、政府機構等提供互聯網行業的解決方案,若羌網站推廣取得了明顯的社會效益與經濟效益。目前,我們服務的客戶以成都為中心已經輻射到若羌省份的部分城市,未來相信會繼續擴大服務區域并繼續獲得客戶的支持與信任!

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。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯

成都網頁設計公司