亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

微信小程序左滑刪除功能開(kāi)發(fā)案例

sydMobile / 3382人閱讀

摘要：當(dāng)我們手指向左滑動(dòng)時(shí)，容器向左移動(dòng)此時(shí)從容器之后顯示出來(lái)?yè)Q句話說(shuō)我們喜歡容器蓋住，使默認(rèn)在上方。接著我們給元素添加，這樣它就能獲得移動(dòng)的距離。詳細(xì)案例請(qǐng)搜索微信小程序魔都源碼地址

直接進(jìn)入正題，我們需要做的就是通過(guò)手指滑動(dòng)列表項(xiàng)后，右側(cè)出現(xiàn)刪除；
比如說(shuō)像這樣：

向左邊滑動(dòng)后出現(xiàn)如下的效果：

開(kāi)始擼代碼～
假設(shè)我們有N個(gè)列表項(xiàng)來(lái)自一個(gè)數(shù)組list，先確定基本的結(jié)構(gòu)


    
        {{item}}
        刪除

在item中分別放入wrap作為顯示項(xiàng)目?jī)?nèi)容的容器，與delete刪除按鈕的容器。
當(dāng)我們手指向左滑動(dòng)wrap時(shí)，wrap容器向左移動(dòng)；此時(shí)delete從wrap容器之后顯示出來(lái)；換句話說(shuō)我們喜歡wrap容器蓋住delete，使wrap默認(rèn)在delete上方。
沒(méi)錯(cuò)，我們用樣式來(lái)實(shí)現(xiàn)效果。

.item{ position:relative; }
.wrap{ 
  position:absolute;z-index:2; top:0;left:0;
  backgorund:#fff;width:100%;height:100%;
}
.delete{ position:absolute;z-index:1; top:0;right:0;width:120rpx;height:100%;}

好了，這些我們需要的核心樣式，為了wrap能100%蓋住delete，我們給到它寬高都是百分之百，并且填充背景顏色是必然的，至于要怎么美化可自行添加需要的樣式。
基本的結(jié)構(gòu)就到這里了，接下來(lái)我們?yōu)閣rap添加觸摸事件；

{{item}}

我們綁定了三個(gè)觸摸事件，分別是，觸摸開(kāi)始，觸摸時(shí)移動(dòng)以及觸摸結(jié)束。
同時(shí)有個(gè)wrap添加了data-index="{{index}}" 這樣我們就可以確定當(dāng)前觸摸的列表項(xiàng)是哪一個(gè)。
接著我們來(lái)為他們添加對(duì)應(yīng)的方法。

  touchstart:function(e){
    this.setData({
      index: e.currentTarget.dataset.index,
      Mstart: e.changedTouches[0].pageX
    });
  }

通過(guò)touchstart方法我們將當(dāng)前觸發(fā)事件元素的索引保存到index，并且獲得當(dāng)前手指觸摸的坐標(biāo)位置e.changedTouches[0].pageX；

e.changedTouches[0].pageX


屏幕的左上角的坐標(biāo)為(0,0)，離左上角的距離越大pageX的值也越大。

下一步，當(dāng)我們移動(dòng)手指向左滑動(dòng)時(shí)：

  touchmove: function (e) {
    //列表項(xiàng)數(shù)組
    let list = this.data.list;
    //手指在屏幕上移動(dòng)的距離
    //移動(dòng)距離 = 觸摸的位置 - 移動(dòng)后的觸摸位置
    let move = this.data.Mstart - e.changedTouches[0].pageX;
    // 這里就使用到我們之前記錄的索引index
    //比如你滑動(dòng)第一個(gè)列表項(xiàng)index就是0，第二個(gè)列表項(xiàng)就是1，···
    //通過(guò)index我們就可以很準(zhǔn)確的獲得當(dāng)前觸發(fā)的元素，當(dāng)然我們需要在事前為數(shù)組list的每一項(xiàng)元素添加x屬性
    list[this.data.index].x = move > 0 ? -move : 0;
    this.setData({
      list: list
    });
  }

當(dāng)移動(dòng)后的觸摸位置小于最初觸發(fā)的位置時(shí)，說(shuō)明手指是向左滑動(dòng)，因?yàn)閜ageX越小就越向屏幕邊緣靠近；這個(gè)時(shí)候move就是wrap容器需要向左移動(dòng)的距離。
我們重寫(xiě)list[this.data.index].x的值，并且將原有的list覆蓋，這樣我們?cè)诨瑒?dòng)的時(shí)候就能實(shí)時(shí)的看到元素跟隨手指移動(dòng)的效果；
這個(gè)時(shí)候我們可以發(fā)現(xiàn)，我們一直往左邊移動(dòng)，wrap元素就會(huì)被推到屏幕的邊緣；這很明顯不是我們想要的效果，我們希望滑動(dòng)到一定距離后就停止滑動(dòng)，于是我們?yōu)槠涮砑幼詈笠粋€(gè)方法；

  touchend: function (e) {
    let list = this.data.list;
    let move = this.data.Mstart - e.changedTouches[0].pageX;
    list[this.data.index].x = move > 100 ? -180 : 0;
    this.setData({
      list: list
    });
  },

我們看到這個(gè)方法唯一的不同的地方是這一行

list[this.data.index].x = move > 100 ? -180 : 0

意思是當(dāng)手指離開(kāi)元素時(shí)，如果移動(dòng)的距離大于100，那么元素將自動(dòng)向左移動(dòng)到180的距離，如果小于100那么元素將向右恢復(fù)。
接著我們給wrap元素添加style，這樣它就能獲得移動(dòng)的距離x。
至于為什么要移動(dòng)距離要除以2，這個(gè)跟小程序使用rpx單位有關(guān)系；
之前我們寫(xiě)100，-180是像素px，需要換算成rpx；
微信小程序開(kāi)發(fā)尺寸單位文檔

設(shè)備    rpx換算px (屏幕寬度/750)    px換算rpx (750/屏幕寬度)
iPhone5,1rpx = 0.42px,1px = 2.34rpx
iPhone6,1rpx = 0.5px,1px = 2rpx
iPhone6 Plus,1rpx = 0.552px,1px = 1.81rpx

我們看到基本是2倍的比例；

{{item}}

最后我們使用樣式為wrap元素添加過(guò)渡效果就基本完成了。

詳細(xì)案例請(qǐng)搜索微信小程序：52魔都
源碼地址：https://github.com/749264345/...

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/99171.html

相關(guān)文章

  • 微信小程序——商城篇

    摘要：微信小程序之跳轉(zhuǎn)在進(jìn)入商品詳情頁(yè)以后，點(diǎn)擊左下角的圖標(biāo)原應(yīng)該跳轉(zhuǎn)到首頁(yè)，但是一直點(diǎn)也不跳，而且也不報(bào)錯(cuò)。放下效果圖微信小程序購(gòu)物車(chē)購(gòu)物車(chē)頁(yè)面邏輯的話，要按業(yè)務(wù)需求來(lái)。 前言 隨著wepy和mpvue的出現(xiàn)及流行，開(kāi)發(fā)小程序變的越來(lái)越便捷和強(qiáng)大，作為基佬社區(qū)的一份子，我們都需要把自己遇到的問(wèn)題以及如何解決的方式相互分享，這樣才能幫助到更多的朋（ji）友（lao）。如有寫(xiě)的不足的地方，請(qǐng)各...

    k00baa 評(píng)論0 收藏0

  • 小程序開(kāi)發(fā)：左滑刪除

    摘要：，上層使用絕對(duì)定位，我們操縱屬性的值來(lái)實(shí)現(xiàn)像左移動(dòng)。，我們通過(guò)微信小程序提供的對(duì)象和個(gè)有關(guān)手指觸摸的函數(shù)，，來(lái)實(shí)現(xiàn)隨手指移動(dòng)。省略數(shù)據(jù)刪除部分中根據(jù)綁定的事件觸發(fā)刪除按鈕，用戶點(diǎn)擊刪除，發(fā)送請(qǐng)求，根據(jù)返回值對(duì)用戶進(jìn)行反饋。 導(dǎo)語(yǔ) 首先聲明兩點(diǎn)： 思路以及代碼，是根據(jù)資料進(jìn)行一些修改以及補(bǔ)充，原文地址在此 下面的只是 demo，各位根據(jù)自己的需要進(jìn)行修改完善 實(shí)現(xiàn)的思路摘抄如下 1...

    missonce 評(píng)論0 收藏0

  • 小程序左滑刪除如何實(shí)現(xiàn)

    摘要：微信小程序如何實(shí)現(xiàn)左滑刪除的功能呢左滑刪除組件，基礎(chǔ)庫(kù)開(kāi)始支持，如下圖所示。 微信小程序如何實(shí)現(xiàn)左滑刪除的功能呢 https://developers.weixin.qq.... https://developers.weixin.qq.com/miniprogram/dev/extended/weui/slideview.html Slideview左滑刪除組件，基礎(chǔ)庫(kù) 2.4.4 ...

    ChristmasBoy 評(píng)論0 收藏0

  • 寫(xiě)一個(gè)微信小程序側(cè)滑刪除組件

    摘要：今天就遇到一個(gè)需要，刪除操作，按照微信的交互做一個(gè)。剩下的可以看看這個(gè)代碼，微信小程序側(cè)滑刪除編輯一些小問(wèn)題在滑動(dòng)的時(shí)候，貌似最小需要像素才會(huì)響應(yīng)，是不是我的姿勢(shì)有點(diǎn)問(wèn)題。原文閱讀寫(xiě)一個(gè)微信小程序側(cè)滑刪除組件 背景 最近一直在斷斷續(xù)續(xù)做一個(gè)小程序的項(xiàng)目，看起來(lái)很小，但一直沒(méi)正經(jīng)做過(guò)小程序，所有沒(méi)啥積累，什么東西都要自己寫(xiě)一遍。 今天就遇到一個(gè)需要，刪除操作，按照微信的交互做一個(gè)。 向左...

    宋華 評(píng)論0 收藏0

  • 從0到1：微信小程序自選股項(xiàng)目回憶錄

    摘要：小程序自選股項(xiàng)目團(tuán)隊(duì)在長(zhǎng)達(dá)五個(gè)月的時(shí)間里經(jīng)歷了太多不為人知的故事，不知通宵了多少個(gè)夜晚，只為等待小龍宣布號(hào)小程序正式發(fā)布的到來(lái)。第一次被微信開(kāi)放平臺(tái)開(kāi)發(fā)二組團(tuán)隊(duì)小程序項(xiàng)目團(tuán)隊(duì)當(dāng)小白鼠各種實(shí)驗(yàn)新特性。。 導(dǎo)語(yǔ)：我很喜歡小龍的一句話，微信因你而變。是的，把事情做到極致的時(shí)候，這個(gè)世界就會(huì)因你而變。 小程序自選股項(xiàng)目團(tuán)隊(duì)在長(zhǎng)達(dá)五個(gè)月的時(shí)間里經(jīng)歷了太多不為人知的故事， 不知通宵了多少個(gè)夜晚，只...

    feng409 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<