欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序?qū)崿F(xiàn)拖拽功能

 更新時間:2019年09月26日 11:49:00   作者:前端_李嘉豪  
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)拖拽功能,代碼簡單易懂,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下

<view class='collectBox' 
  bindtap='addCollect' 
  wx:if="{{write[0]+write[1] > 0}}" 
  bindtouchmove="touchmove" 
  catch:touchmove 
  style="left:{{write[0]}}px;top:{{write[1]}}px;">
  <image src='../../images/icon/addcollect.png'></image>
</view>
// pages/cateDetaile/cateDetaile.js
const app = getApp()
Page({
 
  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    // 拖拽參數(shù)
    writePosition: [80, 90], //默認定位參數(shù)
    writesize: [0, 0],// X Y 定位
    window: [0, 0], //屏幕尺寸
    write: [0, 0], //定位參數(shù)
    scrolltop: 0,//據(jù)頂部距離
  },
 
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  onLoad: function (options) {
    // 在頁面中定義插屏廣告
    let that = this;
    that.getSysdata();
  },
  //計算默認定位值
  getSysdata: function () {
    var that = this;
    wx.getSystemInfo({
      success: function (e) {
        that.data.window = [e.windowWidth, e.windowHeight];
        var write = [];
        write[0] = that.data.window[0] * that.data.writePosition[0] / 100;
        write[1] = that.data.window[1] * that.data.writePosition[1] / 100;
        console.log(write,45)
        that.setData({
          write: write
        }, function () {
          // 獲取元素寬高
          wx.createSelectorQuery().select('.collectBox').boundingClientRect(function (res) {
            console.log(res.width)
            that.data.writesize = [res.width, res.height];
          }).exec();
        })
      },
      fail: function (e) {
        console.log(e)
      }
    });
  },
  //開始拖拽  
  touchmove: function (e) {
    var that = this;
    var position = [e.touches[0].pageX - that.data.writesize[0] / 2, e.touches[0].pageY - that.data.writesize[1] / 2 - this.data.scrolltop];
    that.setData({
      write: position
    });
  },
  onPageScroll(e) {
    this.data.scrolltop = e.scrollTop;
  },
})

總結(jié)

以上所述是小編給大家介紹的微信小程序?qū)崿F(xiàn)拖拽功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!

相關(guān)文章

  • JavaScript獲得選中文本內(nèi)容的方法

    JavaScript獲得選中文本內(nèi)容的方法

    今天希望實現(xiàn)一個,直接在網(wǎng)頁上選中文本,點擊收藏夾的鏈接(javascript)即可彈出新窗口(類似“百度搜藏”和“QQ書簽”),新窗口中的文本框即顯示了選中的文本。
    2008-12-12
  • js 數(shù)組的for循環(huán)到底應該怎么寫?

    js 數(shù)組的for循環(huán)到底應該怎么寫?

    說實話,我是個比較喜歡懷疑權(quán)威的人,但是在有些權(quán)威的問題一直在我面前閃,閃啊閃,我就開始不懷疑他們了,因為有10000個人說這個東西是對的,我就會覺得它的確是對的吧。
    2010-05-05
  • uniapp使用mui-player插件播放m3u8/flv視頻流示例代碼

    uniapp使用mui-player插件播放m3u8/flv視頻流示例代碼

    在小程序里播放視頻是很常見的功能,下面這篇文章主要給大家介紹了關(guān)于uniapp使用mui-player插件播放m3u8/flv視頻流的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2023-06-06
  • 如何通過非數(shù)字與字符的方式實現(xiàn)PHP WebShell詳解

    如何通過非數(shù)字與字符的方式實現(xiàn)PHP WebShell詳解

    這篇文章主要給大家介紹了關(guān)于如何通過非數(shù)字與字符的方式實現(xiàn)PHP WebShell的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家具有一定的參考學習價值,需要的朋友們下面來一起看看吧。
    2017-07-07
  • javascript中關(guān)于&& 和 || 表達式的小技巧分享

    javascript中關(guān)于&& 和 || 表達式的小技巧分享

    我將會介紹和解析12個簡單但是強大的JavaScript技巧. 這些技巧所有的JavaScript程序員都可以馬上使用, 你不需要成為JavaScript高手才能理解這些.下面我們開始本系列的第一篇文章,介紹下強大的&& 和 || 表達式
    2015-04-04
  • 淺析Javascript中雙等號(==)隱性轉(zhuǎn)換機制

    淺析Javascript中雙等號(==)隱性轉(zhuǎn)換機制

    這篇文章給大家詳細介紹了javascript中雙等號(==)隱性轉(zhuǎn)換機制,非常不錯,具有參考借鑒價值,需要的朋友參考下吧
    2017-10-10
  • 基于JS實現(xiàn)二維碼名片生成的示例代碼

    基于JS實現(xiàn)二維碼名片生成的示例代碼

    這篇文章主要為大家詳細介紹了如何利用JavaScript實現(xiàn)生成二維碼名片的功能,文中的示例代碼簡潔易懂,感興趣的小伙伴可以動手嘗試一下
    2022-06-06
  • TypeScript 類型編程之索引類型遞歸去掉可選修飾

    TypeScript 類型編程之索引類型遞歸去掉可選修飾

    這篇文章主要介紹了TypeScript 類型編程之索引類型遞歸去掉可選修飾,文章圍繞主題展開詳細的內(nèi)容介紹,具有一定的參考價值,需要的小伙伴可以參考一下
    2022-08-08
  • js實現(xiàn)tab切換效果

    js實現(xiàn)tab切換效果

    本文主要分享了js封裝一個tab切換效果的示例代碼,具有很好的參考價值,下面跟著小編一起來看下吧
    2017-02-02
  • javascript 中模板方法單例的實現(xiàn)方法

    javascript 中模板方法單例的實現(xiàn)方法

    這篇文章主要介紹了javascript 中模板方法單例的實現(xiàn)方法的相關(guān)資料,希望通過本文能幫助到大家,需要的朋友可以參考下
    2017-10-10

最新評論